Konfigurator Produktu Krok po Kroku: kompletny przewodnik

Wprowadzenie

Konfigurator Produktu Krok po Kroku dodaje do karty produktu prowadzoną ścieżkę: klient wybiera opcje (rozmiar, podłoże, kolor, rama…), wpisuje tekst, przesyła plik, a cena aktualizuje się przy każdym wyborze. Dopłata jest liczona po stronie serwera i przenoszona przez natywną personalizację PrestaShop, więc trafia do koszyka, zamówienia i faktury.

Moduł z powodzeniem zastępuje kombinacje, gdy produkt łączy wiele opcji: nie powstaje żadna kombinacja, każda opcja ma własną cenę i wagę, a jeden konfigurator może obsłużyć cały katalog.

• Konfigurator: zestaw pól powiązany z jednym lub kilkoma produktami oraz w razie potrzeby z kategoriami.
• Pole: jeden krok ścieżki (lista, przyciski radio, próbki, miniatury, tekst, przesyłanie…).
• Opcja: wybór dostępny w polu, z ceną, wagą, indeksem i obrazem.

Instalacja i aktualizacja

1. W panelu otwórz Moduły → Menedżer modułów → Prześlij moduł i prześlij plik ZIP modułu.
2. Kliknij Konfiguruj, aby przejść do ustawień wyświetlania i danych demo.
3. Konfiguratorami zarządzasz w Moduły → Konfiguratory produktu.

Aby zaktualizować, prześlij po prostu nowy plik ZIP. Schemat bazy danych, hooki i pamięć podręczna aktualizują się automatycznie, także gdy pliki skopiowano ręcznie bez menedżera modułów. Istniejące konfiguratory są zachowywane.

Ustawienia wyświetlania

Strona Konfiguruj modułu zawiera ustawienia wspólne dla wszystkich konfiguratorów:

• Tryb wyświetlania: blok osadzony na karcie produktu (zalecany przy page builderze), przycisk „Konfiguruj” otwierający okno pełnoekranowe lub pełne zastąpienie karty produktu.
• Umiejscowienie: automatyczne (hook motywu displayProductAdditionalInfo) lub ręczne (sam umieszczasz konfigurator, patrz sekcja Creative Elements).
• Ukryj natywny przycisk koszyka motywu: zapobiega dodaniu do koszyka z pominięciem konfiguratora.
• Wybór ilości w konfiguratorze: w trybie osadzonym pokazuje ilość obok przycisku „Dodaj do koszyka” konfiguratora i ukrywa tę z motywu.
• Pokaż nazwę i opis konfiguratora: wyłącz, gdy tytuł i tekst produktu obsługuje już motyw lub page builder.
• Pokaż pasek kroków i Numeruj kroki: rząd etykiet nad polami i numery przed każdym tytułem można ukryć osobno.
• Po dodaniu do koszyka: okno ze szczegółami personalizacji, natywne okno motywu (moduł koszyka ps_shoppingcart) lub prosty komunikat pod przyciskiem.

Tworzenie konfiguratora

W Moduły → Konfiguratory produktu kliknij Nowy konfigurator. Na karcie produktu w panelu (stara strona produktu) przycisk „Utwórz konfigurator dla tego produktu” wstępnie wypełnia produkt.

Powiązane produkty i kategorie

• Powiązane produkty: wpisz nazwę, indeks lub ID i kliknij wynik. Dodaj tyle produktów, ile potrzeba; krzyżyk na etykiecie usuwa produkt.
• Powiązane kategorie: zaznacz kategorie, których wszystkie produkty mają otrzymać konfigurator. Filtr nad listą znajduje kategorię po nazwie. Opcja Uwzględnij podkategorie rozszerza powiązanie na całe drzewo.

Każdy produkt zachowuje własną cenę bazową. Jeśli produkt jest powiązany z kilkoma aktywnymi konfiguratorami, bezpośrednie powiązanie z produktem wygrywa z powiązaniem przez kategorię, a dalej decyduje najstarszy konfigurator. Ostrzeżenie wskazuje takie produkty.

Ustawienia ogólne

• Nazwa wewnętrzna (opcjonalnie): ułatwia odnalezienie konfiguratora na liście. Pozostawiona pusta, przyjmuje nazwę pierwszego powiązanego produktu. Na karcie produktu widoczna tylko przy włączonym odpowiednim ustawieniu.
• Aktywny: nieaktywny konfigurator nie pojawia się przy żadnym produkcie.
• Blokuj dodanie, jeśli nieprawidłowe: przycisk „Dodaj do koszyka” pozostaje wyłączony, dopóki brakuje wymaganego pola.
• Tryb ceny: cena produktu + opcje (przypadek ogólny) lub własna cena bazowa + opcje.

Pola

Kliknij Dodaj pole, wybierz jego typ, wpisz etykietę w każdym języku (wybór języka u góry formularza) i w razie potrzeby zaznacz Wymagane. Pod tytułem może pojawić się tekst pomocy.

