Как добавить в карточку товара ввод параметров ширины и длины в Tilda

Как добавить в карточку товара ввод параметров ширины и длины в Tilda

1
Создали товары в каталоге и вывели их в блоке ST305N
2
Создали блок ST500 со ссылкой #popup:my-size-product
Заполнили его как на скринах ниже
3
Вставили код в блок Другое - Т123 на страницу и в продуктовый footer
Библиотека примера

<script>
$( document ).ready(function() {

function catComplete(){
//При загрузке товаров
let tistore = setInterval(function() {
    setTimeout(function(){
        if ( $('.js-store-grid-cont div').length>0 || $('.t-store__prod-snippet__container').length>0 ){
            clearInterval(tistore) 
            setTimeout(function(){
                insertInput();
           }, 200); 
        };
    }, 600);
    
}, 100);   
};
catComplete();

//Формируем блок с полями размера
let size = `
            <div class="size-wrapper t-text">
                <div class="size-title-wrapper">
                    <div>Ширина (м)</div>
                    <div class="cross"></div>
                    <div>Длина (м)</div>
                </div>
                
                <div class="size-input-wrapper">
                    <div><input type="text" name="size-width" class="t-input t-input-inline-styles" value="1"></div>
                    <div class="cross">x</div>
                    <div><input type="text" name="size-height" class="t-input t-input-inline-styles"  value="1"></div>
                </div>
                
                <div class="size-price-wrapper">
                    <span class="size-price-text">Cтоимость: </span>
                    <span class="size-price"></span>
                    <span class="size-price-currense"> р.</span>
                </div>
                
            </div>
        `;

//Добавляем поля в карточку
function insertInput(){
    
    $('.t-store .js-product').each(function(){
        $(this).find('.size-wrapper').remove();
        $(this).find('.js-store-buttons-wrapper').before(size);
        $(this).find('a[href="#order"]').attr('href', '#price-to-cart');
        
        let price = +$(this).find(".js-product-price").text();//Цена
        $(this).find(".size-price").text(price.toFixed(2));
        
        
    });
};


$(document).on('click','.js-store-filter , .js-store-filter-chosen-item , .js-store-load-more-btn , .js-store-parts-switcher',function(e){  catComplete(); });
$(document).on('keydown','.js-store-filter',function(event){if(event.keyCode == 13) { catComplete()}}); 
$(document).on('change','.t-store__sort-select',function(e){  catComplete() });


//При открытии карточки товара
$(document).on('click','a[href*="/tproduct/"]',function(e){ catComplete() });



$('body').on('input', '.size-wrapper input', function(){
this.value = this.value.replace(/[^0-9.]/g, '');
});


function divideNumberByPieces(x, delimiter) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, delimiter || " ");
};


$(document).on('input',' .size-wrapper input ',function(e){
    
    
    
    let elem = $(this).closest(".js-product");
    
    let price = +elem.find(".js-product-price").text();//Цена
    
    let sWidth = +elem.find(' input[name="size-width"]').val();
    let sHeight = +elem.find(' input[name="size-height"]').val();
    
    price = (sWidth*sHeight*price).toFixed(2);
    

    elem.find(".size-price").text(  divideNumberByPieces(price) );
    
    
});



//Вызов формы   по клику в карточке товара
$(document).on('click','a[href="#price-to-cart"]',function(e){
    
    e.preventDefault();
    
    $(this).closest(".js-product").addClass("selectproduct");//размечаем класс активного продукта
    
    //Получаем данные из карточки продукта
    let prodName = $(".selectproduct .js-product-name").text();//Название продукта
    let urlprodimg = $('.selectproduct .js-product-img:first').attr('data-original');//Картинка
    let sku = $(".selectproduct .js-product-sku").text();//Артикул
    let price = $(".selectproduct .js-product-price").text();//Цена
    
    
    
    let sWidth = +$('.selectproduct input[name="size-width"]').val();
    let sHeight = +$('.selectproduct input[name="size-height"]').val();
    
    price = (sWidth*sHeight*price).toFixed(2);
    
    $(".selectproduct .size-price").text( divideNumberByPieces(price) );
    
    //Заполняем блок ST200
    $('.uc-prod-middle  .js-product-name').text( prodName );//Заполняем название товара
    $('.uc-prod-middle  .js-product-sku').text( 'Артикул: '+sku );//Заполняем артикул
    $('.uc-prod-middle  .js-product-price').text( price ); //Заполняем цену
    $('.uc-prod-middle  .t-slds__bgimg').css('background-image', 'url('+urlprodimg+')').attr('data-original', urlprodimg); //Заполняем картинку
    
    //Формируем опции
    $('.uc-prod-middle  select:eq(0) option:selected').val( sWidth );//ширина
    $('.uc-prod-middle  select:eq(1) option:selected').val( sHeight );//длина


    //Удаляем класс активного продукта
    $(".js-product").removeClass("selectproduct");
    
    
    setTimeout(function() {  $(".uc-prod-middle .t-btn")[0].click(); }, 150);
    
    
});   
   
   
   
   

   
});
</script>


<style>

.size-title-wrapper {
    display: flex;
    margin-bottom: 6px;
    font-size: 14px;
}



.size-input-wrapper input {
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    height: 35px;
    font-size: 14px;
    text-align: center;
}

.size-input-wrapper {
    display: flex;
}

.size-input-wrapper>div,
.size-title-wrapper>div{
    width: 110px;
}

.size-input-wrapper .cross,
.size-title-wrapper .cross{
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: 600;
    opacity: 0.7;
}

.size-wrapper.t-text {
    margin-top: 15px;
    margin-bottom: 10px;
}

.t-store__card__price-currency:after{
    content: "/м";
    /*font-size: 8px;*/
    /*transform: translateY(-6px);*/
    display: inline-block;
}

.t-store__prod-popup__price-currency:after{
    content: "/м";
    /*font-size: 10px;*/
    /*transform: translateY(-7px);*/
    display: inline-block;
}


.t-store__card__price.t-store__card__price-item:after,
.js-store-prod-price.t-name:after {
    content: "2";
    font-size: 8px;
    transform: translateY(-6px);
    display: inline-block;
}


.size-price-wrapper {
    margin-top: 15px;
    font-weight: 600;
    font-size: 18px;
}


</style>
Made on
Tilda