AJAX-пошук

AJAX-пошук замінює стандартний пошук WooCommerce. Результати з’являються в реальному часі під час набору тексту, без перезавантаження сторінки.

Увімкнення модуля

Перейдіть до WooCommerce > Polski > Магазинні модулі та увімкніть AJAX-пошук. Модуль автоматично замінить стандартний віджет пошуку.

Поля пошуку

Пошук переглядає одночасно багато полів товару:

SKU (артикул)

Клієнт може ввести номер SKU або його фрагмент. Корисно в B2B-магазинах, де клієнти замовляють за артикулами.

Виробник (manufacturer)

Коли модуль Виробник активний, пошук враховує назву виробника. Введення “Samsung” покаже всі товари цього бренду.

GTIN (EAN/UPC)

Клієнт може ввести повний штрихкод GTIN/EAN/UPC або його фрагмент.

Додаткові поля

Назва товару
Короткий опис
Категорії
Теги
Атрибути (колір, розмір тощо)

Налаштування полів пошуку: WooCommerce > Polski > Магазинні модулі > AJAX-пошук > Поля пошуку.

Результати пошуку

Випадаючий список із результатами відображає:

Мініатюру товару
Назву товару (із підсвічуванням збігів)
Ціну
Категорію
Оцінку (зірочки)
Статус наявності

За замовчуванням відображається до 8 підказок. Ліміт можна змінити:

add_filter('polski/ajax_search/results_limit', function (): int {
    return 12;
});

Мінімальна кількість символів для початку пошуку, це 3. Зміна:

add_filter('polski/ajax_search/min_chars', function (): int {
    return 2;
});

REST API-ендпоінт

Пошук використовує власний REST API-ендпоінт замість admin-ajax.php. Завдяки цьому він працює швидше.

Ендпоінт: GET /wp-json/polski/v1/search

Параметри:

Параметр	Тип	Обов’язковий	Опис
`q`	string	Так	Фраза пошуку
`limit`	int	Ні	Ліміт результатів (за замовчуванням 8)
`cat`	int	Ні	ID категорії для фільтрування

Приклад запиту:

curl "https://twojsklep.pl/wp-json/polski/v1/search?q=koszulka&limit=5"

Приклад відповіді:

{
  "results": [
    {
      "id": 123,
      "title": "Koszulka bawełniana",
      "url": "https://twojsklep.pl/produkt/koszulka-bawelniana/",
      "image": "https://twojsklep.pl/wp-content/uploads/koszulka.jpg",
      "price_html": "<span class=\"amount\">49,00&nbsp;zł</span>",
      "category": "Odzież",
      "in_stock": true,
      "rating": 4.5
    }
  ],
  "total": 1,
  "query": "koszulka"
}

Блок Gutenberg

Блок Polski - AJAX-пошук доступний у редакторі Gutenberg. Розмістіть його в будь-якому записі, на сторінці чи у віджеті.

Опції блоку:

Placeholder, текст-заповнювач у полі пошуку
Ширина, ширина поля (авто, повна, власна в px)
Іконка, показати/приховати іконку лупи
Фільтр категорій, показати випадаючий список фільтрування за категорією поруч із полем пошуку
Стиль, заокруглені кути, рамка, тінь

У редакторі натисніть + та знайдіть Polski або AJAX-пошук.

Віджет Elementor

Віджет Polski AJAX Search доступний у категорії Polski for WooCommerce на панелі Elementor.

Окрім опцій блоку Gutenberg, віджет пропонує:

Керування типографікою (родина шрифту, розмір, насиченість)
Кольори (фон, текст, рамка, hover)
Відступи та внутрішні відступи
Анімація появи результатів
Адаптивність (налаштування для кожного breakpoint)

Шорткод `[polski_ajax_search]`

Параметри

Параметр	Тип	За замовчуванням	Опис
`placeholder`	string	`Szukaj produktów…`	Текст-заповнювач
`width`	string	`100%`	Ширина поля
`show_icon`	string	`yes`	Показати іконку лупи
`show_cat`	string	`no`	Показати фільтр категорій
`limit`	int	`8`	Максимальна кількість підказок

Приклад використання

[polski_ajax_search placeholder="Czego szukasz?" show_cat="yes" limit="10"]

Вставлення в заголовок теми

// У functions.php теми
add_action('wp_body_open', function (): void {
    echo do_shortcode('[polski_ajax_search placeholder="Szukaj..." width="400px"]');
});

Debouncing та продуктивність

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

Результати кешуються в браузері. Повторне введення тієї самої фрази не надсилає запит на сервер.

На сервері результати кешуються в transient API (за замовчуванням 1 година). Кеш очищається автоматично після збереження, додавання чи видалення товару.

// Зміна часу кешу
add_filter('polski/ajax_search/cache_ttl', function (): int {
    return 1800; // 30 хвилин у секундах
});

Стилізація CSS

CSS-класи модуля:

.polski-ajax-search, контейнер пошуку
.polski-ajax-search__input, текстове поле
.polski-ajax-search__results, випадаючий список результатів
.polski-ajax-search__item, окремий результат
.polski-ajax-search__item--active, підсвічений результат (навігація клавіатурою)
.polski-ajax-search__highlight, підсвічування збігу
.polski-ajax-search__loading, спінер завантаження

Доступність

Пошук підтримує навігацію клавіатурою:

Стрілка вниз/вгору, навігація по результатах
Enter, перехід до вибраного товару
Escape, закриття випадаючого списку
ARIA-атрибути: role="combobox", aria-expanded, aria-activedescendant

Повідомлення про проблеми: github.com/wppoland/polski/issues

Ця сторінка має виключно інформаційний характер і не є юридичною консультацією. Перед впровадженням проконсультуйтеся з юристом. Polski for WooCommerce, це програмне забезпечення з відкритим кодом (GPLv2), що надається без гарантій.