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

Оформить доступ с промокодом
100
Как сделать выбор раздела в ZeroBlock в Tilda
Фрукты
Футболки
Шторы
Тесто
Dewalt
Все

Как сделать выбор раздела в ZeroBlock в Tilda

1
Создали ZeroBlock и добавили в него иконки с классами
section_1 , section_2 , section_3 ...
2
Добавили блок ST305N - отображение - "Все товары"
( не скрываем фильтры и список разделов)
3
Добавили код на страницу в блок Т123
В коде прописали соответствие номера класса иконки для своего раздела

"1":"FRUITS",
"2":"Футболки",
"3":"Шторы",
"4":"Тесто",
"5":"Dewalt",
"6":"Все"
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём кнопки выбора раздела для каталога в ZeroBlock
Фрагмент видео
Библиотека для примера

<script>
$(document).ready(function(){
let startPosition = 6;//Выбор стартового раздела, если нужно
let sortname = "storepartuid";//имя для раздела
let elemmode = false;
let partName=[];
let allProductsTitle = 'Все';


let sectionName = {
    
    "1":"Фрукты",
    "2":"Футболки",
    "3":"Шторы",
    "4":"Тесто",
    "5":"Dewalt",
    "6":"Все"
      
};

let sectionNum = $('div[class*="section_"]').length;
for (let i=1; i<=sectionNum;i++){  $('.section_'+i).attr('data-section-index',i)};

let ti = setInterval(function() {
    if (document.querySelector('.js-store-filter')){
        clearInterval(ti);

        let sumPartBtn = $('.js-store-parts-switcher').length; //кол-во разделов
        for(let i=1; i<sumPartBtn; i++){
            partName[i-1] = $('.js-store-parts-switcher:eq('+i+')').text();//создаём список названий разделов
        };
        if( $('div[data-filter-name="'+sortname+'"]').parent().hasClass('t-store__filter__item_select')){elemmode=true}//если выбор одного раздела
          if(elemmode){ //если одиночный выбор  
             let actpos=  $('input[name="'+sortname+'"]').parent().find('.js-store-filter-custom-select.active').attr('data-select-val');
             if (actpos){ 
                $.each(sectionName, function( key, value ) {
                    if ( value == actpos ) {
                        $('div[data-section-index="'+key+'"]').addClass('activechange');
                    };
                });
             };
         
          }else{//если выбор массовый
             $('input[name="'+sortname+'"]').parent().find('.t-checkbox').each(function( index ) {
               if ($(this).is(':checked')){
                    let checkName = $(this).attr('data-filter-value');
                    if (checkName){ 
                        $.each(sectionName, function( key, value ) {
                            if ( value == checkName ) {
                                $('div[data-section-index="'+key+'"]').addClass('activechange');
                            };
                        });
                    };
                   }; 
             });
           };
    
        if ( $('.activechange').length==0 ){
            
            if(sectionName[startPosition] == allProductsTitle){
                $('.js-store-parts-switcher')[0].click();
            }else{
                $('input[name="'+sortname+'"]').parent().find('.t-store__filter__custom-sel[data-select-val="'+sectionName[startPosition]+'"]').click();
                $('input[name="'+sortname+'"]').parent().find('.t-checkbox[data-filter-value="'+sectionName[startPosition]+'"]').click();
                
            };
            
            $('div[data-section-index="'+startPosition+'"]').addClass('activechange');
   
        };
        
        
        setTimeout(function(){
            $('div[data-record-type="951"]').addClass('show-block');
        }, 1000);
        
        
        
    };
}, 300);

//При выборе раздела
$('div[class*="section_"]').click(function(e) {e.preventDefault();
    let btnindex = +$(this).attr('data-section-index'); //Получаем номер кнопки раздела
    let curPartName = sectionName[btnindex]; //Получаем название раздела
        
        
        if(sectionName[btnindex] != allProductsTitle){
            
            
            $.each(sectionName, function( key, value ) {
                    if ( value == allProductsTitle ) {
                        $('.section_'+key).removeClass('activechange');
                    };
            });
            
            
              
        };
        

    
        if(elemmode){ //если одиночный выбор
            if(!$(this).hasClass("activechange")) {
                $('div[class*="section_"]').removeClass('activechange'); 
                $(this).addClass('activechange');
                if(sectionName[btnindex] == allProductsTitle){
                    $('.js-store-parts-switcher')[0].click();
                }else{
                    $('input[name="'+sortname+'"]').parent().find('.t-store__filter__custom-sel[data-select-val="'+curPartName+'"]').click();
                };
            };
        }else{ //если выбор массовый
    
     	  if(!$(this).hasClass("activechange")) {
     	      $(this).addClass('activechange')
     	      $('input[name="'+sortname+'"]').parent().find('.t-checkbox[data-filter-value="'+curPartName+'"]').click();
     	  }else{
     	      if($('.activechange').length>1){
                $(this).removeClass('activechange');
     	        $('input[name="'+sortname+'"]').parent().find('.t-checkbox[data-filter-value="'+curPartName+'"]').click();
     	      };
     	  }; 
     	  
     	    if(sectionName[btnindex] == allProductsTitle){
                    
                    $('div[class*="section_"]').removeClass('activechange'); 
                    $(this).addClass('activechange');
                    $('.js-store-parts-switcher')[0].click();
                    
            };
     	  
     	  
     	  
     	  
        };
    

    
    
});


});
</script>


<style>
div[data-record-type="951"] {
    position: fixed;
    top: 0;
    opacity: 0;
    pointer-events: none;
}    

div[data-record-type="951"].show-block {
    position: static;
    opacity: 1;
    pointer-events: auto;
}    


div[class*="section_"] .tn-atom {
    cursor:pointer;
    opacity: 0.2;
    box-shadow: 0px 0px 0px 0px white;
    transition: all 0.3s cubic-bezier(0.67, 0.1, 0.47, 1.13);
}

div[class*="section_"].activechange  .tn-atom,
div[class*="section_"]  .tn-atom:hover{   opacity: 1}

.t-store__filter__item {
    margin-right: 0px;
    margin-bottom: 0px;
}
.t-store__filter__item-title{
    margin-right: 20px;
    margin-bottom: 4px;
}


.t-store__parts-switch-wrapper,
.t-store__filter__item-title[data-filter-name="storepartuid"],
input.js-store-filter-opt[name="storepartuid"]~label{
    display:none !important;
}
.t-store__filter__chosen-val.js-store-filter-chosen-item[data-option-name="storepartuid"] {
    display: none;
}
.t-store__filter__reset{display:none}




@media screen and (max-width: 960px){
.t-store__filter__item, .t-store__filter__item.t-store__filter__item_sort-mobile {
    margin: 0;
    padding: 0;
    border-bottom: 0;
}
.t-store__filter__item-title {
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,.2);
}
}
@media screen and (min-width: 960px){
.t-store__filter__options .t-store__filter__item:nth-child(2) {  margin-bottom: 0}
}
</style>
Made on
Tilda