JBSelect Cascade — каскадные (вложенные) селекты

Качество сайта во многом зависит от его удобства и простоты. Внешний вид должен быть легким и ненавязчивым, а фильтр для поиска материалов — удобным. Фильтры могут иметь разный вид: слайдер, радио кнопки, флажки и т.д. В этой статье будет идти речь об элементе JBZoo Select Cascade (связанных элементах для Zoo). Он используется не только как фильтр, но и отображается в контенте сайта. Далее рассмотрим подробнее, что это за элемент и как он настраивается.

Что такое связанные (каскадные) элементы?

Каскадный (вложенный) селект — это комплексный элемент для Zoo, состоящий из нескольких взаимосвязанных select-элементов, где значения следующего зависят от того, что выбрано в предыдущем.

Так, например, можно сделать набор данных «Страна — Город — Улица». В первом селекте выбрать страну, после выбора во второй селект подгружается список городов из этой страны. Если выбрать город, то загрузятся улицы именно из этого города в третий селект. Такой элемент бывает очень необходим и поэтому мы решили добавить его в компонент Zoo.

Преимущества:

• Вложенность уровней неограниченна, цепочка селектов может быть бесконечной;
• Список значений произвольный и задается прямо из панели управления;
• По этому элементу легко можно производить поиск.

Как добавить элемент JBZoo Select Cascade в тип материала Zoo?

В панели управления перейдите во вкладу шестеренка и в менеджере приложений выберите JBZoo App.

Найдите тип материала, который хотите настроить. При наведении курсора на заголовок типа, появляется надпись Редактировать поля. Нажмите на неё.

Справа, в библиотеке элементов, выберите поле JBZoo Cascading Select. Слева появится новый элемент.

В поле Заголовок запишите название фильтра, которое будет в дальнейшем отображаться на сайте.

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

Уровень доступа показывает, кто сможет увидеть каскадные селекты на сайте.

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

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

Список элементов - в это текстовое поле в столбик запишите содержимое селектов. Например, все страны, города и улицы в таком порядке: сначала идёт название страны, ниже название города и потом улицы. Затем запишите вторую страну и т.д. Каждый уровень отделяется дополнительным дефисом.

После того, как все настроите, поднимитесь в верхнюю часть экрана и нажмите кнопку Сохранить и закрыть.

Настройка элемента в шаблоне материала

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

Справа, под надписью Пользовательский выберите созданный элемент и перетащите его нужную позицию слева. Чтобы настроить этот элемент, нажмите на иконку карандаша.

Если вы выберите Да в строке Показать ярлык, то при выводе каскадного селекта (множественного элемента), будет показано его название.

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

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

Разделитель в цепочке показывает, каким символом будут разделяться слова между уровнями. В данном случае разделителем в цепочке является дефис.

В поле Показать можете выбрать один из 3 вариантов отображения повторяющихся селектов в цепочке:

• все (будут отображаться все уровни повторяющихся элементов);
• первый (показывается только первый уровень);
• все без первого (показаны все выбранные элементы, кроме первого).

В следующем поле Шаблон выберите, будут ли у вас отображаться все селекты или только последний выбранный уровень.

В результате у вас может получиться такой вывод элемента в материале:

Настройка элемента в шаблоне фильтра

Найдите ваш тип и, напротив него, в строке JBZoo Search, вы увидите различные шаблоны формы поиска. Выберите нужный шаблон, например, Default.

Перенесите ваш элемент в любую позицию слева и нажмите на иконку карандаша для редактирования.

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

Если вы введете значение в поле Альтернативная метка, то оно отобразится вместо названия по умолчанию.

В поле Шаблон для фильтра вы можете выбрать, как будет выглядеть внешний вид элемента:

• автовыбор (предполагает автоматический выбор шаблона в виде каскадного селекта);
• каскадный селект (отображение в виде связанных элементов);
• текстовое поле (полнотекстовый поиск по элементу, вне зависимости от вложенности);
• скрытое поле (в него будут проставляться значения из поля Значение по умолчанию. Например, если по умолчанию поставить страну Россия, то фильтр будет выбирать материалы только по этой стране. Это поле не будет отображаться на сайте).

Значение по умолчанию — введенные в это поле значения будут уже выбраны по умолчанию в фильтре при загрузке страницы.

Подсказка placeholder

Если в опции Шаблон для фильтра выбрать текстовое поле, то надпись будет внутри. То есть, при получении элементом фокуса — подсказка пропадает. Когда поле теряет фокус и поле осталось пустым — подсказка вновь показывается.