Как сделать конструктор продукта в ZeroBlock в Tilda
РОТАНГ
Конструктор кресла
Как сделать конструктор продукта в ZeroBlock в Tilda
1
Создали ZeroBlock
2
Добавили в него объекты и задали им ссылки:
3 shape - #product
3 button - #rotang
3 button - #pillow
3 shape - #product
3 button - #rotang
3 button - #pillow
3
Создали 27 блоков ST200
4
Добавили код на страницу в блок Другое - Т123
В коде заменили ID блоков ST200
//Создаём список блоков
Блоки расположены по схеме
1-ый 000
2-ой 001
....
18-ый 222
В коде заменили ID блоков ST200
//Создаём список блоков
Блоки расположены по схеме
1-ый 000
2-ой 001
....
18-ый 222
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём конструктор товара в Tilda в ZeroBlock.
Выводим блок по выбранным параметрам товара.
Длительность видео: 24 мин
Выводим блок по выбранным параметрам товара.
Длительность видео: 24 мин
Фрагмент видео
Библиотека для примера
<style>
/*Время и вид анимации для вкладок*/
.baseCl{
transition:all 0.4s ease-in-out;
}
/*Стиль веделенной вкладки*/
.baseClactive{
box-shadow: 0 0 0px 1px #000;
}
/*Стиль при наведении на вкладку*/
.baseCl:hover {
box-shadow: inset 0 0 10px 0px #dedede;
}
.t-slds__bgimg.t-bgimg.js-product-img {
border-radius: 40px;
}
</style>
<script>
$( document ).ready(function() {
//ПРисваиваем класс вкладкам
$('[href="#product"]').addClass('baseCl model');
$('[href="#rotang"]').addClass('baseCl rotang');
$('[href="#pillow"]').addClass('baseCl pillow');
//Делаем выделенные первые вкладки
$('.model').first().addClass('baseClactive');
$('.rotang').first().addClass('baseClactive');
$('.pillow').first().addClass('baseClactive');
var modelN=0, rotangN=0, pillowN=0;
//Создаём список блоков
var blkMass = {
'000':'#rec166120665',
'001':'#rec166120666',
'002':'#rec166120667',
'010':'#rec166120668',
'011':'#rec166120669',
'012':'#rec166120670',
'020':'#rec166120671',
'021':'#rec166120672',
'022':'#rec166120673',
'100':'#rec166120674',
'101':'#rec166120675',
'102':'#rec166120676',
'110':'#rec166120677',
'111':'#rec166120678',
'112':'#rec166120679',
'120':'#rec166120680',
'121':'#rec166120681',
'122':'#rec166120682',
'200':'#rec166120683',
'201':'#rec166120684',
'202':'#rec166120685',
'210':'#rec166120686',
'211':'#rec166120687',
'212':'#rec166120688',
'220':'#rec166120689',
'221':'#rec166120690',
'222':'#rec166120691'
};
//Добавляем классы ко всем блокам продуктов
$.each(blkMass, function( key, value ) {$(blkMass[key]).addClass('blkProduct');});
$('.blkProduct').not('.blkProduct:eq(0)').hide();
function findProduct(){
var actionBlk = String(modelN)+String(rotangN)+String(pillowN);$('.blkProduct').hide();
$(blkMass[actionBlk]).show(); window.dispatchEvent(new Event('resize')); };
//При клике на модель
$('.model').click(function(e) {e.preventDefault();
$('.model').removeClass('baseClactive');$(this).addClass('baseClactive');
modelN = $(".model").index(this);findProduct(); });
//При клике на ротанг
$('.rotang').click(function(e) {e.preventDefault();
$('.rotang').removeClass('baseClactive');$(this).addClass('baseClactive');
rotangN = $(".rotang").index(this);findProduct(); });
//При клике на подушку
$('.pillow').click(function(e) {e.preventDefault();
$('.pillow').removeClass('baseClactive');$(this).addClass('baseClactive');
pillowN = $(".pillow").index(this);findProduct(); });
})
</script>
