Widżet Produktów

Czym jest widżet produktów

Widżet produktów to interaktywny blok, który pozwala wyświetlać dynamiczne zestawienia produktów na stronie sklepu internetowego. Może pokazywać na przykład popularne pozycje, podobne produkty, polecane lub ostatnio oglądane.

Za pomocą generatora widżetów możesz dokładnie skonfigurować, które produkty zostaną wyświetlone — według kategorii, zakresu cen, nazwy lub nawet konkretnych ID produktów. Można także wybrać typ wyświetlania: slider, siatka, mozaika i inne formaty wizualne.

Swoje własne widżety produktów można stworzyć pod linkiem:
https://hotlist.biz/pl/page.php?p=submit_catalog_page&subpage&menus&generator&shop_slider_products

Przykłady widżetów produktów w różnych wariantach

Typ 1 — Swipe (efekt przewijania)

Ten wariant pozwala na płynne przewijanie produktów za pomocą palca (na urządzeniach mobilnych) lub myszy (na komputerze). Umożliwia przeglądanie produktów jak w galerii, bez przycisków przewijania.

Cechy:

• Płynny efekt przewijania (Swipe) na wszystkich urządzeniach.
• Idealny dla niewielkich rzędów produktów.
• Współpracuje z :auto_width, aby dostosować liczbę kart do szerokości bloku.

Przykład wstawienia:

Salomon Quest 4D 3 GTX Q4D3-BLK_pl
  280$ 220$
Salomon X Ultra 4 Mid GTX XU4M-NVY_pl
  195$ 165$
Salomon Outpulse Mid GTX OPM-GRN_pl
  165$ 135$
Salomon Vaya Mid GTX (damskie) VYM-PPL_pl
  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-pl:swipe]

Typ 2 — Scroll (autodownload)

Tryb :scroll-768x8x0 zamienia standardowy blok produktów na blok z przewijaniem i automatycznym ładowaniem nowych produktów po osiągnięciu końca listy.

Cechy:

• Symuluje Swipe na urządzeniach mobilnych, ale działa również na komputerze (scroll myszą).
• Automatycznie ładuje nowe produkty bez przeładowania strony.
• Oszczędza miejsce i zapewnia płynne, interaktywne przeglądanie.
• Parametry :scroll-768x8x0 oznaczają:
  • 768 — minimalna szerokość ekranu, przy której funkcja jest aktywna;
  • 8 — liczba produktów na jedno ładowanie;
  • 0 — brak ograniczenia co do całkowitej liczby produktów.

Przykład wstawienia:

Salomon Quest 4D 3 GTX Q4D3-BLK_pl
  280$ 220$
Salomon X Ultra 4 Mid GTX XU4M-NVY_pl
  195$ 165$
Salomon Outpulse Mid GTX OPM-GRN_pl
  165$ 135$
Salomon Vaya Mid GTX (damskie) VYM-PPL_pl
  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-pl:scroll-3768x8x0]

Typ 3 — Append (dodawanie produktów bez zamiany bloku)

Tryb :append służy do dodawania nowych produktów na końcu aktualnej listy, bez zastępowania istniejących elementów. Przydatny do tworzenia długich, ciągłych strumieni produktów.

Cechy:

• Dodaje nowe karty produktów na koniec bieżącej listy.
• Nie można używać razem z :scroll lub :carousel.
• Nie odświeża bloku, co poprawia wydajność na dużych listach.

Przykład wstawienia:

Salomon Quest 4D 3 GTX Q4D3-BLK_pl
  280$ 220$
Salomon X Ultra 4 Mid GTX XU4M-NVY_pl
  195$ 165$
Salomon Outpulse Mid GTX OPM-GRN_pl
  165$ 135$
Salomon Vaya Mid GTX (damskie) VYM-PPL_pl
  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-pl:append]

Typ 4 — Carousel

Tryb :carousel aktywuje przewijanie karuzelowe (oparte na eksperymentalnej implementacji Owl Carousel). Karty przewijają się cyklicznie z obsługą dotyku i automatycznym ruchem.

Cechy:

• Obsługuje dotykowe przewijanie (Touch Swipe) i płynne animacje przejścia.
• Wyświetla produkty w pętli (po ostatnim wraca do pierwszego).
• Idealny do bloków promocyjnych i zestawień "Hity", "Nowości" itd.

Przykład wstawienia:

Salomon Quest 4D 3 GTX Q4D3-BLK_pl
  280$ 220$
Salomon X Ultra 4 Mid GTX XU4M-NVY_pl
  195$ 165$
Salomon Outpulse Mid GTX OPM-GRN_pl
  165$ 135$
Salomon Vaya Mid GTX (damskie) VYM-PPL_pl
  150$ 130$
Salomon Toundra Pro CSWP TNDR-WTR_pl
  250$ 200$
Salomon Cross Hike 2 Mid GTX CH2M-RED_pl
  185$ 155$
Salomon Shelter CS WP SHLTR-GRY_pl
  140$ 110$
Salomon Madcross Mid GTX MDC-BGE_pl
  150$ 120$
Salomon Outward GTX OTW-BLK_pl
  220$ 175$
Salomon Patrol Mid CSWP PAT-RED_pl
  135$ 105$
Salomon XA Pro 3D Mid Forces XAP3D-MIL_pl
  300$ 240$
Salomon Predict Hike Mid GTX PHM-WHT_pl
  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-pl:carousel]

Typ 5 — Mosaic-sides (układ mozaikowy kart)

Parametr :mosaic-sides-4 włącza układ mozaikowy, dzieląc blok na dwie części z oryginalnym układem kart.

Cechy:

• Produkty wyświetlane są w formie mozaiki (blok podzielony na dwie części).
• Wariant -4 dodaje ikony i tytuł nad obrazkiem produktu.
• Używany w stylizowanych blokach promocyjnych i zestawieniach z wizualnym akcentem.
• Nie można używać razem z :auto_width, :scroll lub :carousel.

Przykład wstawienia:

Salomon Quest 4D 3 GTX Q4D3-BLK_pl
  280$ 220$
Salomon X Ultra 4 Mid GTX XU4M-NVY_pl
  195$ 165$
Salomon Outpulse Mid GTX OPM-GRN_pl
  165$ 135$
Salomon Vaya Mid GTX (damskie) VYM-PPL_pl
  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-pl:mosaic-sides-4]