Как оформить заявку на мероприятие и вывести остаток мест в ZeroBlock Tilda
23-25 October 2022 | Grand Park - LA
Freelance Web
Designer Meetup
tickets left
Purchase Ticket

Как оформить заявку на мероприятие через корзину ST100 и вывести остаток свободных мест в ZeroBlock Tilda

1
Создали нужный товар в каталоге (так как нет продажи, то цену не указывали) и скопировали его productID
2
Создали ZeroBlock и добавили в него текстовый элемент и кнопку
Присвоили им ссылки:
  • для текста #cat-quantity-323084264931
  • для кнопки #cat-order-323084264931
где 323084264931 - это productID товара
3
Добавили блок ST200 и прописали ему в контент productID товара
4
Добавили корзину ST100 и задали ей настройки
  • Открывать корзину после выбора товара
  • Не показывать кнопку открытия виджета
  • Запретить изменение количества товара
5
Добавили код в блок Другое - Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём билет как продукт в каталоге и реализуем вывод остатка и продажу через ZeroBlock
Фрагмент видео
Библиотека для примера
<script>
document.addEventListener("DOMContentLoaded", function(){
let st200Load = setInterval(function() {
    if (document.querySelector('.js-product.t-store__card_hidden')){
    }else{ 
        clearInterval(st200Load);
        setTimeout(function(){
            //Вывод количества
            let comCount = document.querySelectorAll('[href*="cat-quantity-"]');
            for (let i = 0; i < comCount.length; i++) {
                let btnHref = comCount[i].getAttribute('href').replace(/[^0-9]/g,"");
                let st200 = document.querySelectorAll('div.js-product-single[data-product-lid="'+btnHref+'"]');
                if(st200.length > 0){
                    let countNum = st200[0].getAttribute('data-product-inv');
                    comCount[i].innerHTML = countNum;
                };
            };
            //Обработка нажатия нп кнопку
            let btnOrder = document.querySelectorAll('[href*="cat-order-"]');
            for (let i = 0; i < btnOrder.length; i++) {
                btnOrder[i].addEventListener('click', function(e) {
                    e.preventDefault();
                    let btnHref = this.getAttribute('href').replace(/[^0-9]/g,"");
                    let st200 = document.querySelectorAll('div.js-product-single[data-product-lid="'+btnHref+'"]');
                    if(st200.length > 0){
                        let st200Btn = st200[0].querySelector('.t-btn'); st200Btn.click();
                    };
                });
            };
        }, 1000); 
    };
}, 100);   
});
</script>


<style>
a[href^="#cat-quantity-"] { pointer-events: none}
div[data-record-type="744"] { display: none}
.t706__cartwin_showed {
    display: flex;
    align-items: center;
}
.t706__cartwin-top { border: none}
.t706__cartwin-top div {text-align: center;font-size: 30px;}
.t706__cartwin-products,
.t706__cartwin-bottom,
.t-input-group.t-input-group_pm {
    display: none;
}
</style>
Designer Meetup
SKU: 700.954.29
100
р.
р.
When we first checked out our new headphones, we noticed the box said “improved bass”. We had to wonder if this was marketing jargon or the real thing? But it only took a moment to realize that bass was not kidding.
Book your tickets
Total: 
Payment method
Made on
Tilda