Блок геткурса: Настройка фильтрации плитки

Подключаем новый плагин к странице

Для этого заходим в настройки всей страницы и и добавляем данный код в поле «Теги в разделе HEAD».

Сохраняем страницу!

Добавляем новый блок с кнопками

Для этого, прямо над блоком с плитками, добавляем стандартный блок с кнопкой и добавляем столько кнопок, сколько будет тегов по которым вы будете фильтровать.

Придаем стили кнопкам.

После добавления некоторого кол-ва кнопок, они будут расположены вертикально. Вы конечно можете оставить как есть, но в нашем примере нам подходит горизонтальное расположение. Для этого необходимо стандартному блоку, указать свой класс, у нас это «fl».

После добавления класса, добавляем отдельный блок CSS, где добавляем код стилей и сохраняем блок.

.fl .builder {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    width: 100%;

    -ms-flex-wrap: wrap;

        flex-wrap: wrap;

    -webkit-box-pack: start;

        -ms-flex-pack: start;

            justify-content: center;

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;

}

.fl .builder div {

    margin: 0 5px;

    width: auto;

}

Теперь кнопки должны принять горизонтальное позиционирование как на изображении.

Оформление самих кнопок можно сделать стандартным функционалом геткурс. 

В конечном варианте наши кнопки выглядят вот так.

Присваиваем теги кнопкам

Далее необходимо каждой кнопке дать название, согласно названию вашему тегу, а также присвоить каждой кнопке класс..

Важно! Требования к классу кнопки:

1. Класс должен начинаться с буквы.
2. Между словами не должно быть пробелов. Если тег состоит из двух слов или более, их необходимо разделять с помощью тире или нижним подчеркиванием, либо любым другим символом.
3. Класс кнопки, должен полностью соответствовать названию тега для плитки (об этом чуть позже) .
4. Первая по порядку кнопка, не должна иметь никаких классов! Данная кнопка будет возвращать плитки в исходное, до применения фильтра положение плиток.

Присваиваем теги плиткам

Следующим шагом нам необходимо разделить плитки по тегам. 
Добавлять теги мы будем в поле подзаголовок. 

Чтобы добавить тег, нужно просто указать слово, далее выделить его и к нему применить стиль ярлык .

Если нужно добавить несколько тегов плитке, то нужно добавить несколько слов через пробел, а уже потом применять к ним стиль ярлык!

Либо использовать кнопку «HTML» в редакторе, и уже через редактор вставить ранее подготовленный код:

где содержимое <kbd>содержимое</kbd> и является названием тега, а   пробел между тегами.

Важно! Название тега, должно «точно» совпадать с названием класса в кнопке!

Важно! Так же если у вас появился новый тег, вам необходимо создать под него новую кнопку, где класс кнопки будет соответствовать названию тега.

Запускаем плагин фильтрации

В следующем шаге, нам необходимо добавить блок JS и в его содержимое поместить следующий код и сохранить блок:

$('.fl .builder div').eq(0).attr('data-filter','*');

$('.fl .builder div button').eq(0).addClass('is-checked');

$('.builder-item').each(function (index, value) { 

 var class00 = $(this).attr('class').replace('builder-item 

','').replace('part-button','').replace('text-center','').replace('

','').replace(' ','')

 if (class00!='') {

     $(this).attr('data-filter','.'+class00)

 };

});

$('.pl .lt-tsr-block .f-subheader').each(function (index, value) { 

var class01=' ';

 $(this).find('kbd').each(function (index, value) { 

 class01=class01+' '+$(this).text()+' ';

 });

 console.log(class01);

console.info('==');

$(this).parent().parent().addClass(class01);

});

var $grid = $('.pl .flex-row').isotope({

  itemSelector: '.lt-tsr-block',

  stagger: 30

});

$('.fl').on( 'click', '.builder-item', function() {

  var filterValue = $(this).attr('data-filter');

  $grid.isotope({ filter: filterValue });

});

// выделяем активный фильтр

$('.fl').each( function( i, buttonGroup ) {

  var $buttonGroup = $( buttonGroup );

  $buttonGroup.on( 'click', 'button', function() {

    $buttonGroup.find('.is-checked').removeClass('is-checked');

    $( this ).addClass('is-checked');

  });

});

Важно! Данный код будет работать, если вы использовали те классы, что мы указывали в предыдущих статьях!

После добавления блока с кодом и публикации страницы, плагин должен работать!

Теперь если вы нажмете на кнопку соответствующего тега, плитки от фильтруются таким образом, что те блоки в которых отсутствует необходимый тег, скроются и остануться только те, где данный тег указан.

Выделяем активный фильтр

Для того чтобы выделить выбранный фильтр-кнопку, в блок CSS необходимо добавить следующий код

.fl .builder div .btn.is-checked {

    background-color: #000!important; /*цвет фона кнопки*/

    color: #fff!important; /*цвет текста кнопки*/

}

Так же при нажатии на кнопку «Все», вы вернете плитки в исходное положение!

Теперь пользователи смогут удобно фильтровать плитки по тегам!