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

Оформить доступ с промокодом
100
Как сделать конструктор продукта в ZeroBlock в Tilda
РОТАНГ
Конструктор кресла
Кресло Rock 000
000
50000
р.
* бесплатная доставка по всей России!
Кресло Rock 001
001
51000
р.
* бесплатная доставка по всей России!
Кресло Rock 002
002
52000
р.
* бесплатная доставка по всей России!
Кресло Rock 010
010
53000
р.
* бесплатная доставка по всей России!
Кресло Rock 011
011
54000
р.
* бесплатная доставка по всей России!
Кресло Rock 012
012
55000
р.
* бесплатная доставка по всей России!
Кресло Rock 020
020
56000
р.
* бесплатная доставка по всей России!
Кресло Rock 021
021
57000
р.
* бесплатная доставка по всей России!
Кресло Rock 022
022
58000
р.
* бесплатная доставка по всей России!
Кресло Balance 100
100
59000
р.
* бесплатная доставка по всей России!
Кресло Balance 101
101
60000
р.
* бесплатная доставка по всей России!
Кресло Balance 102
102
61000
р.
* бесплатная доставка по всей России!
Кресло Balance 110
110
62000
р.
* бесплатная доставка по всей России!
Кресло Balance 111
111
63000
р.
* бесплатная доставка по всей России!
Кресло Balance 112
112
64000
р.
* бесплатная доставка по всей России!
Кресло Balance 120
120
65000
р.
* бесплатная доставка по всей России!
Кресло Balance 121
121
66000
р.
* бесплатная доставка по всей России!
Кресло Balance 122
122
67000
р.
* бесплатная доставка по всей России!
Кресло Libro 200
200
68000
р.
* бесплатная доставка по всей России!
Кресло Libro 201
201
69000
р.
* бесплатная доставка по всей России!
Кресло Libro 202
202
70000
р.
* бесплатная доставка по всей России!
Кресло Libro 210
210
71000
р.
* бесплатная доставка по всей России!
Кресло Libro 211
211
72000
р.
* бесплатная доставка по всей России!
Кресло Libro 212
212
73000
р.
* бесплатная доставка по всей России!
Кресло Libro 220
220
74000
р.
* бесплатная доставка по всей России!
Кресло Libro 221
221
75000
р.
* бесплатная доставка по всей России!
Кресло Libro 222
222
76000
р.
* бесплатная доставка по всей России!

Как сделать конструктор продукта в ZeroBlock в Tilda

1
Создали ZeroBlock
2
Добавили в него объекты и задали им ссылки:
3 shape - #product
3 button - #rotang
3 button - #pillow
3
Создали 27 блоков ST200
4
Добавили код на страницу в блок Другое - Т123
В коде заменили ID блоков ST200
//Создаём список блоков

Блоки расположены по схеме
1-ый 000
2-ой 001
....
18-ый 222
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём конструктор товара в Tilda в ZeroBlock.
Выводим блок по выбранным параметрам товара.
Длительность видео: 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>    



Made on
Tilda