Как сделать карточку товара в Zero и связать её с каталогом товаров?

<!--VORON--><!--VR08--><!--settings{"recid": "", "galzerorec": "", "colors": "", "colors2": "", "underline": "", "undercolor": "", "stockop": "", "galon": "false", "zoom": "false", "galextd": "false", "tabs": "false", "fav": "false"}settingsend--> <script>
   $(document).ready(function() {
   function waitForElementAndObj(elementId, callBack) {
   window.setTimeout(function () {
     let element = document.querySelector(elementId);
     if (element !== null && element.length !== 0 && window.tStoreSingleProdsObj !== undefined) {
       callBack(elementId, element);
     } else {
       waitForElementAndObj(elementId, callBack);
     }
   }, 50);
 };
 
   waitForElementAndObj('#rec [data-slider-initialized="true"] .t-slds__item-loaded[style*="width"]', function() {        
   let product = Object.values(window.tStoreSingleProdsObj)[0];
   let images = JSON.parse(product.gallery);
   let width = $('.v-gal').width() + 'px';
   let currency = ' ' + $('.t762__price-currency').html();
   let buytx = $('.v-order .tn-atom').eq(0).text();
   $('.name .tn-atom').html(product.title);
   $('.descr .tn-atom').html(product.descr);
   $('.text .tn-atom').html(product.text);
   $('.sku .tn-atom').html($('.t762 .js-product-sku').text());
   $('.stock .tn-atom').text(product.editions.filter(item => item.uid === parseFloat($('#rec .t762__container').attr('data-product-uid')))[0].quantity + ' в наличии');
   product.characteristics.forEach(function(ch, index) {
     $('.charname-' + (index + 1) + ' .tn-atom').text(ch.title);
     $('.chartxt-' + (index + 1) + ' .tn-atom').text(ch.value);
   });
   let ed;
   if (product.editions.length > 0) {
     ed = product.editions.find(edition => edition.sku === $('.t762 .js-product-sku').text());
   } else {
     ed = product;
   }
   $('.weight .tn-atom').text(ed.pack_m);
   $('.height .tn-atom').text(ed.pack_z);
   $('.width .tn-atom').text(ed.pack_y);
   $('.length .tn-atom').text(ed.pack_x);
   $('.price .tn-atom').html($('#rec .js-product-price').html() + ' ' + currency);
   if ($('.t762__price-value.js-store-prod-price-old-val').text()) $('.price-old .tn-atom').html('<del>' + $('.t762__price-value.js-store-prod-price-old-val').html() + currency + '</del>');
   else $('.price-old .tn-atom').empty();
   for (var i = 0; i < images.length; i++) {
    let selimg = $('.v-img' + (i + 1) + ' .tn-atom');
    selimg.attr('style', 'background-image: url("' + images[i].img) + '")';
    if (selimg.attr("data-img-zoom-url")) selimg.attr("data-img-zoom-url", images[i].img)
   };
   $('.v-order').on('click', () => {
       let noti = document.querySelector('.t762 .t1122__popup-btn');
       if (noti) noti.click();
        else document.querySelector('.js-store-prod-buy-btn-txt').click();
   });
   if ($('.cust').length > 0) {
    $('.cust select').on('change', function(e) {
    let sel = $('.t762 select option[value="' + e.target.value + '"]').closest('select');
    sel.val(e.target.value);
    sel[0].dispatchEvent(new Event('change'));
    $('.price .tn-atom').html($('.t762__price-value').html() + currency);
    
        });
    $('.stock .tn-atom').text(product.editions.filter(item => item.uid === parseFloat($('#rec .t762__container').attr('data-product-uid')))[0].quantity + ' в наличии');
    $('.cust .tn-form__submit').remove();
  };
   
   
   
   
   for (var i = 0; i < $('.t-product__option-item').length; i++) {
   $(' .ver' + (i + 1)).on('click', function() {
     let number = parseFloat(this.closest('.tn-elem').className.split(' ver')[1].split(' ')[0]) - 1;
     $('[name="v-activeVariant"]').removeAttr('name');
       if($('#rec .t-product__option-item')[number].className.indexOf('disabled') === -1) {
         $('#rec .t-product__option-item')[number].click();
         $(this).attr('name', 'v-activeVariant');
       }
     $('.price .tn-atom').html($('.t762__price-value').html() + currency);
     if ($('.js-out-of-stock-inserted-block').length > 0) $('.v-order .tn-atom').text("Сообщить о поступлении");
     else $('.v-order .tn-atom').text(buytx);
     $('.stock .tn-atom').text(product.editions.filter(item => item.uid === parseFloat($('#rec .t762__container').attr('data-product-uid')))[0].quantity + ' в наличии');
     if ($('.t762__price-value.js-store-prod-price-old-val').text()) $('.price-old .tn-atom').html('<del>' + $('.t762__price-value.js-store-prod-price-old-val').html() + currency + '</del>');
     else $('.price-old .tn-atom').empty();
     $('.sku .tn-atom').html($('.t762 .js-product-sku').text());
     $('.weight .tn-atom').html(product.editions.find(edition => edition.sku === $('.t762 .js-product-sku').text()).pack_m);
     
   });
     if($('.t-product__option-item')[i].className.indexOf('disabled') !== -1) $(' .ver' + (i + 1)).addClass('vdisable');
     if($('.t-product__option-item')[i].className.indexOf('option-item_active') !== -1) $(' .ver' + (i + 1)).attr('name', 'v-activeVariant');
   };
   
   let opts = $(".t-product__option-item");
   let mObserver = new MutationObserver(function (mutations) {
     mutations.forEach(function (mutation) {
       if (mutation.type === "attributes" && mutation.attributeName === "data-product-uid") {
         for (var i = 0; i < opts.length; i++) {
           if (opts.eq(i).hasClass("t-product__option-item_active")) $(" .ver" + (i + 1)).attr("name", "v-activeVariant");
           if (opts.eq(i).hasClass("t-product__option-item_disabled")) {
             $(" .ver" + (i + 1)).addClass("vdisable");
           } else {
             $(" .ver" + (i + 1)).removeClass("vdisable");
           }
         }
       }
     });
   });
   mObserver.observe(document.querySelector(".t762__container"), {
     attributes: true,
     attributeFilter: ["data-product-uid"]
   });


   let titles = $('.js-product-edition-option-name');
       for (var i = 0; i < titles.length; i++) {
       $('.vtitle' + (i + 1) + ' .tn-atom').html(titles.eq(i).html());
       }
       
   $("#rec").hide();
   if ($('#rec .js-store-prod-sold-out, #rec .t-store__prod-popup__btn_disabled[href="#order"]').length > 0) { 
    if ($('.t762 .t1122').length > 0) {$('.v-order .tn-atom').text('Сообщить о поступлении')}
    else {$('.v-order .tn-atom').text('Нет в наличии'); $('.v-order').css('opacity', '0.5')}
    }
       })
   })
 </script> <style>
 
 .v-gal .t-slds__thumbsbullet-wrapper  {display: none !important;}
 [name="v-activeVariant"] .tn-atom {
  
  
  
  
   }
 [name="v-activeVariant"] {
   pointer-events: none;
 }
 [class*=" ver"], .v-order, .fav {
   cursor: pointer;
 }
 .vdisable {
   
   pointer-events: none;
 }
 .t-slds__item_dummy {
  display: none !important;
 }
 </style>