Виджет с товарами

Что такое виджет с товарами

Виджет с товарами — это интерактивный блок, который позволяет выводить на странице интернет-магазина динамические подборки товаров. Он может отображать, например, популярные позиции, похожие товары, рекомендуемые или недавно просмотренные.

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

Создать свой виджет с товарами можно по ссылке:
https://hotlist.biz/ru/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]