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ść.

Nowości w wersjach 1.1.0 i 1.2.0

Czcionka, rozmiar i kolor wybierane przez klienta (1.1.0)

W ustawieniach pola tekstowego włącz „Klient wybiera czcionkę” i zaznacz oferowane czcionki spośród 26 z wbudowanego katalogu czcionek Google i systemowych, albo zadeklaruj czcionki motywu przez @font-face ze źródłem „Dostarczane przez motyw”. Włącz analogicznie wybór rozmiaru (granice min/maks) i koloru (jedna linia na kolor, w formacie Nazwa|#hex). Pole wprowadzania i podgląd natychmiast przyjmują wybrany styl, każda wartość jest walidowana po stronie serwera względem twoich list, a podsumowanie zamówienia zawiera czcionkę, rozmiar i kolor (Lea · Great Vibes 34px Złoto).

Obszary umieszczenia rysowane myszą (1.1.0)

Gdy pole tekstowe lub pole przesyłania pliku ma efekt podglądu, blok „Obszar umieszczenia” pokazuje podgląd produktu: przeciągnij prostokąt, aby go przesunąć, pociągnij za narożne uchwyty, aby zmienić rozmiar, i rozpoznaj obszary innych pól wyświetlane jako duchy z numerem kroku. Obraz tła pojawia się w edytorze od razu po wybraniu, jeszcze przed zapisaniem formularza. Selektor „Klient może przesuwać” pozwala też zablokować pozycję: tekst lub grafika są wtedy renderowane na środku obszaru, bez możliwości przeciągania przez klienta.

Finalna wizualizacja i panel zamówienia (1.1.0)

Przy dodaniu do koszyka moduł składa finalną wizualizację personalizacji (warstwy, zabarwienie, przesłana grafika, stylizowany tekst), następnie waliduje ją i ponownie koduje po stronie serwera. Szczegóły zamówienia w zapleczu zyskują panel „Personalizacje”: finalna wizualizacja do pobrania, podsumowanie pole po polu i przesłane pliki klienta w oryginalnej jakości.

Tryby wyświetlania (1.1.0)

W konfiguracji modułu wybierz tryb wyświetlania: blok wbudowany w stronę produktu (domyślny), przycisk „Konfiguruj” otwierający popup pełnoekranowy lub całkowite zastąpienie strony produktu z własnym wyborem ilości. Opcja ukrywa natywny przycisk koszyka motywu, aby uniemożliwić dodanie bez konfiguracji.

Kolory powiązane (1.2.0)

Pole tekstowe może przyjąć kolor opcji wybranej w innym polu („Kolor powiązany z polem” w jego ustawieniach), a warstwę obrazu pola wyboru można zabarwić w ten sam sposób: PNG opcji działa wtedy jak maska wypełniana powiązanym kolorem. Jeden wybór klienta, na przykład kolor haftu, steruje w ten sposób obwódką, symbolem i tekstem naraz, w podglądzie na żywo, w podsumowaniu i w finalnej wizualizacji. Kolor powiązany ma pierwszeństwo przed paletą klienta i jest walidowany po stronie serwera.

Podgląd zawsze widoczny (1.2.0)

Na desktopie kolumna podglądu jest przyklejona: pozostaje przypięta u góry ekranu podczas przewijania pól konfiguracji, przez całą wysokość konfiguratora. Na urządzeniach mobilnych i wąskich ekranach podgląd staje się kompaktowym paskiem przypiętym u góry strony, zawsze widocznym podczas wpisywania. Nie potrzeba żadnych ustawień ani modyfikacji motywu.

Dema jednym kliknięciem (1.2.0)

Strona konfiguracji modułu oferuje dwa przyciski importu: demo kubek / wazon / koszulka oraz demo haftu (naszywka + czapka), które ilustruje kolory powiązane. Importy można uruchamiać ponownie bez duplikatów, a obrazy demo są generowane automatycznie.