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.

Nieuw in versies 1.1.0 en 1.2.0

Lettertype, grootte en kleur naar keuze van de klant (1.1.0)

Activeer in de instellingen van een tekstveld “De klant kiest het lettertype” en vink de aangeboden lettertypen aan uit de ingebouwde catalogus van 26 Google- en systeemlettertypen, of declareer themalettertypen via @font-face met de bron “Geleverd door het thema”. Activeer op dezelfde manier de keuze van de grootte (min/max-grenzen) en de kleur (één regel per kleur, in het formaat Naam|#hex). Het invoerveld en het voorbeeld nemen direct de gekozen stijl over, elke waarde wordt op de server gevalideerd tegen uw lijsten, en de bestelsamenvatting bevat lettertype, grootte en kleur (Lea · Great Vibes 34px Goud).

Plaatsingszones met de muis (1.1.0)

Wanneer een tekst- of uploadveld een voorbeeldeffect draagt, toont het blok “Plaatsingszone” het productvoorbeeld: sleep de rechthoek om hem te verplaatsen, trek aan de hoekgrepen om hem te schalen, en herken de zones van de andere velden als schimmen met hun stapnummer. De achtergrondafbeelding verschijnt in de editor zodra ze geselecteerd is, nog vóór het opslaan van het formulier. De selector “De klant kan verplaatsen” laat ook toe de positie te vergrendelen: de tekst of afbeelding wordt dan in het midden van de zone gerenderd, zonder slepen door de klant.

Definitieve visual en bestelpaneel (1.1.0)

Bij het toevoegen aan de winkelwagen stelt de module de definitieve visual van de personalisatie samen (lagen, tint, geüploade afbeelding, gestileerde tekst), valideert die en codeert die opnieuw op de server. Het besteldetail in de backoffice krijgt een paneel “Personalisaties”: downloadbare definitieve visual, samenvatting veld per veld en de geüploade klantbestanden in originele kwaliteit.

Weergavemodi (1.1.0)

Kies in de moduleconfiguratie de weergavemodus: blok ingebed in de productpagina (standaard), een knop “Samenstellen” die een schermvullende popup opent, of de volledige vervanging van de productpagina met een eigen aantalkiezer. Een optie verbergt de native winkelwagenknop van het thema om toevoegen zonder configuratie te voorkomen.

Gekoppelde kleuren (1.2.0)

Een tekstveld kan de kleur overnemen van de optie gekozen in een ander veld (“Kleur gekoppeld aan een veld” in zijn instellingen), en de afbeeldingslaag van een keuzeveld kan op dezelfde manier worden getint: de PNG van de optie fungeert dan als masker gevuld met de gekoppelde kleur. Eén klantkeuze, bijvoorbeeld de borduurkleur, stuurt zo de rand, het symbool en de tekst tegelijk aan, in het live voorbeeld, de samenvatting en de definitieve visual. De gekoppelde kleur heeft voorrang op het klantenpalet en wordt op de server gevalideerd.

Altijd zichtbaar voorbeeld (1.2.0)

Op desktop is de voorbeeldkolom sticky: ze blijft bovenaan het scherm vastgezet terwijl de configuratievelden scrollen, over de volledige hoogte van de configurator. Op mobiel en smalle schermen wordt het voorbeeld een compacte balk die bovenaan de pagina wordt vastgezet, altijd zichtbaar tijdens het typen. Geen instelling of thema-aanpassing nodig.

Demo’s met één klik (1.2.0)

De configuratiepagina van de module biedt twee importknoppen: de demo mok / vaas / t-shirt en de borduurdemo (patch + muts), die de gekoppelde kleuren illustreert. De imports kunnen zonder duplicaten opnieuw worden uitgevoerd en de demo-afbeeldingen worden automatisch gegenereerd.