CMS (ранее менеджер контента): использование элементов ввода для фильтрации контента

7 мин. чтения
Подключите элементы ввода к своей коллекции и позвольте посетителям сайта фильтровать отображаемые элементы. Таким образом вы можете добиться оптимальной эффективности при отображении контента с помощью репитеров, таблиц или галерей. Вы настраиваете значения, которые посетители вашего сайта будут использовать для фильтрации.
Например, у вас может быть коллекция, содержащая длинный список автомобилей, включая марку, модель, год и цвет. Вы можете добавить выпадающий элемент ввода, чтобы посетитель мог выбрать марку автомобиля.
Есть несколько элементов ввода, которые посетители могут использовать для взаимодействия с контентом вашей коллекции. Это выпадающий список, радиокнопка, один флажок, мультичекбкос (множественный с помощью нескольких флажков) и теги выбора.
Для начала вам потребуется:
Скриншот таблицы из 5 колонок со списком автомобилей. Для фильтрации списка настроены выпадающие списки.

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

Шаг 2 | Подключите свой элемент к коллекции

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

Чтобы подключить элемент:

  1. Нажмите на элемент на странице.
  2. Нажмите Подключиться к данным  (или в Editor X).
  3. Нажмите Создать набор данных.
  4. Нажмите на раскрывающийся список Подключение коллекции и выберите коллекцию.
  5. Нажмите Создать.
  6. В панели Подключение подключите каждый элемент к полю в коллекции:
    Примечание: вы можете пропустить этот шаг, если подключаете таблицу. С помощью таблиц поля автоматически подключаются к элементам вашей коллекции. 
    1. Нажмите на соответствующий компонент (например, Текст).
    2. Нажмите на раскрывающийся список Подключить текст к и выберите необходимое поле.
Снимок экрана, показывающий базовый репитер и параметры подключения на соответствующей панели подключения.

Шаг 3 | Добавьте элемент ввода

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

Чтобы добавить элемент ввода:

  1. Перейдите в панель Добавить:
    • Редактор Wix: нажмите Добавить элементы  в левой части редактора.
    • Editor X: нажмите Добавить элементы  в верхней части Editor X.
  2. Нажмите Ввод данных.
  3. Нажмите Выпадающий список.
  4. Нажмите и перетащите на страницу выпадающий список.
Снимок экрана, показывающий выбор выпадающих элементов в разделе «Ввод данных» в меню «Добавить элементы».

Шаг 4 | Подключите элемент ввода к набору данных

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

Чтобы подключить элемент ввода:

  1. Нажмите на элемент ввода на странице.
  2. Нажмите Подключиться к данным  (или в Editor X).
  3. Нажмите Фильтровать контент.
  4. Нажмите на раскрывающийся список Подключить набор данных и выберите набор данных, который вы хотите использовать.
  5. Нажмите на раскрывающийся меню Фильтровать контент по и выберите поле, по которому посетители будут фильтровать контент.
  6. Нажмите Предпросмотр, чтобы протестировать свой фильтр.
Снимок экрана, показывающий модальное окно Подключить раскрывающийся список с выделением параметра Фильтр содержимого.
Примечание:
Вы можете использовать элементы ввода для фильтрации элементов из коллекций приложений Wix. Коллекции приложений Wix добавляются на ваш сайт, когда вы добавляете такие приложения, как Wix Stores или Wix Bookings.
Чтобы повысить производительность сайта, CMS ограничивает количество элементов, отображаемых при фильтрации таким образом. Подробнее о коллекциях приложений Wix.

(Необязательно) Шаг 5 | Фильтр по более чем одному значению

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

Чтобы отфильтровать более одного значения:

  1. Следуйте инструкциям в разделе Шаг 3 выше, чтобы добавить еще один элемент ввода. 
  2. Нажмите Подключиться к данным  (или в Editor X).
  3. Нажмите Фильтровать контент.
  4. Нажмите на раскрывающийся список Подключить набор данных и выберите тот же набор данных, что и раньше.
  5. Нажмите на раскрывающийся список Фильтровать контент по и выберите другое поле в отличие от другого фильтра.
  6. Нажмите Превью, чтобы проверить, как два фильтра работают друг с другом.
Снимок экрана, показывающий панель Подключить раскрывающийся список с набором данных и фильтром по заданным параметрам.

(Необязательно) Шаг 6 | Добавьте кнопку сброса

Полезно добавить кнопку, которая позволит посетителям сайта сбрасывать фильтры. Это позволяет им снова видеть весь контент без фильтров.

Чтобы добавить кнопку сброса:

  1. Перейдите в панель Добавить:
    • Редактор Wix: нажмите Добавить элементы  в левой части редактора.
    • Editor X: нажмите Добавить элементы  в верхней части Editor X.
  2. Выберите пункт Кнопка.
  3. Выберите кнопку и перетащите ее на сайт.
  4. Нажмите значок Подключиться к данным  (или в Editor X). 
  5. Нажмите на раскрывающийся список Подключить набор данных и выберите набор данных, для которого вы настроили фильтрацию. 
  6. Нажмите на Подключить действие при нажатии к раскрывающемуся списку, и выберите Сбросить введенные значения
Снимок экрана, на котором показана панель кнопки подключения, на которой выделен параметр «Сбросить входные значения».

Была ли статья полезна?

|