Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом
100
Как сделать показ суммы при изменении количества товара Tilda

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

1
Создали блок ST305N для работы с каталогом товаров
2
Добавили код в блок Другое - Т123
Библиотека для примера
<script>
$( document ).ready(function() {

function catComplete(){
//При загрузке товара на отдельной странице
let tistore = setInterval(function() {
    setTimeout(function(){
        if ( $('.t-store__prod-snippet__container').length>0 ){
            clearInterval(tistore) 
            setTimeout(function(){
                insertcommonPriceSinglePopup();
           }, 200); 
        };
    }, 600);
    
}, 100);   

};

//При загрузке товарной сетки
$('.js-store-grid-cont').on('tStoreRendered', function() {
    insertcommonPriceGrid();
});

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

//Формируем блок c ценой
let commonPrice = `
            <div class="common-price-wrapper" style="display:none">
                <div class="common-price-title t-descr t-descr_xxs"></div>
                <div class="common-price-num t-name t-name_md"><span class="col-summ"></span></div>
            </div>
        `;

//Добавляем в карточку сумму
let firstStep = true
function insertcommonPriceSinglePopup(){
    let price = 0;
    setTimeout(function(){
        //Если это отдельная страница
        if (  $('.t-store__prod-snippet__container').length>0 ){
            if(firstStep){
                $('.common-price-wrapper').remove();
                $('.t-store__prod-popup__price-wrapper').after(commonPrice);    
    
                price = $('.t-store__prod-snippet__container .js-product-price').text();
                $('.t-store__product-snippet .col-summ').text(price);
                firstStep = true;
            };
            
        //Если это popup    
        }else{
            $('.t-popup .common-price-wrapper').remove();
            $('.t-store__prod-popup__price-wrapper').after(commonPrice);  
            
            price = $('.js-store .t-popup_show .js-product-price').text();
            $('.js-store .t-popup_show .col-summ').text(price);
        };
        
    }, 350);
};

function insertcommonPriceGrid(){
    let price = 0;
    setTimeout(function(){
        if( $('.js-store-grid-cont').length>0 ){
            
            $('.t-store__card').each(function(){
                let card = $(this);
                card.find('.common-price-wrapper').remove();
                card.find('.t-store__card__price-wrapper').after(commonPrice);
                price = card.find('.js-product-price').text();
                card.find('.col-summ').text(price);
                
            });

        };
        
    }, 350);
};


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


//При изменении кол-ва и параметров в карточке
$(document).on('click input change' , ' .js-product-controls-wrapper, .t-store__prod__quantity-input, .t-store__prod__quantity__minus-wrapper, .t-store__prod__quantity__plus-wrapper ' , function(){
    let elem = $(this);
    let block = elem.closest('.js-product');
    let price = 0;
    
    setTimeout(function(){
        let num = block.find('.t-store__prod__quantity-input').val();
        if(num!=undefined){
            price = block.find('.js-product-price').text();

            let cur = block.find('.t-store__prod-popup__price-currency:first').text();
            let cur2 = block.find('.t-store__card__price-currency:first').text();
            
            let summ = +price.replace(/\s/g, '');
            summ = +((summ*num).toFixed(2));
            summ = divideNumberByPieces((+summ));
            block.find('.col-summ').text(price+' x '+num+' = '+summ+' '+cur+cur2);

            if(num>1){
                block.find('.common-price-wrapper').slideDown(300);
            }else{
                block.find('.common-price-wrapper').slideUp(300);
            };
        };
        
    }, 200);
     
});

});
</script>


<style>
.common-price-num {
    font-size: 14px;
    margin-top: 5px;
    font-weight: 400;
    margin-bottom: 5px;
}

.js-store-prod-price.t-store__prod-popup__price {
    font-size: 26px;
}
</style>
Made on
Tilda