Configurateur de Produit par Étapes — Guide complet

Présentation

DF Product Configurator transforme une fiche produit PrestaShop en configurateur guidé par étapes : le client choisit une couleur, ajoute une gravure, sélectionne un accessoire, voit le résultat composé en temps réel sur la photo du produit, et le supplément de prix correspondant est appliqué au panier — côté serveur, de manière infalsifiable.

Le module repose sur deux notions simples :

• Étape : une question posée au client, rattachée à un produit. Deux types existent : Choix visuel (le client clique sur une option) et Texte / gravure (le client saisit un texte libre).
• Option : une réponse possible d’une étape de type choix visuel, avec son visuel (vignette photo ou pastille de couleur), son calque d’aperçu et son impact prix.

Installation

1. Dans le back-office PrestaShop, ouvrez Modules → Gestionnaire de modules → Installer un module.
2. Téléversez le fichier dfproductconfigurator.zip puis cliquez sur Installer.
3. Deux nouveaux onglets apparaissent sous Catalogue : Configurateur — Étapes et Configurateur — Options.

Créer une étape

1. Ouvrez Catalogue → Configurateur — Étapes puis cliquez sur Ajouter.
2. Renseignez le produit : tapez au moins 3 caractères dans le champ de recherche et cliquez sur un résultat — l’ID produit se remplit automatiquement.
3. Choisissez le type d’étape : Choix visuel ou Texte / gravure.
4. Saisissez le libellé dans chaque langue (par exemple « Couleur », « Gravure », « Accessoire »). C’est le texte affiché dans le stepper.
5. Cochez Obligatoire si le client doit répondre à cette étape avant de pouvoir ajouter au panier.
6. Réglez la position pour ordonner les étapes entre elles.

Champs spécifiques aux étapes de gravure

Pour une étape de type Texte / gravure, des champs supplémentaires apparaissent :

• Longueur maximale : nombre de caractères autorisés (validé côté serveur également).
• Impact prix : supplément appliqué dès que le client saisit un texte (0 pour une gravure gratuite).
• Position X / Y : position du texte sur l’aperçu, en pourcentage de la largeur et de la hauteur de l’image (50 / 50 = centre).
• Taille et couleur du texte : taille en pixels et couleur hexadécimale de l’overlay.
• Placeholder : texte d’invite affiché dans le champ, traduisible.

Créer les options d’une étape

1. Dans la liste des étapes, cliquez sur l’action Options de l’étape concernée (ou ouvrez Catalogue → Configurateur — Options).
2. Cliquez sur Ajouter et renseignez le libellé multilingue de l’option.
3. Définissez son impact prix hors taxes : positif (supplément), négatif (remise) ou nul (inclus).
4. Choisissez le visuel de la carte d’option : soit une couleur hexadécimale (affichée en pastille ronde), soit une vignette photo (redimensionnée automatiquement à 400 px).
5. Téléversez si besoin un calque PNG transparent (jusqu’à 1600 px) : il sera empilé sur la photo du produit dans l’aperçu composé.
6. Cochez Par défaut pour pré-sélectionner cette option — une seule option par défaut par étape, le module s’en charge.

Fonctionnement du prix

Les impacts prix sont définis hors taxes, dans la devise par défaut de la boutique. Sur la fiche produit, le module les convertit dans la devise du visiteur et les affiche TTC ou HT selon le groupe client, avec un total recalculé en direct.

Ce total affiché est purement indicatif. Au moment du panier, la surcharge réelle est appliquée par le hook de calcul de prix natif de PrestaShop, côté serveur, à partir de la configuration enregistrée en base : conversion de devise au taux de change, application de la TVA du contexte client, arrondi aux décimales de la devise. Un client qui modifie le DOM ou les requêtes ne peut pas changer le prix facturé.

Parcours client sur la fiche produit

Le bloc configurateur s’affiche automatiquement sur la fiche produit (hook d’informations additionnelles) dès qu’au moins une étape active existe pour le produit. Le client :

1. navigue entre les étapes via le stepper (les étapes complétées sont cochées) ;
2. clique sur ses options ou saisit sa gravure — l’aperçu composé et le total se mettent à jour instantanément ;
3. clique sur Ajouter au panier : le module valide les étapes obligatoires, enregistre la configuration côté serveur, puis laisse l’ajout au panier se poursuivre normalement.

Si une étape obligatoire est incomplète, le configurateur s’ouvre sur l’étape concernée avec un message explicite, et l’ajout au panier est bloqué.

Panier, commande et facture

Chaque configuration validée crée une personnalisation PrestaShop native : deux configurations différentes du même produit donnent deux lignes de panier distinctes, chacune avec son prix. Le résumé lisible (par exemple Couleur : Bleu océan · Gravure : Léa · Accessoire : Bouchon bambou) apparaît sous le nom du produit dans le panier, la commande, la facture et le détail de commande du back-office — sans aucun réglage supplémentaire.

À la validation de la commande, la configuration est archivée dans une table dédiée. Les configurations de paniers abandonnés sont purgées automatiquement après 60 jours.

Déclinaisons, invités et multi-devise

• Déclinaisons : le configurateur suit la déclinaison sélectionnée — l’aperçu se reconstruit et le prix de base affiché est celui de la déclinaison.
• Clients invités : un panier est créé automatiquement si nécessaire au moment de l’enregistrement de la configuration.
• Multi-devise : la conversion se fait au taux de change de la boutique, à l’affichage comme au calcul serveur.

Désinstallation et nettoyage

Le module nettoie derrière lui :

• à la suppression d’un produit, ses étapes, options et images d’options sont supprimées ;
• à la désinstallation, les tables du module sont supprimées et les champs de personnalisation créés sont libérés (les compteurs produit sont décrémentés).

Dépannage

Le bloc configurateur ne s’affiche pas

• Vérifiez qu’au moins une étape active est rattachée au bon produit (ID produit correct).
• Videz le cache PrestaShop (Paramètres avancés → Performances).
• Vérifiez que votre thème appelle bien le hook displayProductAdditionalInfo (c’est le cas du thème Classic et de la quasi-totalité des thèmes).

L’aperçu composé est décalé

Le calque PNG n’a pas le même cadrage que la photo de couverture. Ré-exportez le calque avec le même ratio et la même position du produit que l’image principale.

Le supplément n’apparaît pas dans le panier

• Vérifiez que l’option sélectionnée porte bien un impact prix non nul.
• Le prix du panier est recalculé par PrestaShop : videz le cache et re-testez avec un panier neuf.

Deux ajouts identiques créent deux lignes

C’est le comportement attendu si les configurations diffèrent. Si elles sont strictement identiques et ajoutées dans la même session, le module réutilise la même personnalisation et incrémente la quantité.