Фильтры по товарам

Главная   →   Справка   →   Поиск и фильтры по товарам

В режиме администрирования интернет-магазина существует возможность создания и настройки, включая видимость, различных типов фильтров объектов на сайте – по текстовым, цифровым полям и полям спецификаций. При активации настроенных фильтров у пользователя на экране будут оставаться только те объекты, которые соответствуют строго определенным условиям. Например, фильтр товаров на сайте может выглядеть следующим образом:

Чтобы настроить фильтры объектов, нажмите на кнопку «Параметры» в Главном меню режима администрирования, после чего в выпадающем меню выберите команду «Типы объектов» → «[наименование типа объекта]», например, «Товар»:

Откроется диалоговое окно с настройками выбранного объекта. Для объекта типа «Товар» это одноименное диалоговое окно вида:

Для фильтра в списке полей объекта могут быть использованы любые поля с типами «Строка», «Выпадающий список», «Числовые данные», «Дата» и «Спецификации товара».

Подробнее об управлении типами объектов см. на странице «Как редактировать типы».

Просмотрите список существующих полей объекта, выберите из них и выпишите (или запомните) названия тех полей, которые Вы намерены использовать в фильтрах, после чего нажмите на кнопку «Закрыть».

Далее для настройки глобальных фильтров нажмите на кнопку «Виджеты» в Главном меню режима администрирования:

Откроется диалоговое окно «Виджеты» вида:

В нижней части диалогового окна «Виджеты» в настройках виджета «Директория» найдите список фильтров (подробнее о настройках виджета см. на странице «Директория»). В столбце «Фильтр по значению» располагаются наименования полей свойств различных объектов. Найдите среди полей те, которые Вы решили включить в фильтр (это те самые названия полей, которые Вы выбрали и запомнили выше).

Чтобы включить выбранное поле в фильтр дважды щелкните по ячейке в столбце «Статус» в строке, соответствующей полю, после чего в выпадающем списке выберите значение «Фильтр включен», например, для свойства объекта «Материал»:

Для выбранного поля будет отображен статус «Показывать».

Для отключения поля из фильтра также дважды щелкните по ячейке в столбце «Статус» в строке, соответствующей полю, после чего в выпадающем списке выберите значение «Фильтр отключен». Для выбранного поля будет отображен статус «Скрывать».

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

В Системе предусмотрены следующие типы фильтров:

Тип фильтра «Галочки»

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

Например, фильтр типа «Галочки», примененный в списке ноутбуков:

 

 

Тип фильтра «Галочки (CSS)»

При выборе для фильтра типа «Галочки (CSS)» будут использованы флажки с предустановленным стилем CSS, т.е. к функциям выборки обычных флажков добавится предустановленный дизайн. Так же, как и для фильтра типа «Галочки», пользователь сможет одновременно выбрать несколько параметров из предложенных, а количество объектов, удовлетворяющих условиям фильтра, отобразится автоматически. Красной окантовкой будет обозначен параметр, отсутствующий для выбранных ранее параметров. На иллюстрации справа, например, это цвет, которого нет в каталоге для выбранных ранее параметров брюк.

Например, фильтр типа «Галочки (CSS)», использованный при выборе цветов брюк:

 

Тип фильтра «Переключатели»

Тип фильтра «Переключатели» означает, что на сайте для выбранного свойства объекта отобразятся переключатели (радиокнопки), т.е. пользователь сможет выбрать только один из предложенных параметров, при этом выбор будет сопровождаться выведением информации о количестве объектов на сайте, удовлетворяющих условиям выборки.

Например, фильтр типа «Переключатели» при выборе материала мягких игрушек:

 

 

Тип фильтра «Числовой слайдер 2X»

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

Например, фильтр типа «Числовой слайдер 2Х» при выборе цены товара:

Тип фильтра «Числовой слайдер 1X»

Однодиапазонный слайдер также предназначен для фильтрования только числовых данных, например: размеров, объемов и т.п. В данном случае пользователь может выбрать только одно значение из диапазона. При каждом движении «бегунка» будет отображено, сколько товаров удовлетворяет условиям выборки.

Например, фильтр типа «Числовой слайдер 1Х» при выборе размеров товара:

 

Тип фильтра «Текстовый слайдер 1X»

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

Например, фильтр типа «Текстовый слайдер 1Х» при выборе одного из параметров ноутбуков:

 


По завершении определения настроек фильтров поочередно нажмите на кнопки «Сохранить данные» и «Закрыть» в нижней части диалогового окна.


Внимание!

При наличии хотя бы начальных знаний HTML и CSS Вы можете самостоятельно настроить тип отображения для фильтра «Галочки (CSS)».

Для этого:

  • выберите в списке фильтров тип фильтра «Галочки (CSS)», как описано выше;
  • посмотрите HTML-код страницы и найдите место, где находится форма с фильтрами, например:

 

Ваш параметр был транслитерирован, и теперь так будет называться CSS-класс для цвета «Голубой». Зная название класса, Вы сможете придать ему любой вид.

Вот так, например, выглядят настройки для голубого цвета (здесь использованы спрайты, поэтому есть только смещение):

Вы можете скачать CSS или набор спрайтов.


По завершении определения настроек фильтров поочередно нажмите на кнопки «Сохранить данные» и «Закрыть» в нижней части диалогового окна.


Теперь, вы знаете, что делать


— или посмотреть пример магазина

Создание интернет-магазина