Как создать простую карточку товара в ZeroBlock для каталога Tilda

Создали ZeroBlock и добавили в него элементы:

Text с надписью "Есть в наличии" и с классом zproduct-instock
Shape зелёного цвета и с классом zproduct-instock
Text с надписью "Количество:" и с классом zproduct-quant
Text с надписью "Артикул:" и с классом zproduct-sku
Text с надписью "Hiland Road Bike" и с классом zproduct-title
Text с надписью "0 ₽" и с классом zproduct-price
Shape для картинки классом zproduct-image
Button со ссылкой #zeroproduct-135742993261

Где 135742993261 это productID, который находится внизу карточки товара каталоге

Добавили блок ST305N с нужным нам разделом
Задали первой кнопке в блоке - Добавить товар в корзину

Добавили код в блок Другое - Т123

Mo-ti Level Up

Видео инструкции по добавлению кода и работе с Zero Block.

Получить полное видео

Посмотреть все видео

Создаём простую карточку товара в ZeroBlock.
Соединяем её с каталогом

Фрагмент видео

Посмотреть видео в личном кабинете ►

Библиотека для примера


<style>
.dis-order-btn{
    pointer-events:none;
    opacity:0.3;
}
.zproduct-image .tn-atom {background-size: cover}
.outofstock{background-color: #ff0000 !important}
div[data-record-type="776"]{display:none}
</style>

<script>
document.addEventListener("DOMContentLoaded", function(){
let storeLoad = setInterval(function() {
    if (document.querySelector('.js-product.t-store__card_hidden')){
    }else{ 
        clearInterval(storeLoad);
        setTimeout(function(){
            let zeroBtn = document.querySelectorAll('a[href^="#zeroproduct-"]');
            for (let i = 0; i < zeroBtn.length; i++) {
                let zeroCard = zeroBtn[i].closest('.t-rec');
                let prodId = zeroBtn[i].getAttribute('href').replace(/[^0-9]/g,"");
                let product = ''; let ch = 0;
                let cardLoad = setInterval(function() {
                    product = document.querySelectorAll('div.js-product[data-product-lid="'+prodId+'"]');

                    if (product.length && ch<50){
                        product = product[0];
                        clearInterval(cardLoad); 
        
                        zeroBtn[i].addEventListener('click', function() {
                            product.querySelector('a').click();
                        });
                        
                        let specifications = {};
                        specifications['quant'] = product.getAttribute('data-product-inv');
                        specifications['title'] = product.querySelector('.js-store-prod-name').innerText;
                        specifications['sku'] = product.querySelector('.js-store-prod-sku').innerText;
                        specifications['price'] = product.querySelector('.js-product-price').innerText;
                        specifications['image'] = product.getAttribute('data-product-img');
                        
                        zeroCard.querySelector('.zproduct-title .tn-atom').innerText = specifications['title'];
                        zeroCard.querySelector('.zproduct-sku .tn-atom').innerText = 'ART: '+specifications['sku'];
                        zeroCard.querySelector('.zproduct-price .tn-atom').innerText = specifications['price']+' ₽';
                        zeroCard.querySelector('.zproduct-quant .tn-atom').innerText = 'Количество: '+specifications['quant']+' шт';
                        zeroCard.querySelector('.zproduct-image .tn-atom').style.backgroundImage = 'url('+specifications["image"]+')';
                        
                        if(specifications['quant']=='0'){
                            zeroCard.querySelector('a[href^="#zeroproduct-"]').classList.add('dis-order-btn');
                            zeroCard.querySelector('.zproduct-instock[data-elem-type="text"] .tn-atom').innerText = 'Нет в наличии';
                            zeroCard.querySelector('.zproduct-instock[data-elem-type="shape"] .tn-atom').classList.add('outofstock');
                        };
                        if(specifications['quant']==''){
                            zeroCard.querySelector('.zproduct-quant .tn-atom').innerText = 'Количество: ∞';
                        };
    
                    }else{ 
                    ch++;
                        if(ch>50){
                            clearInterval(cardLoad); 
                            console.log('Product not found. Check prod ID');
                        };
                    };
                }, 100);                      
            };
        }, 1000); 
    }
}, 100);   
    
});    
</script>