Typy pól

• Lista rozwijana, Przyciski radio, Próbki kolorów, Miniatury obrazów: jeden wybór spośród opcji.
• Pola wyboru: kilka wyborów (wykończenia, opakowanie prezentowe…).
• Pole tekstowe, Obszar tekstu, Liczba, Data, Przesyłanie pliku: dowolne wpisanie. Jedna opcja „nośna” określa wtedy cenę (np. 0,20 € za znak).

Opcje

Każda opcja ma wielojęzyczną etykietę, wpływ na cenę i jego typ (kwota stała, procent ceny bazowej, za znak, za jednostkę, formuła), kolor dla próbek, miniaturę dla miniatur obrazów, wagę w kg, indeks, stan „domyślna” i dostępność. Niedostępna opcja pozostaje widoczna, ale wyszarzona.

Zmiana kolejności pól i opcji

Przeciągnij pole za uchwyt, aby zmienić kolejność kroków; przycisk Zwiń wszystko ułatwia to przy długim konfiguratorze. Opcje sortuje się tak samo, za ich uchwyt. Kolejność zapisuje się razem z konfiguratorem.

Pokaż tylko, jeśli…

Pole może pojawiać się tylko wtedy, gdy wybrano konkretną opcję innego pola. Przykład: pole „Rama” jest widoczne tylko po wybraniu „Wydruk w ramie” w polu „Rodzaj”. W bloku Pokaż tylko, jeśli… zaznacz opcję lub opcje wyzwalające (Ctrl lub Cmd + klik, aby wybrać kilka: pole pojawi się, gdy wybrana zostanie którakolwiek). Bez zaznaczenia pole jest zawsze widoczne.

Zależności łańcuchowe są obsługiwane: jeśli pole wyzwalające jest ukryte, pola od niego zależne również są ukryte. Ukryte pole nie wlicza się do ceny ani do zamówienia, nawet jeśli jest wymagane.

Link informacyjny (okno)

Każde pole może wyświetlać po prawej stronie tytułu link, np. „Przewodnik po materiałach” lub „Tabela rozmiarów”. Kliknięcie otwiera okno nad stroną.

• Tekst linku: wyświetlana etykieta, w każdym języku. Puste: brak linku.
• Treść okna: HTML (tekst, tabela, obrazy) oraz tagi {hook …} i {widget …}, wykonywane jak w widżecie Shortcode w Creative Elements. Dla bogatszego układu zaprojektuj okno jako zapisany szablon w Creative Elements i wklej jego shortcode.

Cena i waga

Wpływy wpisuje się netto w domyślnej walucie. Karta produktu pokazuje cenę bazową, sumę opcji i sumę brutto, aktualizowane przy każdym wyborze. Ta suma to tylko wyświetlanie: rzeczywista cena jest przeliczana po stronie serwera na podstawie wyborów klienta i przenoszona przez natywną personalizację PrestaShop. Zmiana strony lub żądań w przeglądarce nie zmienia ceny na fakturze.

PrestaShop dodaje wagę wybranych opcji do wagi koszyka. Przedziały wagowe Twoich przewoźników działają więc normalnie, a ceny opcji wliczają się do sumy, od której liczony jest próg darmowej dostawy.

Podgląd wizualny (opcjonalny)

W bloku Podgląd wizualny konfiguratora włącz podgląd i prześlij obraz tła (zalecany przezroczysty PNG). Każde pole może wtedy nakładać warstwę obrazu, barwić sylwetkę lub pokazywać tekst klienta w strefie rysowanej myszką. Klient może wybrać czcionkę, rozmiar i kolor tekstu, a kolory można powiązać z innym polem. Przy dodaniu do koszyka składany jest końcowy projekt i zapisywany z zamówieniem.

Podgląd wyłączony: żaden podgląd się nie wyświetla, obrazy motywu lub page buildera nigdy nie są zmieniane, a ustawienia podglądu pól są ukryte w edytorze (pozostają zapisane, jeśli ponownie włączysz podgląd).

Creative Elements i page buildery

1. W ustawieniach modułu wybierz tryb Osadzony i umiejscowienie Ręcznie.
2. Wyłącz podgląd w konfiguratorze: obrazy na karcie pozostają te z page buildera.
3. W szablonie karty produktu w Creative Elements dodaj widżet Moduły, wybierz moduł DataFirefly Konfigurator i wpisz hook displayDfProductConfigurator. Możesz też użyć widżetu Shortcode z {hook h='displayDfProductConfigurator'}.
4. Umieść widżet w wybranym miejscu, np. pod tytułem i ceną. Przy produktach bez konfiguratora widżet nic nie wyświetla.
5. W razie potrzeby wyłącz numerację, pasek kroków i nazwę konfiguratora, a następnie włącz wbudowany wybór ilości, jeśli na karcie nie ma widżetu „Dodaj do koszyka” z Creative Elements.

