Konfigurator Produktu Krok po Kroku: kompletny przewodnik

Prezentacja

DF Product Configurator zamienia kartę produktu PrestaShop w prowadzony konfigurator krok po kroku: klient wybiera kolor, dodaje grawer, wskazuje akcesorium, widzi złożony rezultat w czasie rzeczywistym na zdjęciu produktu, a odpowiednia dopłata jest naliczana w koszyku po stronie serwera, w sposób niemożliwy do sfałszowania.

Moduł opiera się na dwóch prostych pojęciach:

• Krok: pytanie zadane klientowi, powiązane z produktem. Istnieją dwa typy: Wybór wizualny (klient klika opcję) oraz Tekst / grawer (klient wpisuje dowolny tekst).
• Opcja: możliwa odpowiedź kroku typu wybór wizualny, z wizualizacją (miniatura zdjęcia lub kolorowa pastylka), warstwą podglądu i wpływem na cenę.

Instalacja

1. W panelu administracyjnym PrestaShop otwórz Moduły → Menedżer modułów → Zainstaluj moduł.
2. Wgraj plik dfproductconfigurator.zip i kliknij Zainstaluj.
3. Pod Katalog pojawiają się dwie nowe zakładki: Konfigurator: Kroki oraz Konfigurator: Opcje.

Tworzenie kroku

1. Otwórz Katalog → Konfigurator: Kroki i kliknij Dodaj.
2. Wskaż produkt: wpisz co najmniej 3 znaki w polu wyszukiwania i kliknij wynik, ID produktu uzupełni się automatycznie.
3. Wybierz typ kroku: Wybór wizualny lub Tekst / grawer.
4. Wpisz etykietę w każdym języku (na przykład „Kolor”, „Grawer”, „Akcesorium”). To tekst wyświetlany w stepperze.
5. Zaznacz Obowiązkowy, jeśli klient musi odpowiedzieć na ten krok przed dodaniem do koszyka.
6. Ustaw pozycję, aby uporządkować kroki między sobą.

Pola specyficzne dla kroków grawerowania

Dla kroku typu Tekst / grawer pojawiają się dodatkowe pola:

• Maksymalna długość: dozwolona liczba znaków (walidowana także po stronie serwera).
• Wpływ na cenę: dopłata naliczana, gdy klient wpisze tekst (0 dla graweru bezpłatnego).
• Pozycja X / Y: pozycja tekstu na podglądzie, w procentach szerokości i wysokości obrazu (50 / 50 = środek).
• Rozmiar i kolor tekstu: rozmiar w pikselach i szesnastkowy kolor overlayu.
• Placeholder: tekst zachęty wyświetlany w polu, z możliwością tłumaczenia.

Tworzenie opcji kroku

1. Na liście kroków kliknij akcję Opcje przy danym kroku (albo otwórz Katalog → Konfigurator: Opcje).
2. Kliknij Dodaj i uzupełnij wielojęzyczną etykietę opcji.
3. Zdefiniuj jej wpływ na cenę netto: dodatni (dopłata), ujemny (rabat) lub zerowy (w cenie).
4. Wybierz wizualizację karty opcji: albo kolor szesnastkowy (wyświetlany jako okrągła pastylka), albo miniaturę zdjęcia (automatycznie skalowaną do 400 px).
5. W razie potrzeby wgraj przezroczystą warstwę PNG (do 1600 px): zostanie nałożona na zdjęcie produktu w złożonym podglądzie.
6. Zaznacz Domyślna, aby wstępnie wybrać tę opcję; moduł pilnuje, żeby na krok przypadała tylko jedna opcja domyślna.

Jak działa cena

Wpływy na cenę definiuje się netto, w domyślnej walucie sklepu. Na karcie produktu moduł przelicza je na walutę odwiedzającego i pokazuje brutto lub netto zależnie od grupy klienta, z sumą przeliczaną na bieżąco.

