Віджет товарів

Що таке віджет товарів

Віджет товарів — це інтерактивний блок, який дозволяє відображати динамічні підбірки товарів на сторінці інтернет-магазину. Він може показувати, наприклад, популярні позиції, подібні товари, рекомендовані або недавно переглянуті.

За допомогою генератора віджетів ви можете точно налаштувати, які товари будуть показані — за категорією, ціновим діапазоном, назвою або навіть за конкретними ID товарів. Також можна вибрати тип відображення: слайдер, сітка, мозаїка та інші візуальні формати.

Створити власні віджети товарів можна за посиланням:
https://hotlist.biz/ua/page.php?p=submit_catalog_page&subpage&menus&generator&shop_slider_products

Приклади віджетів товарів у різних варіантах реалізації

Тип 1 — Swipe (ефект перегортання)

Цей варіант дозволяє плавно перегортати товари за допомогою пальця (на мобільних пристроях) або миші (на комп’ютері). Дозволяє переглядати товари як у галереї, без кнопок прокрутки.

Особливості:

• Плавний ефект перегортання (Swipe) на всіх пристроях.
• Ідеально підходить для невеликих рядів товарів.
• Працює разом із :auto_width для адаптації кількості карток під ширину блоку.

Приклад вставки:

Salomon Quest 4D 3 GTX Q4D3-BLK_ru
  280$ 220$
Salomon X Ultra 4 Mid GTX XU4M-NVY_ru
  195$ 165$
Salomon Outpulse Mid GTX OPM-GRN_ru
  165$ 135$
Salomon Vaya Mid GTX (Жен.) VYM-PPL_ru
  150$ 130$

[MENU:shop_products_slider:site-15992:pers_cat_id-0:on_page-4:start-0:button-cart:button-compare:description:favorite-icon:auto_width:htmlonly:lang-ru:swipe]

Тип 2 — Scroll (прокрутка з автозавантаженням)

Режим :scroll-768x8x0 замінює стандартний блок товарів на блок із прокруткою та автоматичним підвантаженням нових товарів при досягненні кінця списку.

Особливості:

• Імітує Swipe на мобільних пристроях, але працює і на десктопі (прокрутка мишею).
• Автоматично підвантажує нові товари без перезавантаження сторінки.
• Економить місце та робить перегляд плавним і інтерактивним.
• Параметри :scroll-768x8x0 означають:
  • 768 — мінімальна ширина екрану, при якій активується функція;
  • 8 — кількість товарів за одне підвантаження;
  • 0 — без обмеження загальної кількості.

Приклад вставки:

Salomon Quest 4D 3 GTX Q4D3-BLK_ru
  280$ 220$
Salomon X Ultra 4 Mid GTX XU4M-NVY_ru
  195$ 165$
Salomon Outpulse Mid GTX OPM-GRN_ru
  165$ 135$
Salomon Vaya Mid GTX (Жен.) VYM-PPL_ru
  150$ 130$

[MENU:shop_products_slider:site-15992:pers_cat_id-0:on_page-4:start-0:button-cart:button-compare:description:favorite-icon:auto_width:htmlonly:lang-ru:scroll-3768x8x0]

Тип 3 — Append (додавання товарів без заміни блоку)

Режим :append використовується для додавання нових товарів в кінець поточного списку, не замінюючи існуючі елементи. Корисно для створення довгих безперервних стрічок товарів.

Особливості:

• Додає нові картки товарів в кінець поточного списку.
• Не можна використовувати разом із :scroll або :carousel.
• Не перемальовує блок, що покращує продуктивність на великих списках.

Приклад вставки:

Salomon Quest 4D 3 GTX Q4D3-BLK_ru
  280$ 220$
Salomon X Ultra 4 Mid GTX XU4M-NVY_ru
  195$ 165$
Salomon Outpulse Mid GTX OPM-GRN_ru
  165$ 135$
Salomon Vaya Mid GTX (Жен.) VYM-PPL_ru
  150$ 130$

[MENU:shop_products_slider:site-15992:pers_cat_id-0:on_page-4:start-0:button-cart:button-compare:description:favorite-icon:auto_width:htmlonly:lang-ru:append]

Тип 4 — Carousel

Режим :carousel активує карусельний вид прокрутки (на базі експериментальної реалізації Owl Carousel). Картки прокручуються циклічно з можливістю дотику та автоматичного руху.

Особливості:

• Підтримує Touch Swipe та плавну анімацію перелистування.
• Відображає товари у вигляді зацикленого слайдера (після останнього повертається до першого).
• Підходить для промо-блоків та підбірок "Хіти", "Новинки" тощо.

Приклад вставки:

Salomon Quest 4D 3 GTX Q4D3-BLK_ru
  280$ 220$
Salomon X Ultra 4 Mid GTX XU4M-NVY_ru
  195$ 165$
Salomon Outpulse Mid GTX OPM-GRN_ru
  165$ 135$
Salomon Vaya Mid GTX (Жен.) VYM-PPL_ru
  150$ 130$
Salomon Toundra Pro CSWP TNDR-WTR_ru
  250$ 200$
Salomon Cross Hike 2 Mid GTX CH2M-RED_ru
  185$ 155$
Salomon Shelter CS WP SHLTR-GRY_ru
  140$ 110$
Salomon Madcross Mid GTX MDC-BGE_ru
  150$ 120$
Salomon Outward GTX OTW-BLK_ru
  220$ 175$
Salomon Patrol Mid CSWP PAT-RED_ru
  135$ 105$
Salomon XA Pro 3D Mid Forces XAP3D-MIL_ru
  300$ 240$
Salomon Predict Hike Mid GTX PHM-WHT_ru
  225$ 185$

[MENU:shop_products_slider:site-15992:pers_cat_id-0:on_page-12:start-0:button-cart:button-compare:description:favorite-icon:htmlonly:lang-ru:carousel]

Тип 5 — Mosaic-sides (мозаїчне розташування карток)

Параметр :mosaic-sides-4 включає мозаїчний режим відображення, при якому блок ділиться на дві частини з оригінальною версткою карток.

Особливості:

• Товари відображаються у вигляді мозаїки (розділення блоку на дві частини).
• Варіант -4 додає іконки та заголовок над зображенням товару.
• Використовується для стилізованих промо-блоків і підбірок з візуальним акцентом.
• Не можна використовувати разом із :auto_width, :scroll або :carousel.

Приклад вставки:

Salomon Quest 4D 3 GTX Q4D3-BLK_ru
  280$ 220$
Salomon X Ultra 4 Mid GTX XU4M-NVY_ru
  195$ 165$
Salomon Outpulse Mid GTX OPM-GRN_ru
  165$ 135$
Salomon Vaya Mid GTX (Жен.) VYM-PPL_ru
  150$ 130$

[MENU:shop_products_slider:site-15992:pers_cat_id-0:on_page-4:start-0:button-cart:button-compare:description:favorite-icon:htmlonly:lang-ru:mosaic-sides-4]