Швидкий перегляд продукту
Швидкий перегляд відкриває деталі продукту у вікні lightbox - без виходу зі сторінки категорії чи результатів пошуку. Клієнт може одразу додати продукт до кошика.
Увімкнення модуля
Section titled “Увімкнення модуля”Перейдіть до WooCommerce > Polski > Модулі магазину та активуйте опцію Швидкий перегляд. На картках продуктів з’явиться іконка ока або кнопка Швидкий перегляд.
Lightbox
Section titled “Lightbox”Швидкий перегляд відкривається у модальному вікні (lightbox) з затемненим фоном. Вікно адаптивне - на десктопі займає приблизно 70% ширини екрану, на мобільних пристроях розтягується на повну ширину.
Вміст lightbox:
- Галерея зображень (ліва сторона)
- Назва продукту
- Ціна (з урахуванням акцій Omnibus)
- Короткий опис
- Вибір варіантів (для змінних продуктів)
- Поле кількості
- Кнопка Додати до кошика
- Посилання Переглянути повні деталі, що веде на сторінку продукту
Lightbox закривається через:
- Натискання кнопки X
- Натискання поза вікном (на overlay)
- Натискання клавіші Escape
- Кнопку назад у браузері (History API)
Підтримка варіантів
Section titled “Підтримка варіантів”Для змінних продуктів (variable products) швидкий перегляд відображає dropdown-и з атрибутами, так само як на сторінці продукту. Після вибору варіанту:
- Ціна оновлюється на ціну варіанту
- Зображення змінюється на зображення, призначене варіанту
- Статус наявності оновлюється
- Кнопка Додати до кошика стає активною лише після вибору всіх обов’язкових атрибутів
Дані варіантів завантажуються одноразово разом з lightbox - зміна варіанту не генерує додаткових запитів до сервера.
Галерея зображень (до 4 зображень)
Section titled “Галерея зображень (до 4 зображень)”Lightbox відображає до 4 зображень продукту - головне зображення та до 3 зображень з галереї. Цей ліміт забезпечує швидке завантаження та зрозумілий інтерфейс у вікні перегляду.
Навігація по галереї:
- Натискання мініатюри під головним зображенням
- Стрілки вліво/вправо на головному зображенні
- Swipe на сенсорних пристроях
- Клавіші стрілок на клавіатурі
Ліміт зображень у галереї можна змінити фільтром:
add_filter('polski/quick_view/gallery_limit', function (): int { return 6;});Налаштування
Section titled “Налаштування”Опції, доступні в налаштуваннях модуля:
| Опція | Опис | За замовчуванням |
|---|---|---|
| Позиція кнопки | Де відображати кнопку на картці продукту | На мініатюрі |
| Тип кнопки | Іконка ока або текст Швидкий перегляд | Іконка |
| Галерея | Скільки зображень показувати у lightbox | 4 |
| Опис | Чи показувати короткий опис | Так |
| Оцінки | Чи показувати зірочки оцінки | Так |
| Час доставки | Чи показувати орієнтовний час доставки | Так |
| Анімація | Тип анімації відкриття (fade/slide/zoom) | fade |
Завантаження вмісту через AJAX
Section titled “Завантаження вмісту через AJAX”Вміст lightbox завантажується через AJAX після натискання кнопки. Під час завантаження відображається spinner. Дані продукту кешуються на стороні клієнта - повторне відкриття того ж продукту не генерує додаткового запиту.
// Зміна шаблону lightboxadd_filter('polski/quick_view/template', function (string $template): string { return get_stylesheet_directory() . '/polski/quick-view-custom.php';});Інтеграція з іншими модулями
Section titled “Інтеграція з іншими модулями”Швидкий перегляд інтегрується з іншими модулями Polski for WooCommerce:
- Список бажань - кнопка серця видима у lightbox
- Порівняння - кнопка порівняння видима у lightbox
- Етикетки - значки (розпродаж, новинка, бестселер) відображаються на зображенні
- Ціна Omnibus - найнижча ціна за 30 днів видима при акційній ціні
Доступність (accessibility)
Section titled “Доступність (accessibility)”Lightbox підтримує повну клавіатурну навігацію:
- Tab - перехід між інтерактивними елементами
- Escape - закриття вікна
- Стрілки - навігація по галереї
- Focus trap - фокус не виходить за межі lightbox, поки він відкритий
- ARIA-атрибути:
role="dialog",aria-modal="true",aria-label
Стилізація CSS
Section titled “Стилізація CSS”CSS-класи модуля:
.polski-quick-view-overlay- затемнення фону.polski-quick-view-modal- вікно lightbox.polski-quick-view-gallery- галерея зображень.polski-quick-view-content- вміст продукту.polski-quick-view-close- кнопка закриття.polski-quick-view-trigger- кнопка відкриття на картці продукту
Продуктивність
Section titled “Продуктивність”Скрипт та стилі lightbox завантажуються ліниво - лише тоді, коли на сторінці є хоча б один продукт з кнопкою швидкого перегляду. JavaScript-код важить приблизно 8 KB (gzip) і не блокує рендеринг сторінки.
Вирішення проблем
Section titled “Вирішення проблем”Lightbox не відкривається - перевірте консоль браузера. Найчастіша причина - конфлікт з іншим lightbox-плагіном (наприклад, WooCommerce Lightbox, FancyBox). Вимкніть стандартний lightbox WooCommerce.
Варіанти не завантажуються - переконайтеся, що змінний продукт має правильно налаштовані варіанти з цінами. Порожні варіанти ігноруються.
Галерея показує лише 1 зображення - додайте зображення до галереї продукту у редакторі WooCommerce (секція Галерея продукту, а не лише Зображення продукту).
Повідомлення про проблеми: github.com/wppoland/polski/issues