PrestaShop Design i nawigacja

DataFirefly SideCart: boczny koszyk dla PrestaShop 8

Koszyk, który nie zabiera już klienta z karty produktu.

Koniec z przekierowaniem na stronę koszyka, które przerywa impuls zakupowy. SideCart wysuwa panel koszyka z boku ekranu, gdy tylko produkt zostanie dodany. Klient widzi, co właśnie dodał, wartość pośrednia aktualizuje się w czasie rzeczywistym, a przeglądanie sklepu trwa dalej bez przeładowania strony. Standardowy UX nowoczesnego e-commerce, w pięć minut od instalacji na Twoim PrestaShop 8.

PrestaShop 8.0+ PHP 8.0+ Bez przeładowania W pełni konfigurowalny Mobile-first Wiele motywów
  • Zwrot w 30 dni
  • 12 miesięcy aktualizacji
  • Wsparcie 24 h
www.datafirefly.com/pl/
Wysuwany boczny koszyk w sklepie PrestaShop 8
v1.0.0 · zaktualizowano 2024-12-19
Co robi

W skrócie.

01

Natychmiastowe otwarcie przy dodaniu

Panel wysuwa się z krawędzi, gdy tylko produkt trafi do koszyka: bez przeładowania, bez utraty kontekstu. Klient zostaje na karcie produktu.

02

Wszystko jest konfigurowalne

Pozycja (lewa albo prawa strona), kolor główny, przyciemnienie tła, automatyczne otwieranie przy dodaniu, automatyczne zamykanie z ustawianym opóźnieniem oraz wyświetlanie wartości pośredniej, podatków i dostawy.

03

Zgodny z Twoim motywem

Moduł podłącza się do standardowych hooków PrestaShop 8 (displayHeader, actionCartUpdateQuantityBefore, displayAfterBodyOpeningTag). Działa z motywami Classic, Hummingbird i większością motywów komercyjnych.

04

Natywna wydajność

CSS i JavaScript są zminifikowane i ładowane wyłącznie na froncie sklepu. Żadnych zewnętrznych zależności, żadnego ciężkiego frameworka. Zerowy wpływ na Core Web Vitals.

Wersja pełna

Wszystko, co warto wiedzieć, zanim zainstalujesz.

Szczegółowe spojrzenie na to, jak działa DataFirefly SideCart: boczny koszyk dla PrestaShop 8, dlaczego zbudowaliśmy go w ten sposób i jaka myśl stoi za powyższymi funkcjami.

§ 01

Po co boczny koszyk

Na 100 odwiedzających, którzy klikają „Dodaj do koszyka”, ilu trafia na stronę koszyka i rezygnuje? Bardzo wielu. Przekierowanie łamie moment, w którym chęć zakupu jest najsilniejsza. SideCart to rozwiązuje: klient widzi, jak koszyk się zapełnia, nie opuszczając karty produktu, i może albo kupować dalej, albo przejść do kasy jednym kliknięciem. To standardowy wzorzec UX Amazona, Shopify i każdego sklepu, który traktuje konwersję poważnie.

§ 02

Co widzi klient

Panel o szerokości 380 px wysuwający się z prawej strony (konfigurowalnie z lewej) z płynną animacją. W środku lista produktów ze zdjęciem, nazwą, wariantem, ceną jednostkową i kontrolką ilości. Na dole wartość pośrednia aktualizowana w czasie rzeczywistym, a opcjonalnie także VAT i szacowana dostawa. Dwa przyciski akcji: przejście do szczegółów koszyka albo bezpośrednio do kasy. Przyciemnione tło za panelem zamyka go po kliknięciu.

§ 03

Konfiguracja w 5 minut

Zainstaluj plik ZIP przez menedżer modułów PrestaShop, a następnie wejdź w Moduły, DataFirefly SideCart, Konfiguruj. Jedna strona ustawień zawiera: włącz albo wyłącz, pozycja (lewa albo prawa), automatyczne otwieranie przy dodaniu (tak albo nie), przyciemnienie tła (tak albo nie), automatyczne zamykanie (tak albo nie) z opóźnieniem w sekundach, kolor główny (próbnik kolorów) oraz trzy pola wyboru do wyświetlania wartości pośredniej, VAT i dostawy. Zapisz i moduł działa.

§ 04

Architektura i wydajność

Moduł korzysta z natywnych hooków PrestaShop 8: displayHeader dla zasobów, actionCartUpdateQuantityBefore do wykrywania dodań i displayAfterBodyOpeningTag do wstrzyknięcia panelu. CSS ma poniżej 10 kB po kompresji gzip, JavaScript poniżej 8 kB. Żadnych zewnętrznych zależności: jQuery nie jest wymagane, framework nie jest potrzebny. Wpływ na Core Web Vitals jest zerowy albo korzystny, ponieważ usunięcie przekierowania na stronę koszyka poprawia odczuwany LCP.

§ 05

Zgodność z multistore

Moduł jest w pełni zgodny z trybem multistore PrestaShop: każdy podsklep może mieć własną konfigurację (inny kolor, inną pozycję, włączone albo wyłączone hooki). Zmienne konfiguracyjne zapisywane są przez Configuration::updateValue ze standardowym kontekstem multistore.

§ 06

Telefon i dostępność

Na telefonie (poniżej 768 px) panel rozszerza się na pełny ekran dla maksymalnej czytelności. Zamknąć go można klawiszem Esc, przyciskiem X w rogu, kliknięciem w przyciemnione tło albo gestem przesunięcia w bok, tam gdzie urządzenie to obsługuje. Wszystkie elementy interaktywne mają etykiety ARIA, a fokus pozostaje uwięziony w panelu, gdy jest otwarty.