Запит на сортування, фільтрацію та живий пошук

Цей новий набір функцій, впроваджений у Esl 1.9.6, покращує взаємодію з контентом через елементи фільтрації на основі AJAX, такі як пошук, прапорці, вибір опцій, кнопки радіо, повзунки діапазону та селектори дат.

Це дозволяє здійснювати просунуту сортировку, фільтрацію та пошук контенту в реальному часі без оновлення сторінки, що призводить до більш динамічного та інтерактивного користувацького досвіду.

Як увімкнути фільтри запитів

Щоб дослідити цю нову, в даний момент експериментальну функцію, вам спочатку потрібно увімкнути її з вашої панелі управління WordPress під Esl > Налаштування > Фільтри запитів.

Після увімкнення нові елементи фільтра будуть доступні в панелі елементів движка.

Важливі примітки

  • Попередження про сумісність: Це може спричинити конфлікти з плагінами, які перекривають фільтр esl/query/force_run. Найкраще уникати його використання в поєднанні з іншими плагінами фільтрів.
  • Обмеження обсягу: Сортування запитів та фільтрація наразі обмежені до Постів (Тип запиту), що націлені на зовнішній рівень (в сценаріях вкладених запитів).

Як налаштувати фільтр

Коли ви додаєте елемент фільтра на свою сторінку, призначте йому “Цільовий запит” під час редагування. Це необхідно, щоб Esl знав, на який запит повинен вплинути конкретний фільтр.

Ця гнучкість встановлення Цільового запиту безпосередньо на елементі фільтра дозволяє вам додавати фільтри в будь-якому місці на вашій сторінці. Вам не потрібно розташовувати всі ваші фільтри в одному блоці.

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

Застосувати на “Введення” або “Відправити”

За замовчуванням будь-яка зміна, яку ви застосовуєте до фільтра, наприклад вибір іншого варіанту радіо-фільтра або значення фільтра чекбокса, оновлює цільовий запит. Ви можете змінити цю поведінку, встановивши елемент управління «Застосувати до» в режим «Відправити». Таким чином, запит буде оновлено лише при натисканні на елемент «Фільтр – Відправити», що пов’язаний із цим самим цільовим запитом.

Елементи фільтра

1. Фільтр – Пошук

  • Функція: Живий AJAX-пошук.
  • Дебаунс (мс): Контролює затримку перед початком пошуку після того, як введення зупиняється. Підвищує продуктивність, зменшуючи непотрібні запити на пошук.
  • Мін. символи: Мінімальна кількість символів, необхідна для активації пошуку. Пошуки не ініціюватимуться з меншою кількістю символів. За замовчуванням – 3 символи.

2. Фільтр – Чекбокс

  • Опції фільтра: Таксономія, Поля постів, Мета-поля постів.
  • Відображення ієрархії: Підтримується.

3. Фільтр – Дата

  • Опції фільтра: Таксономія, Поля постів, Мета-поля постів.
  • Увімкнути час: Додає можливість вибору часу до фільтра дати.
  • Діапазон дат: Дозволяє вибір діапазону дат.
  • Мін./макс. дата: Опція використання мінімальних і максимальних дат з індексної таблиці для фільтрації.

4. Фільтр – Радіо

  • Опції фільтра: Таксономія, Поля постів, Мета-поля постів.
  • Відображення ієрархії: Підтримується.
  • Дія: Вибір між застосуванням фільтра або сортуванням.
  • Режим: Опція вибору між стилем «Кнопка» або традиційними «Радіо» елементами для відображення фільтра.

5. Фільтр – Діапазон

  • Джерело: В даний час обмежено до «Користувальницького поля» для вказівки мета-ключа (наприклад, _regular_price, який представляє стандартну ціну продукту в WooCommerce).
  • Генератор мін/max: Генератор вказує мінімальні та максимальні значення на основі результатів циклу запитів.
  • Режим: Пропонує вибір між стилем «Слайдер» або «Введення» для вибору діапазону.

