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

Оформить доступ с промокодом
100
Как добавить выбор количества столовых приборов в корзине Tilda
Суши "Сенси"
SKU: Sensi457
370
р.
Фарерский лосось карамелизированный, сливочный сыр Cremette, пекинская капуста, ореховый соус, икра масаго, рис, водоросли нори.

Масса - 275 гр
Кол-во - 8 шт.

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

1
Создали корзину
2
Добавили скрытое поле с именем Прибор
Написали в его значение 1 шт
3
Добавили код на страницу в блок Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём элемент для выбора количества столовых приборов в корзине.
Длительность видео: 14 мин
Фрагмент видео
Библиотека для примера
<script>
document.addEventListener("DOMContentLoaded", function() {
    (function () {

            const maxSize=15; 
            const pribor =  document.querySelector('input[name="Прибор"]');   
            let cartwin =  document.querySelector('.t706__cartwin-bottom');   
            if(cartwin==null) cartwin =  document.querySelector('.t706__cartpage-totals'); 
            
            const div = document.createElement("div");
            div.className = "cutlery_wrapper";
            div.innerHTML = `<span>Столовые приборы</span>
                            <div class="cutlery_action">
                                <div class="cutlery_icon show_elem"></div>
                                <div class="cutlery_minus"></div>
                                <div class="cutlery_num">1</div>
                                <div class="cutlery_plus"></div>
                            </div>`;
                            
            cartwin.prepend(div);   
            
            let cutleryIcon = document.querySelector(".cutlery_icon");
            
            document.querySelector(".cutlery_minus").addEventListener('click', function(event) {
                
                const elem = this.nextElementSibling;
                let num = Number(elem.innerHTML);
                if(num>0){
                    elem.innerHTML = num-1;
                    pribor.value = (num-1)+' шт';
                };
                if(num==1) cutleryIcon.classList.remove('show_elem');
            });
            
            document.querySelector(".cutlery_plus").addEventListener('click', function(event) {
                
                const elem = this.previousElementSibling;
                let num = Number(elem.innerHTML);
                if(num==0) cutleryIcon.classList.add('show_elem');
                if(num<maxSize){
                    elem.innerHTML = num+1;
                    pribor.value = (num+1)+' шт';  
                };
            });

    })();    
});    
</script>


<style>
.cutlery_wrapper {
     --cutlery-icon-width: 30px;  /*Ширина иконки вилка/ложка*/
     --cutlery-plus-minus-width: 25px;  /*Ширина иконки плюс/минус*/
    font-family: 'Roboto',Arial,sans-serif;
    font-weight: 300;
    color: #000000;
}
@media screen and (max-width:680px){
.cutlery_wrapper {
    --cutlery-plus-minus-width: 40px;  /*Ширина иконки плюс/минус*/
}    
}
.cutlery_wrapper span {
    font-size: 14px;
    opacity: 0.7;
}
.cutlery_action {
    display: flex;
    margin-top: 6px;
    height: 40px;
    align-items: center;
}
.cutlery_num {
    font-size: 20px;
    padding: 0 10px;
}
.cutlery_icon {
    background-image: url(https://static.tildacdn.com/tild3761-6436-4237-b339-353163623330/637211.svg);
    opacity:0.1;
    width:  var(--cutlery-icon-width);
    margin-right: 25px;
}
.cutlery_minus,
.cutlery_plus{
    cursor:pointer;
    width: var(--cutlery-plus-minus-width);
    height: 100%;
}
.cutlery_icon , .cutlery_minus, .cutlery_plus {
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.cutlery_minus {
    background-image: url(https://static.tildacdn.com/tild3965-3930-4337-a631-323035373738/261937.svg);
}
.cutlery_plus {
    background-image: url(https://static.tildacdn.com/tild3732-3339-4737-b138-646234666535/261936.svg);
}
.show_elem{ opacity:1}
</style>
Made on
Tilda