Wyświetlana suma jest wyłącznie orientacyjna. Na etapie koszyka rzeczywista dopłata jest naliczana przez natywny hook obliczania ceny PrestaShop, po stronie serwera, na podstawie konfiguracji zapisanej w bazie: przeliczenie waluty po kursie, zastosowanie VAT kontekstu klienta, zaokrąglenie do miejsc dziesiętnych waluty. Klient modyfikujący DOM lub żądania nie zmieni fakturowanej ceny.

Ścieżka klienta na karcie produktu

Blok konfiguratora wyświetla się automatycznie na karcie produktu (hook informacji dodatkowych), gdy tylko dla produktu istnieje co najmniej jeden aktywny krok. Klient:

1. nawiguje między krokami przez stepper (ukończone kroki są odhaczone);
2. klika swoje opcje lub wpisuje grawer, złożony podgląd i suma aktualizują się natychmiast;
3. klika Dodaj do koszyka: moduł waliduje kroki obowiązkowe, zapisuje konfigurację po stronie serwera, a następnie pozwala dodaniu do koszyka przebiec normalnie.

Jeśli obowiązkowy krok jest nieukończony, konfigurator otwiera się na tym kroku z czytelnym komunikatem, a dodanie do koszyka jest blokowane.

Koszyk, zamówienie i faktura

Każda zatwierdzona konfiguracja tworzy natywną personalizację PrestaShop: dwie różne konfiguracje tego samego produktu dają dwie osobne pozycje koszyka, każda ze swoją ceną. Czytelne podsumowanie (na przykład Kolor: Błękit oceanu · Grawer: Lea · Akcesorium: Bambusowy korek) pojawia się pod nazwą produktu w koszyku, zamówieniu, na fakturze i w szczegółach zamówienia w zapleczu, bez żadnych dodatkowych ustawień.

Przy zatwierdzeniu zamówienia konfiguracja jest archiwizowana w dedykowanej tabeli. Konfiguracje porzuconych koszyków są automatycznie czyszczone po 60 dniach.

Warianty, goście i wielowalutowość

• Warianty: konfigurator podąża za wybranym wariantem, podgląd jest przebudowywany, a wyświetlana cena bazowa to cena wariantu.
• Goście: koszyk jest tworzony automatycznie w razie potrzeby w momencie zapisu konfiguracji.
• Wielowalutowość: przeliczenie odbywa się po kursie sklepu, zarówno przy wyświetlaniu, jak i w obliczeniach serwerowych.

Deinstalacja i czyszczenie

Moduł sprząta po sobie:

• przy usunięciu produktu jego kroki, opcje i obrazy opcji są usuwane;
• przy deinstalacji tabele modułu są usuwane, a utworzone pola personalizacji zwalniane (liczniki produktowe są zmniejszane).

Rozwiązywanie problemów

Blok konfiguratora się nie wyświetla

• Sprawdź, czy co najmniej jeden aktywny krok jest powiązany z właściwym produktem (poprawny ID produktu).
• Wyczyść cache PrestaShop (Zaawansowane → Wydajność).
• Sprawdź, czy Twój motyw wywołuje hook displayProductAdditionalInfo (tak jest w motywie Classic i niemal wszystkich motywach).

Złożony podgląd jest przesunięty

Warstwa PNG nie ma tego samego kadru co zdjęcie główne. Wyeksportuj warstwę ponownie z tym samym współczynnikiem proporcji i tą samą pozycją produktu co obraz główny.

Dopłata nie pojawia się w koszyku

• Sprawdź, czy wybrana opcja rzeczywiście ma niezerowy wpływ na cenę.
• Cena koszyka jest przeliczana przez PrestaShop: wyczyść cache i przetestuj ponownie z nowym koszykiem.

Dwa identyczne dodania tworzą dwie pozycje

To oczekiwane zachowanie, jeśli konfiguracje się różnią. Jeśli są ściśle identyczne i dodane w tej samej sesji, moduł ponownie wykorzystuje tę samą personalizację i zwiększa ilość.