6. Фільтр – Вибір

  • Опції фільтра: Таксономія, Поля постів, Мета-поля постів.
  • Відображення ієрархії: Підтримується.
  • Дія: Вибір між застосуванням фільтра або сортуванням.

7. Фільтр – Відправити

  • Функціональність: Надає кнопки для скидання або подання (застосування) всіх фільтрів цільового запиту.

Динамічні теги даних

Сортування / фільтрація запитів постачає два нові динамічні теги даних (search_term_filter, query_results_count_filter), значення яких автоматично оновлюється при зміні результатів запиту.

{search_term_filter:quer34} – Обгортає результат пошукового терміна у <span data-eslcms-ls-term="quer34">>. Динамічно оновлюється через AJAX, коли оновлюється цільовий ID запиту quer34 (ID запиту вашого елемента).

{query_results_count_filter:quer34} – Огортає кількість результатів запиту у <span data-eslcms-qr-count="quer34">>. Динамічно оновлюється у відповідь на зміни через AJAX в ID запиту quer34 (ID запиту вашого елемента).

Новий динамічний тег даних search_term відображає значення пошукового терміна.

{search_term} – Виводить значення $_GET['s'] або get_query_var('s'), ідеально підходить для відображення поточного пошукового терміна на сторінці.

{search_term:quer34} – Витягує змінну запиту search з ID запиту quer34. Щоб знайти свій ID запиту, скопіюйте ID елемента запиту в буфер обміну і використовуйте останні шість символів, пропускаючи префікс “#easysite-”.

Це передбачено для використання на статичній сторінці результатів пошуку. Щоб відобразити значення пошукового терміна елемента Filter - Search, переконайтеся, що ви використовуєте новий динамічний тег даних search_term_filter.

Хоча елемент “Фільтр – Пошук”, пов’язаний із цільовим запитом, миттєво оновлює результати, він призначений для використання для пошукових запитів, які ви відображаєте при первинному завантаженні сторінки, таких як ваша сторінка магазину WooCommerce або ваша домашня сторінка блогу.

Ви також можете створити справжній живий пошук, результати якого з’являються лише після виконання пошуку за допомогою елемента “Фільтр – Пошук”.

Все, що вам потрібно зробити, це активувати налаштування “Живий пошук” всередині вашого цільового елемента циклу запиту ось так:

Після активації цей запит виконується лише тоді, коли виконується живий пошук.

Щоб спочатку приховати запит (при завантаженні сторінки), відредагуйте елемент, що містить ваші результати живого пошуку. Це зазвичай батьківський елемент вашого циклу запиту або інший зовнішній елемент вашого запиту.

Потім скопіюйте його ID елемента (наприклад, #easysite-dx44gp), поверніться до налаштувань запиту та вставте цей ID елемента з вашого буфера обміну у текстове поле Результати живого пошуку.

Демонстрація живого пошуку: https://youtu.be/5oDHG-bTAfQ?si=ZR61wiAVxFFbjP-c&t=461

Оновлення індексу фільтра

Придатний для елементів з checkbox, datepicker, radio, range та select в межах системи. Також доступний з панелі керування WordPress у розділі Esl > Налаштування > Фільтри запитів.

Перегенерація індексу фільтра:

  • Мета: Забезпечити актуальність усіх опцій фільтра.
  • Функція: Перегенерувати завдання індексації для всіх елементів фільтра, генерувати записи індексу та зберігати їх у спеціальній таблиці.

Продовжити завдання індексації: (@since 1.10)

  • Мета: Негайно запустити будь-які залишкові/очікувальні завдання індексації фільтра замість очікування наступного завдання WP cronjob.
  • Функція: Запустити завдання індексації та оновити прогрес на сторінці налаштувань.

Складні ярлики опцій

Придатний для елементів checkbox, radio та select.

  • Випадок використання: “Джерело” встановлено на “Спеціальне поле” або “Поле WordPress”.
  • Приклад: Зв’язування _stock_status з зручним для користувача ярликом.