Поиск по справке

Создание фильтров

Главная   →   Помощь   →   Настройки интернет-магазина

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

Для начала зайдите в "Параметры" → "Типы объектов" → "Товар".

В диалоговом окне, которое появится, вы увидите список всех полей объекта Товар. Поля с типами "Строка", "Выпадающий список", "Числовые данные", "Дата", "Спецификации товара" могут использоваться для фильтра. (Вы можете добавлять поля, см. Как редактировать типы )

Далее, если вы выбрали и запомнили поле, которое добавите в фильтр, можно закрыть диалоговое окно с полями. Нажмите на кнопку "Виджеты", сразу откроется диалоговое меню с доступными виджетами.

Найдите в списке виджет "Директория", он отвечает за вывод фильтров. Двойным кликом вы можете сменить статус и тип фильтра,  затем нажмите сохранить данные.

Типы отображения фильтров

Галочки

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

Галочки (CSS)

Используются галочки стандартного интерфейса браузера с предустановленным стилем CSS. Это позволяет использовать функции выборки обычных галочек, но с любым предустановленным дизайном. Пользователь может выбрать несколько параметров одновременно. При каждом нажатии будет отображено, сколько товаров удовлетворяет условиям выборки. Красной границей обозначены расцветки, которых нет для выбранных ранее размеров или выбранных ранее цветов.

На сайте мы использовали этот тип для отображения возможных расцветок одежды.

Настройка CSS 

Если вы владеете начальными знаниями HTML и CSS для вас не составит труда настроить этот тип отображения для фильтра.

  1. Создайте товары и выберите отображение Галочки CSS.
  2. Посмотрите HTML-код страницы и найдите место, где находится форма с фильтрами.

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

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

.filters label.styled-label.Goluboy
{ background-position: 0 -144px !important; }
.filters input[type=checkbox].styled-checkbox:checked + label.styled-label.Goluboy
{ background-position: -48px -144px !important; }

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

Переключатели

Отображает переключатели(radio button) стандартного интерфейса браузера. Пользователь может выбрать только один из параметров одновременно. При каждом нажатии будет отображено, сколько товаров удовлетворяет условиям выборки. На сайте мы использовали этот тип для отображения набивки плюшевых игрушек.

Числовой слайдер 2X

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

Числовой слайдер 1X

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

 

Текстовый слайдер 1X

Однодиапазонный слайдер для использования с текстовыми данными. Аналог переключателей, но в виде слайдера. Пользователь может выбрать только одно значение из всего диапазона значений. При каждом движении бегунка будет отображено, сколько товаров удовлетворяет условиям выборки. На сайте мы использовали этот тип для отображения цвета овощей.

Подробнее о настройках виджета "Директория".


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


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

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