Слайдер продуктів

Слайдер відображає карусель продуктів з плавним прокручуванням на CSS scroll-snap. Не потребує зовнішніх бібліотек JS (Slick, Swiper) - використовує нативні механізми браузера.

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

Перейдіть до WooCommerce > Polski > Модулі магазину та активуйте опцію Слайдер продуктів.

Технологія scroll-snap

Слайдер використовує CSS scroll-snap-type: x mandatory замість традиційних бібліотек каруселей. Переваги:

Нуль JavaScript для прокручування - плавне нативне прокручування
Без залежностей - не потрібно завантажувати Slick, Swiper чи Owl Carousel
Повна адаптивність - автоматичне підлаштування до ширини екрану
Дотик та миша - нативна підтримка swipe на сенсорних пристроях
Продуктивність - без reflow/repaint при прокручуванні, 60 FPS

Налаштування snap:

/* Слайдер за замовчуванням застосовує ці значення */
.polski-slider {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}

.polski-slider__item {
    scroll-snap-align: start;
}

Типи слайдерів

Слайдер відображає продукти, пов’язані з поточним продуктом. Пов’язані продукти підбираються на основі категорій та тегів.

[polski_product_slider type="related" product_id="123"]

Продукти зі знижкою (sale)

Відображає продукти з активною акційною ціною (sale price).

[polski_product_slider type="sale" limit="12"]

Бестселери

Продукти, відсортовані за загальною кількістю продажів.

[polski_product_slider type="bestsellers" limit="10"]

Найновіші

Продукти, відсортовані за датою додавання.

[polski_product_slider type="latest" limit="10"]

З обраної категорії

Продукти з конкретної категорії.

[polski_product_slider type="category" category="elektronika" limit="12"]

Обрані продукти

Конкретні продукти, вказані за ID.

[polski_product_slider type="ids" ids="12,34,56,78,90"]

Блок Gutenberg

Блок Polski - Слайдер продуктів доступний у редакторі Gutenberg. Попередній перегляд слайдера видимий безпосередньо у редакторі.

Опції блоку:

Опція	Опис	За замовчуванням
Тип	Джерело продуктів (related/sale/featured/тощо)	latest
Ліміт	Максимальна кількість продуктів	8
Колонки	Кількість видимих продуктів (desktop)	4
Колонки планшет	Видимі продукти на планшеті	2
Колонки мобільний	Видимі продукти на телефоні	1
Стрілки	Показати стрілки навігації	Так
Крапки	Показати крапки пагінації	Ні
Автоматичне прокручування	Автоматичне прокручування	Ні
Проміжок (gap)	Відступ між продуктами	16px
Заголовок	Заголовок над слайдером	(порожній)

Shortcode `[polski_product_slider]`

Параметри

Параметр	Тип	За замовчуванням	Опис
`type`	string	`latest`	Тип: related, sale, featured, bestsellers, latest, category, ids
`limit`	int	`8`	Максимальна кількість продуктів
`columns`	int	`4`	Колонки на десктопі
`columns_tablet`	int	`2`	Колонки на планшеті
`columns_mobile`	int	`1`	Колонки на телефоні
`category`	string	(порожній)	Slug категорії (для type=category)
`ids`	string	(порожній)	ID продуктів (для type=ids)
`product_id`	int	(поточний)	ID продукту (для type=related)
`arrows`	string	`yes`	Показати стрілки
`dots`	string	`no`	Показати крапки пагінації
`autoplay`	string	`no`	Автоматичне прокручування
`autoplay_speed`	int	`5000`	Пауза між слайдами (мс)
`gap`	string	`16px`	Відступ між картками продуктів
`title`	string	(порожній)	Заголовок над слайдером
`orderby`	string	`date`	Сортування: date, price, rating, rand
`order`	string	`DESC`	Напрямок: ASC або DESC

Приклади

Слайдер продуктів зі знижкою із заголовком:

[polski_product_slider type="sale" limit="12" columns="4" title="Aktualne promocje" arrows="yes"]

Слайдер продуктів з категорії на головній сторінці:

[polski_product_slider type="category" category="nowosci" limit="8" columns="3" dots="yes"]

Автоматично прокручуваний слайдер бестселерів:

[polski_product_slider type="bestsellers" limit="10" autoplay="yes" autoplay_speed="4000"]

Автоматичне прокручування

Коли autoplay="yes", слайдер автоматично прокручує продукти через визначений час. Прокручування зупиняється, коли користувач наводить курсор на слайдер або торкається його на мобільному пристрої. Після залишення слайдера автоматичне прокручування поновлюється.

// Зміна стандартного часу autoplay глобально
add_filter('polski/product_slider/autoplay_speed', function (): int {
    return 3000; // 3 секунди
});

Інтеграція з модулями

Картки продуктів у слайдері містять елементи з інших модулів:

Етикетки - значки розпродажу, новинки, бестселера
Список бажань - іконка серця
Порівняння - кнопка порівняння
Швидкий перегляд - іконка ока
Ціна Omnibus - найнижча ціна за 30 днів

Lazy loading зображень

Зображення продуктів у слайдері завантажуються ліниво - зображення поза видимою областю не завантажуються до моменту прокручування. Використовується нативний атрибут loading="lazy" та Intersection Observer для старіших браузерів.

Стилізація CSS

.polski-slider - контейнер слайдера
.polski-slider__track - доріжка прокручування
.polski-slider__item - картка продукту
.polski-slider__arrow - стрілка навігації
.polski-slider__arrow--prev - стрілка вліво
.polski-slider__arrow--next - стрілка вправо
.polski-slider__dots - контейнер крапок пагінації
.polski-slider__dot - окрема крапка
.polski-slider__dot--active - активна крапка
.polski-slider__title - заголовок

Вирішення проблем

Слайдер не прокручується плавно - переконайтеся, що браузер підтримує scroll-snap-type. Усі сучасні браузери (Chrome 69+, Firefox 68+, Safari 11+) підтримують цю властивість.

Стрілки не працюють - перевірте, чи на сторінці немає CSS-конфлікту з іншим слайдером. Класи .polski-slider__arrow можуть бути перевизначені стилями теми.

Autoplay не зупиняється - переконайтеся, що JavaScript не блокується оптимізаційним плагіном. Скрипт слайдера повинен бути завантажений.

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

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