Как оформить заявку на мероприятие и вывести остаток мест в ZeroBlock Tilda
Как оформить заявку на мероприятие через корзину ST100 и вывести остаток свободных мест в ZeroBlock Tilda
1
Создали нужный товар в каталоге (так как нет продажи, то цену не указывали) и скопировали его productID
2
Создали ZeroBlock и добавили в него текстовый элемент и кнопку
Присвоили им ссылки:
Присвоили им ссылки:
- для текста #cat-quantity-323084264931
- для кнопки #cat-order-323084264931
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>
