Порівняння продуктів
Порівняльник дозволяє клієнтам зіставити кілька продуктів поруч у таблиці характеристик. Полегшує вибір, особливо в магазинах з великим асортиментом.
Увімкнення модуля
Section titled “Увімкнення модуля”Перейдіть до WooCommerce > Polski > Модулі магазину та активуйте опцію Порівняння продуктів. На продуктах з’явиться кнопка порівняння.
Таблиця характеристик (feature table)
Section titled “Таблиця характеристик (feature table)”Після додавання продуктів до порівняння клієнт бачить таблицю з колонками для кожного продукту. Рядки таблиці містять:
- Зображення продукту
- Назву з посиланням
- Ціну (з урахуванням акцій та директиви Omnibus)
- Оцінку (зірочки)
- Короткий опис
- Статус наявності
- Атрибути продукту (колір, розмір тощо)
- Час доставки (якщо встановлений)
- Кнопку Додати до кошика
Рядки, в яких усі значення ідентичні, можуть бути автоматично приховані - увімкніть опцію Сховати ідентичні характеристики у налаштуваннях модуля. Це дозволяє зосередити увагу клієнта на відмінностях між продуктами.
Максимальна кількість продуктів
Section titled “Максимальна кількість продуктів”За замовчуванням клієнт може порівняти до 4 продуктів одночасно. Ліміт можна змінити у налаштуваннях або фільтром:
add_filter('polski/compare/max_items', function (): int { return 6;});Після досягнення ліміту кнопка Додати до порівняння деактивується з повідомленням про досягнутий ліміт. Клієнт повинен спочатку видалити один з продуктів.
Автоматична заміна (auto-replace)
Section titled “Автоматична заміна (auto-replace)”Коли опція Автоматична заміна активна, додавання продукту понад ліміт автоматично замінює найстаріший продукт у порівнянні новим. Клієнт отримує toast-повідомлення про заміну.
Увімкнення у налаштуваннях: WooCommerce > Polski > Модулі магазину > Порівняння > Автоматична заміна.
Або програмно:
add_filter('polski/compare/auto_replace', '__return_true');Робота через AJAX
Section titled “Робота через AJAX”Порівняння працює без перезавантаження сторінки. AJAX-дії:
| Дія | Опис |
|---|---|
polski_compare_add | Додавання продукту |
polski_compare_remove | Видалення продукту |
polski_compare_get | Отримання списку продуктів |
polski_compare_clear | Очищення порівняння |
Дані порівняння зберігаються у сесії WooCommerce (WC()->session), завдяки чому працюють як для гостей, так і для залогінених користувачів.
Shortcode [polski_compare]
Section titled “Shortcode [polski_compare]”Shortcode відображає таблицю порівняння у будь-якому місці магазину.
Параметри
Section titled “Параметри”| Параметр | Тип | За замовчуванням | Опис |
|---|---|---|---|
columns | string | all | Характеристики для відображення (через кому) |
hide_similar | string | no | Сховати рядки з ідентичними значеннями |
show_remove | string | yes | Показати кнопку видалення продукту |
Приклад використання
Section titled “Приклад використання”[polski_compare columns="image,name,price,rating,stock" hide_similar="yes"]Використання на окремій сторінці
Section titled “Використання на окремій сторінці”Створіть сторінку, наприклад, Порівняння продуктів та вставте shortcode:
[polski_compare]Потім у налаштуваннях модуля вкажіть цю сторінку як Сторінка порівняння. Кнопка Переглянути порівняння у popup перенаправить на цю сторінку.
Кнопка порівняння
Section titled “Кнопка порівняння”Кнопка відображається на картці продукту (сторінка категорії) та на сторінці окремого продукту. Позицію контролюєте фільтром:
add_filter('polski/compare/button_position', function (): string { return 'after_add_to_cart';});Доступні позиції: before_add_to_cart, after_add_to_cart, after_summary.
Панель порівняння (floating bar)
Section titled “Панель порівняння (floating bar)”Після додавання першого продукту до порівняння внизу екрану з’являється панель з мініатюрами обраних продуктів та кнопкою Порівняти. Панель адаптивна - на мобільних пристроях показує кількість обраних продуктів замість мініатюр.
Порівняння в межах категорії
Section titled “Порівняння в межах категорії”За замовчуванням клієнт може порівнювати продукти з різних категорій. Якщо ви хочете обмежити порівняння продуктами з однієї категорії:
add_filter('polski/compare/same_category_only', '__return_true');При спробі додати продукт з іншої категорії клієнт побачить повідомлення про обмеження.
Стилізація CSS
Section titled “Стилізація CSS”CSS-класи модуля:
.polski-compare-button- кнопка додавання до порівняння.polski-compare-button--active- продукт у порівнянні.polski-compare-table- таблиця порівняння.polski-compare-bar- панель внизу екрану.polski-compare-empty- повідомлення порожнього порівняння
Вирішення проблем
Section titled “Вирішення проблем”Таблиця не відображає атрибути - переконайтеся, що атрибути продуктів встановлені як Видимий на сторінці продукту у редакторі продукту (вкладка Атрибути).
Кнопка не реагує на натискання - перевірте консоль браузера на наявність конфліктів JavaScript. Найчастішою причиною є дубльований jQuery або конфлікт з плагіном оптимізації JS.
Повідомлення про проблеми: github.com/wppoland/polski/issues