PrestaShop Design i nawigacja

Moduł Próbników Wariantów ze Zdjęciem i Stanem PrestaShop 8/9

Twoje kombinacje zasługują na więcej niż listę rozwijaną.

Klikalne miniatury zdjęć dla kolorów, rozmiarów i materiałów, podgląd galerii po najechaniu i wskaźnik stanu per wariant, bezpośrednio na karcie produktu. Miniatury są wyprowadzane automatycznie ze zdjęć kombinacji: instalujesz i wszystko już działa.

W skrócie
  • Miniatury zdjęć zamiast dropdownów kombinacji
  • Natychmiastowy podgląd galerii po najechaniu na wariant
  • Stan widoczny per wariant: dostępny, niski stan, brak
  • Automatyczne wyprowadzanie ze zdjęć kombinacji
  • Pełna nawigacja klawiaturą (wzorzec ARIA radiogroup)
PrestaShop 8 & 9 Zero konfiguracji Obsługa klawiatury 5 języków Bez zależności
  • Zwrot w 30 dni
  • 12 miesięcy aktualizacji
  • Wsparcie 24 h
www.datafirefly.com/pl/
Próbniki wariantów ze zdjęciem i stanem magazynowym na karcie produktu PrestaShop
v1.1.0 · zaktualizowano 2026-07-02
Co robi

W skrócie.

01

Automatyczne próbniki ze zdjęć

Miniatury są wyprowadzane ze zdjęć istniejących kombinacji: żaden upload nie jest wymagany na start. Następnie dopracuj wynik dedykowanymi obrazami lub kodami szesnastkowymi per atrybut.

02

Podgląd galerii po najechaniu

Najedź na miniaturę koloru: główne zdjęcie natychmiast pokazuje fotografię tego wariantu, wstępnie załadowaną dla natychmiastowego renderu. Oryginalny obraz wraca, gdy kursor opuszcza miniaturę.

03

Stan per wariant

Każda miniatura pokazuje swój stan: dostępny, niski stan (konfigurowalny próg) lub brak. Wyczerpane warianty mogą być przekreślone albo całkowicie ukryte.

04

Natywna dostępność

Kompletny wzorzec WAI-ARIA radiogroup: nawigacja strzałkami klawiatury, jeden punkt tabulacji per grupa, stany ogłaszane czytnikom ekranu. Konkretny argument za zgodnością z wymogami dostępności.

Wersja pełna

Wszystko, co warto wiedzieć, zanim zainstalujesz.

Szczegółowe spojrzenie na to, jak działa Moduł Próbników Wariantów ze Zdjęciem i Stanem PrestaShop 8/9, dlaczego zbudowaliśmy go w ten sposób i jaka myśl stoi za powyższymi funkcjami.

§ 01

Wizualny wybór, który sprzedaje

W modzie, dekoracjach czy kosmetykach klient kupuje oczami. Lista rozwijana „Biały / Czarny / Czerwony” nie pokazuje niczego; rząd miniatur zdjęć pokazuje wszystko. Moduł zastępuje natywne widgety kombinacji klikalnymi wizualnymi pastylkami, a każde najechanie wyświetla podgląd wariantu w głównej galerii: klient przegląda gamę bez ani jednego przeładowania strony.

§ 02

Działa od razu po instalacji

Większość modułów próbników wymaga przesłania obrazu per atrybut, zanim cokolwiek się wyświetli. Tutaj miniatury są wyprowadzane automatycznie ze zdjęć już przypisanych do kombinacji: instalujesz moduł, otwierasz kartę produktu i wszystko jest na miejscu. Inteligentny mechanizm ochronny zapobiega fałszywym trafieniom: grupa Rozmiar, której wszystkie wartości dzielą to samo zdjęcie, pozostaje tekstowa, a na zdjęcia przechodzą tylko grupy rzeczywiście zróżnicowane obrazem.

§ 03

Stan widoczny przed kliknięciem

Każda miniatura komunikuje swoją dostępność: dostępny, niski stan poniżej zdefiniowanego progu albo brak. Wyczerpane warianty mogą pozostać widoczne, ale przekreślone, co jest przydatne do pokazania szerokości gamy, albo zniknąć całkowicie. Obliczenia respektują globalne zachowanie sklepu przy zamówieniach bez stanu, jak i to zdefiniowane per kombinacja.

§ 04

Dostępny i zgodny z wymogami

Selektor implementuje wzorzec WAI-ARIA radiogroup zgodnie z regułami: jeden punkt tabulacji per grupa atrybutów, nawigacja strzałkami z zapętleniem, wybór spacją lub enterem, stany ogłaszane technologiom asystującym i widoczny pierścień fokusu. Wobec europejskich wymogów dostępności to konkretny wyróżnik na tle czysto wizualnych selektorów wariantów.

§ 05

Lekki i solidny z architektury

Dane wariantów są osadzane bezpośrednio w stronie w momencie renderowania: żadnego wywołania AJAX przy ładowaniu, żadnej zależności od dostępności endpointu, natychmiastowe wyświetlanie. Moduł ulepsza natywne widgety PrestaShop zamiast podmieniać szablony motywu: to właśnie czyni go zgodnym z Classic, Hummingbird i większością szablonów premium bez nadpisywania.