JSFiddle - React, Tailwind, and code Playground

by makfruit

HTML

<div> 
  <script type="text/javascript" src="//app.ecwid.com/script.js?1579017" charset="utf-8"></script> 
  <script type="text/javascript"> xProductBrowser("categoriesPerRow=3","views=grid(3,3) list(10) table(20)","categoryView=","searchView=","style=","defaultCategoryId=4249919"); </script> 
  <noscript>Your browser does not support JavaScript. Please proceed to <a href="https://app.ecwid.com/jsp/1579017/catalog">HTML version of this store</a></noscript> 
</div>

JavaScript

if (typeof(Ecwid) == 'object') {
  Ecwid.OnAPILoaded.add(function() {
    var preorderLabel = "Предзаказ";
    var preorderLink = "http://www.example.com/preorder.html";
    var preorderElmClass = "ecwid-preorder-link";
    var preorderElmID = "ecwid_preorder_link";
    var preorderInsertAfter = ".ecwid-productBrowser-details-outOfStockLabel";
 
    var preorderElm = jQuery(
      '<a>',
      {
        'id': preorderElmID,
        'class': preorderElmClass,
        'href': preorderLink,
        'text': preorderLabel
      }
    );
 
    function checkPreorder() {      
      if (jQuery(".ecwid-productBrowser-details-outOfStockLabel").length > 0) {
          preorderElm.insertAfter(jQuery(preorderInsertAfter)).show();          
 
      } else {
        preorderElm.hide();
      }
    }
      
    function showPreOrder() {
      var a = jQuery('.ecwid-productBrowser-productsGrid-productBottomFragment .gwt-HTML  .ecwid-productBrowser-sku');
      var i = 0;
      console.log('lol', preOrder.length);
      for (i = 0; i < a.length; i++) {
        var el = a[i];
        if (preOrder.indexOf(jQuery(el).html()) != -1) {
        jQuery(el).parent().parent().before('<div onclick="preOrderCookie()" class="additionalButton button preorder" style="font-size:17px;padding: 3px 14px 7px;margin-top:5px;">' + 'Ожидается' + '</div>');
    }
  }
}
 
    Ecwid.OnPageLoaded.add(function(page) {
      if ('PRODUCT' == page.type) {

        checkPreorder();
        
        jQuery('.ecwid-productBrowser-details-optionsPanel input[type=radio]').each(function() {
          jQuery(this).click(function() {
            setTimeout(checkPreorder, 500);
          });
        });
 
        jQuery('.ecwid-productBrowser-details-optionsPanel select').each(function() {
          jQuery(this).change(function() {
            setTimeout(checkPreorder, 500);
          });
        });
      }
    });
  });
}