Настройка фильтра поиска по дополнительным полям от Gameer
Статья неактуальна. У разработчика появилась подробнейшая документация https://lazydev.pro/product/7-dle-filter.html
Всем привет. Постараюсь здесь написать понятную инструкцию по настройке модуля фильтра от Gameer.
Первое, что нужно знать: вы всегда можете посмотреть в адресной строке браузера, какой запрос делает фильтр. Так можно определить ошибки и т. д.
Разметка фильтра
Также важно: не надо сразу методом копипаста пихать все в поиск, а потом менять. Лучше аккуратно добавляйте по одной настройке — так не запутаетесь и больше поймете, что к чему.
Значения задаются через различные input, select. Каждое значение имеет 2 обязательных параметра: name и value.
Name – это место поиска или настройка.
Value – это само значение поиска или значение настройки.
Далее я буду приводить примеры на
Например, мы хотим искать по доп полю genre значение боевик, тогда
или селект
добавлю еще комедию
или
то есть вы поняли, 2 обязательных параметра у каждого значения.
Теперь пример небольшой формы с списком жанров из доп поля, выбором основной категории и диапазон года из доп поля от и до, сортировку по дате и убыванию
итак, мы задаем каждую настройку посредством разных input, select — кому как больше нравится, как надо или как удобнее. И задаем им value, name – вот и все.
Таблица параметров и значений
еще один пример с шаблоном filmax
Всем привет. Постараюсь здесь написать понятную инструкцию по настройке модуля фильтра от Gameer.
Первое, что нужно знать: вы всегда можете посмотреть в адресной строке браузера, какой запрос делает фильтр. Так можно определить ошибки и т. д.
Разметка фильтра
<form id="searchform" action="" data-filtertriger=fieldseacrh>
все что здесь внутри — это значения поиска, управляющие кнопки
</form>
Также важно: не надо сразу методом копипаста пихать все в поиск, а потом менять. Лучше аккуратно добавляйте по одной настройке — так не запутаетесь и больше поймете, что к чему.
А теперь подробно по настройке значений поиска.
Значения задаются через различные input, select. Каждое значение имеет 2 обязательных параметра: name и value.
Name – это место поиска или настройка.
Value – это само значение поиска или значение настройки.
Далее я буду приводить примеры на
<input type="checkbox">
- это отмечаемая галочка, и <select></select>
- это селект или выпадающий список с многими значениямиНапример, мы хотим искать по доп полю genre значение боевик, тогда
<input name="genre" value="боевик" type="checkbox"> боевик
или селект
<select name="genre">
<option value="боевик">Боевик</option>
</select>
добавлю еще комедию
<input name="genre" value="боевик" type="checkbox"> боевик
<input name="genre" value="комедия" type="checkbox"> комедия
или
<select name="genre">
<option value="боевик">Боевик</option>
<option value="комедия">комедия</option>
</select>
то есть вы поняли, 2 обязательных параметра у каждого значения.
Теперь пример небольшой формы с списком жанров из доп поля, выбором основной категории и диапазон года из доп поля от и до, сортировку по дате и убыванию
<form id="searchform" action="">
<select name="genre">
<option value="боевик">Боевик</option>
<option value="комедия">комедия</option>
<option value="ужасы">ужасы</option>
<option value="мелодрама">мелодрама</option>
</select>
<!-- это выпадающий список. Ищем в доп поле genre -->
<input name="cat" value="1" type="checkbox"> фильмы
<input name="cat" value="2" type="checkbox"> мультфильмы
<!-- это галочки. Ищем в категории по ее id -->
<input type="text" name="from-year" placeholder="год от">
<input type="text" name="to-year" placeholder="год до">
<!-- это текстовые поля для ввода. Ищем год из поля year от и до, а значения будет вводить юзер -->
<input name="order_by" value="date" type="hidden">
<!-- это сортировка по дате. Скрытое значение -->
<input type="hidden" name="order" id="order" value="desc"/>
<!-- это сортировка по убыванию. Скрытое значение →
<input type="button" data-fieldsearch="submit" value="Поиск">
<input type="button" data-fieldsearch="reset" value="Очистить">
<!-- это кнопки -->
</form>
итак, мы задаем каждую настройку посредством разных input, select — кому как больше нравится, как надо или как удобнее. И задаем им value, name – вот и все.
<input type="checkbox"> - галочка, выбирает одно значение.
<input type="text"> - текстовое поле для ввода
<input type="hidden"> - скрытая или невидимая настройка
<select></select> - выпадающий список, выбор одного значения из списка
<select multiple="multiple"></select> - выпадающий список, но можно выбрать сразу несколько значений из списка
Таблица параметров и значений
Название | name | value | пример value |
категория | cat | id категории | 3 |
доп поле | название доп поля на латинице | значение из поля | боевик |
диапазон от | from-название доп поля на латинице | значение из поля | 1950 |
диапазон до | to-название доп поля на латинице | значение из поля | 2016 |
порядок по | order_by | date - по дате новости title - по названию новости comm_num - по количеству комментариев новости news_read - по количеству просмотров новости autor - по автору новости rating - по рейтингу новости | date |
порядок сортировки | order | desc - убыванию asc - по возрастанию | desc |
поиск по названию новости | l.title | обычно сам юзер набирает, value отсутствует | |
поиск по тегам новостей | l.tags | тег | зомби |
еще один пример с шаблоном filmax
<div class="filter-box">
<div class="fb-sect-name">Что вы ищете?</div>
<div class="fb-sect flex-row flex-2 fb-checks">
<div class="fb-check">
<input id="film" name="cat" value="1" type="checkbox">
<label for="film">Фильмы </label>
</div>
<div class="fb-check">
<input id="ser" name="cat" value="2" type="checkbox">
<label for="ser">Сериалы </label>
</div>
</div>
<!-- Ищем в категории по ее id 1 или 2. -->
<div class="fb-sect-name">Выберите жанр</div>
<div class="fb-sect fb-sel">
<select name="genre" multiple data-placeholder="Выберите жанр">
<option value="боевик">Боевик</option>
<option value="комедия">Комедия</option>
<option value="ужасы">Ужасы</option>
<option value="триллер">Триллер</option>
<option value="мелодрама">Мелодрама</option>
</select>
</div>
<!-- Ищем в доп поле genre указанные значения. это список с возможностью выбрать одновременно несколько значений -->
<div class="fb-sect-name">Выбрать что-то</div>
<div class="fb-sect fb-sel">
<select name="voice" data-placeholder="Выбрать озвучку">
<option></option>
<option value="den904">Пункт 1</option>
<option value="колобок">Пункт 2</option>
<option value="хихидок">Пункт 3</option>
</select>
</div>
<!-- Ищем в доп поле voice указанные значения. это список с возможностью выбрать только одно значение -->
<div class="fb-sect-name">Выбрать диапазон</div>
<div class="fb-sect flex-row flex-2">
<select name="from-year" data-placeholder="от">
<option></option>
<option value="1985">Пункт 1</option>
<option value="1990">Пункт 2</option>
<option value="1995">Пункт 3</option>
</select>
<select name="to-year" data-placeholder="до">
<option></option>
<option value="2005">Пункт 1</option>
<option value="2010">Пункт 2</option>
<option value="2020">Пункт 3</option>
</select>
</div>
<!-- Выбор диапазона от и до в доп поле year через список селект -->
<div class="fb-sect-name">Выбрать диапазон слайдером</div>
<div class="fb-sect">
<input type="text" name="r-year" id="year" />
</div>
<!-- А это выбор диапазона доп поля year с помощью плагина слайдера, встроенного в filmax. Сам размах диапазона мы указываем в js/filter-xf.js -->
<div class="fb-sect">
<input name="l.title" type="text" placeholder="Введите название новости" />
</div>
<!-- Поле для ввода. Ищет в названии новости -->
<div class="fb-submit flex-row flex-2">
<input type="button" data-fieldsearch="submit" value="Поиск">
<input type="button" data-fieldsearch="reset" value="Очистить">
</div>
</div>