W motywie ten sam hook wywołuje się przez {hook h='displayDfProductConfigurator' product=$product}. Konfigurator jest wyświetlany tylko raz na stronie.

Po dodaniu do koszyka

Przy ustawieniu domyślnym otwiera się okno: zdjęcie produktu, cena jednostkowa, szczegóły każdego wyboru (np. Rodzaj: Wydruk w ramie, Rozmiar: 40 × 60 cm, Rama: Orzech), ilość, a następnie liczba artykułów, suma częściowa, dostawa i suma koszyka, z przyciskami Kontynuuj zakupy i Przejdź do kasy. Szablon views/templates/front/cart_modal.tpl można nadpisać w motywie.

Ustawienie „Natywne okno motywu” używa okna modułu koszyka, które nie pokazuje szczegółów personalizacji. Ustawienie „Komunikat” wyświetla link do koszyka pod przyciskiem.

Koszyk, zamówienie i produkcja

Każda zatwierdzona konfiguracja tworzy natywną personalizację PrestaShop: dwie różne konfiguracje dają dwie osobne linie koszyka. Czytelne podsumowanie (Rozmiar: 40 × 60 cm · Rodzaj: Wydruk w ramie · Rama: Orzech) widać w koszyku, zamówieniu, fakturze i panelu. Szczegóły zamówienia w panelu zawierają panel Personalizacje z podsumowaniem pole po polu, plikami klienta i, przy włączonym podglądzie, końcowym projektem.

W motywie Classic zmiana ilości przeładowuje część karty produktu przez AJAX: konfigurator pozostaje na miejscu i zachowuje wybory klienta.

Duplikowanie konfiguratora

Na liście otwórz menu wiersza i kliknij Duplikuj (przycisk jest też na dole edytora). Kopia przejmuje ustawienia, pola, opcje, tłumaczenia i obrazy. Warunki „Pokaż tylko, jeśli…” i powiązane kolory są przepinane na skopiowane pola. Kopia powstaje jako nieaktywna i bez powiązanych produktów i kategorii, aby nie zastąpiła oryginału: powiąż swoje produkty, a potem ją aktywuj.

Dane demo

Strona Konfiguruj oferuje trzy importy, które można powtarzać bez duplikatów:

• Kubek, wazon, koszulka: składany podgląd, grawerowany tekst, kolory zależne od kształtu, formuła ceny, przesyłanie pliku.
• Haft (naszywka i czapka): kolory powiązane między kilkoma elementami.
• Obraz ze zdjęcia (dekoracja ścienna): podgląd wyłączony, link „Przewodnik po materiałach”, rozmiary z wagą, rodzaj podłoża jako miniatury, zdjęcie klienta, kolor tła, rama widoczna tylko dla wydruku w ramie.

Rozwiązywanie problemów

Konfigurator się nie wyświetla

• Sprawdź, czy konfigurator jest aktywny i powiązany z produktem, bezpośrednio lub przez kategorię.
• Przy ręcznym umiejscowieniu sprawdź, czy hook displayDfProductConfigurator jest umieszczony w szablonie karty produktu.
• Przy automatycznym umiejscowieniu sprawdź, czy motyw wywołuje displayProductAdditionalInfo (motyw Classic to robi).
• Wyczyść pamięć podręczną (Zaawansowane → Wydajność).

Opcji brakuje w „Pokaż tylko, jeśli…”

Nie jest jeszcze zapisana. Zapisz konfigurator i wróć do pola.

Link informacyjny się nie wyświetla

Tekst linku i treść okna muszą być wypełnione w wyświetlanym języku.

Przycisk „Dodaj do koszyka” pozostaje szary

Brakuje widocznego pola wymaganego: komunikat pod sumą wskazuje które. Wyłącz „Blokuj dodanie, jeśli nieprawidłowe”, aby przycisk był aktywny, a błędy pojawiały się po kliknięciu.

Koszty wysyłki nie zmieniają się wraz z opcjami

Sprawdź, czy opcje mają wagę i czy przewoźnik nalicza opłaty według wagi (a nie ceny).

Historia wersji

• 1.3.0: PrestaShop 1.7.7 i 1.7.8, wiele produktów i kategorii na konfigurator, duplikowanie, warunki wybierane z listy opcji, linki informacyjne w oknie, dedykowany hook dla page builderów, okno koszyka, ustawienia wyświetlania, przeciągnij i upuść, demo obrazu ze zdjęcia.
• 1.2.1: podgląd identyczny z końcowym projektem, przetłumaczone komunikaty frontu, edytor stref z poprawnymi proporcjami.
• 1.2.0: powiązane kolory, przebarwianie grafik, dema jednym kliknięciem, zawsze widoczny podgląd.
• 1.1.0: czcionka, rozmiar i kolor do wyboru przez klienta, strefy rozmieszczenia myszką, końcowy projekt i panel zamówienia, trzy tryby wyświetlania.
• 1.0.0: pierwsza wersja.