Productconfigurator in Stappen: volledige gids

Overzicht

DF Product Configurator verandert een PrestaShop-productpagina in een begeleide configurator in stappen: de klant kiest een kleur, voegt een gravure toe, selecteert een accessoire, ziet het samengestelde resultaat direct op de productfoto, en de bijbehorende meerprijs wordt aan de winkelwagen toegepast, aan serverzijde en niet te vervalsen.

De module steunt op twee eenvoudige begrippen:

• Stap: een vraag aan de klant, gekoppeld aan een product. Er bestaan twee typen: Visuele keuze (de klant klikt op een optie) en Tekst / gravure (de klant voert vrije tekst in).
• Optie: een mogelijk antwoord op een stap van het type visuele keuze, met zijn visual (fotominiatuur of kleurbolletje), zijn voorbeeldlaag en zijn prijsimpact.

Installatie

1. Open in de PrestaShop-backoffice Modules → Modulebeheer → Een module installeren.
2. Upload het bestand dfproductconfigurator.zip en klik op Installeren.
3. Twee nieuwe tabbladen verschijnen onder Catalogus: Configurator, Stappen en Configurator, Opties.

Een stap aanmaken

1. Open Catalogus → Configurator, Stappen en klik op Toevoegen.
2. Vul het product in: typ minstens 3 tekens in het zoekveld en klik op een resultaat, het product-ID wordt automatisch ingevuld.
3. Kies het staptype: Visuele keuze of Tekst / gravure.
4. Voer het label in elke taal in (bijvoorbeeld “Kleur”, “Gravure”, “Accessoire”). Dit is de tekst die in de stepper wordt getoond.
5. Vink Verplicht aan als de klant deze stap moet beantwoorden voordat hij aan de winkelwagen kan toevoegen.
6. Stel de positie in om de stappen onderling te ordenen.

Specifieke velden voor gravurestappen

Bij een stap van het type Tekst / gravure verschijnen extra velden:

• Maximale lengte: aantal toegestane tekens (ook aan serverzijde gevalideerd).
• Prijsimpact: toeslag die wordt toegepast zodra de klant tekst invoert (0 voor een gratis gravure).
• Positie X / Y: positie van de tekst op het voorbeeld, als percentage van de breedte en hoogte van de afbeelding (50 / 50 = midden).
• Grootte en kleur van de tekst: grootte in pixels en hexadecimale kleur van de overlay.
• Placeholder: invoertekst die in het veld wordt getoond, vertaalbaar.

De opties van een stap aanmaken

1. Klik in de lijst met stappen op de actie Opties van de betreffende stap (of open Catalogus → Configurator, Opties).
2. Klik op Toevoegen en vul het meertalige label van de optie in.
3. Bepaal de prijsimpact exclusief btw: positief (toeslag), negatief (korting) of nul (inbegrepen).
4. Kies de visual van de optiekaart: ofwel een hexadecimale kleur (getoond als rond bolletje), ofwel een fotominiatuur (automatisch verkleind naar 400 px).
5. Upload indien nodig een transparante PNG-laag (tot 1600 px): deze wordt in het samengestelde voorbeeld op de productfoto gestapeld.
6. Vink Standaard aan om deze optie vooraf te selecteren, één standaardoptie per stap, de module regelt dit.

Hoe de prijs werkt

De prijsimpacten worden gedefinieerd exclusief btw, in de standaardvaluta van de winkel. Op de productpagina rekent de module ze om naar de valuta van de bezoeker en toont ze inclusief of exclusief btw naargelang de klantgroep, met een direct herberekend totaal.

Dit getoonde totaal is puur indicatief. Op winkelwagenniveau wordt de echte toeslag toegepast door de native prijsberekeningshook van PrestaShop, aan serverzijde, op basis van de in de database opgeslagen configuratie: valutaomrekening tegen de wisselkoers, toepassing van de btw van de klantcontext, afronding op de decimalen van de valuta. Een klant die de DOM of de requests aanpast, kan de gefactureerde prijs niet wijzigen.

Klanttraject op de productpagina

Het configuratorblok verschijnt automatisch op de productpagina (hook voor aanvullende informatie) zodra er minstens één actieve stap voor het product bestaat. De klant:

1. navigeert tussen de stappen via de stepper (voltooide stappen zijn afgevinkt);
2. klikt op zijn opties of voert zijn gravure in, het samengestelde voorbeeld en het totaal worden onmiddellijk bijgewerkt;
3. klikt op In winkelwagen: de module valideert de verplichte stappen, slaat de configuratie aan serverzijde op en laat het toevoegen aan de winkelwagen daarna normaal doorgaan.

Is een verplichte stap onvolledig, dan opent de configurator op de betreffende stap met een duidelijke melding, en wordt het toevoegen aan de winkelwagen geblokkeerd.

Winkelwagen, bestelling en factuur

Elke gevalideerde configuratie maakt een native PrestaShop-personalisatie aan: twee verschillende configuraties van hetzelfde product geven twee aparte winkelwagenregels, elk met zijn eigen prijs. De leesbare samenvatting (bijvoorbeeld Kleur: Oceaanblauw · Gravure: Léa · Accessoire: Bamboe dop) verschijnt onder de productnaam in de winkelwagen, de bestelling, de factuur en de besteldetails van de backoffice, zonder enige extra instelling.

Bij het bevestigen van de bestelling wordt de configuratie gearchiveerd in een aparte tabel. Configuraties van verlaten winkelwagens worden na 60 dagen automatisch opgeschoond.

Combinaties, gasten en multi-valuta

• Combinaties: de configurator volgt de geselecteerde combinatie, het voorbeeld wordt opnieuw opgebouwd en de getoonde basisprijs is die van de combinatie.
• Gastklanten: indien nodig wordt automatisch een winkelwagen aangemaakt op het moment dat de configuratie wordt opgeslagen.
• Multi-valuta: de omrekening gebeurt tegen de wisselkoers van de winkel, zowel bij de weergave als bij de serverberekening.

De-installatie en opschoning

De module ruimt achter zich op:

• bij het verwijderen van een product worden zijn stappen, opties en optieafbeeldingen verwijderd;
• bij de de-installatie worden de tabellen van de module verwijderd en worden de aangemaakte personalisatievelden vrijgegeven (de producttellers worden verlaagd).

Probleemoplossing

Het configuratorblok wordt niet weergegeven

• Controleer of minstens één actieve stap aan het juiste product is gekoppeld (correct product-ID).
• Leeg de PrestaShop-cache (Geavanceerde instellingen → Prestaties).
• Controleer of uw thema de hook displayProductAdditionalInfo aanroept (dat is het geval bij het Classic-thema en vrijwel alle thema’s).

Het samengestelde voorbeeld is verschoven

De PNG-laag heeft niet dezelfde uitsnede als de omslagfoto. Exporteer de laag opnieuw met dezelfde verhouding en dezelfde productpositie als de hoofdafbeelding.

De toeslag verschijnt niet in de winkelwagen

• Controleer of de geselecteerde optie daadwerkelijk een prijsimpact ongelijk aan nul heeft.
• De winkelwagenprijs wordt door PrestaShop herberekend: leeg de cache en test opnieuw met een nieuwe winkelwagen.

Twee identieke toevoegingen maken twee regels aan

Dat is het verwachte gedrag als de configuraties verschillen. Zijn ze strikt identiek en in dezelfde sessie toegevoegd, dan hergebruikt de module dezelfde personalisatie en verhoogt hij het aantal.