Configurateur de Produit par Étapes : guide complet

Présentation

Le Configurateur de Produit par Étapes ajoute sur la fiche produit un parcours guidé : le client choisit ses options (taille, support, couleur, cadre…), saisit un texte, envoie un fichier, et le prix se met à jour à chaque choix. Le supplément est calculé côté serveur et porté par une personnalisation native de PrestaShop : il suit le panier, la commande et la facture.

Le module remplace avantageusement les déclinaisons quand un produit combine beaucoup d’options : aucune déclinaison n’est créée, chaque option porte son prix et son poids, et un même configurateur peut servir tout un catalogue.

• Configurateur : un ensemble de champs, lié à un ou plusieurs produits et, si besoin, à des catégories.
• Champ : une étape du parcours (liste, boutons radio, pastilles, vignettes, texte, upload…).
• Option : un choix proposé dans un champ, avec son prix, son poids, sa référence et son visuel.

Installation et mise à jour

1. Dans le back-office, ouvrez Modules → Gestionnaire de modules → Installer un module et téléversez le ZIP du module.
2. Cliquez sur Configurer pour accéder aux réglages d’affichage et aux données de démonstration.
3. Les configurateurs se gèrent dans Modules → Configurateurs produit.

Pour mettre à jour, téléversez simplement le nouveau ZIP. Le schéma de la base, les hooks et les caches sont mis à jour automatiquement, y compris si les fichiers ont été copiés à la main sans passer par le gestionnaire de modules. Les configurateurs existants sont conservés.

Réglages d’affichage

La page Configurer du module regroupe les réglages communs à tous les configurateurs :

• Mode d’affichage : bloc intégré à la fiche produit (recommandé avec un page builder), bouton « Configurer » ouvrant une popup plein écran, ou remplacement complet de la fiche produit.
• Emplacement : automatique (hook displayProductAdditionalInfo du thème) ou manuel (vous placez le configurateur vous-même, voir la section Creative Elements).
• Masquer le bouton panier natif du thème : évite un ajout au panier sans passer par le configurateur.
• Sélecteur de quantité dans le configurateur : en mode intégré, affiche la quantité à côté du bouton « Ajouter au panier » du configurateur et masque celle du thème.
• Afficher le nom et la description du configurateur : à désactiver quand le titre et le texte du produit sont déjà gérés par le thème ou le page builder.
• Afficher la barre des étapes et Numéroter les étapes : la rangée de pastilles au-dessus des champs et les numéros devant chaque titre peuvent être masqués séparément.
• Après l’ajout au panier : popup avec le détail de la personnalisation, popup native du thème (module Panier ps_shoppingcart), ou simple message sous le bouton.

Créer un configurateur

Dans Modules → Configurateurs produit, cliquez sur Nouveau configurateur. Depuis la fiche d’un produit (ancienne page produit), le bouton « Créer un configurateur pour ce produit » pré-remplit le produit.

Produits et catégories liés

• Produits liés : tapez un nom, une référence ou un ID, puis cliquez sur le résultat. Ajoutez autant de produits que nécessaire ; la croix d’une puce retire le produit.
• Catégories liées : cochez les catégories dont tous les produits doivent recevoir le configurateur. Le filtre au-dessus de la liste retrouve une catégorie par son nom. L’option Inclure les sous-catégories étend le lien à toute l’arborescence.

Chaque produit garde son propre prix de base. Si un produit est lié à plusieurs configurateurs actifs, le lien direct au produit l’emporte sur le lien par catégorie, puis le configurateur le plus ancien. Un avertissement signale les produits concernés.

Réglages généraux

• Nom interne (optionnel) : sert à retrouver le configurateur dans la liste. Laissé vide, il prend le nom du premier produit lié. Il n’est affiché sur la fiche produit que si le réglage correspondant est actif.
• Actif : un configurateur inactif n’apparaît sur aucun produit.
• Bloquer l’ajout si invalide : le bouton « Ajouter au panier » reste désactivé tant qu’un champ obligatoire n’est pas rempli.
• Mode de prix : prix du produit + options (cas général), ou prix de base personnalisé + options.

Les champs

Cliquez sur Ajouter un champ, choisissez son type, saisissez son libellé dans chaque langue (sélecteur de langue en haut du formulaire) et cochez Obligatoire si besoin. Un texte d’aide peut s’afficher sous le titre.

Types de champs

• Liste déroulante, Boutons radio, Pastilles couleur, Vignettes image : un choix parmi des options.
• Cases à cocher : plusieurs choix possibles (finitions, emballage cadeau…).
• Champ texte, Zone de texte, Nombre, Date, Upload de fichier : saisie libre. Une seule option « porteuse » définit alors le tarif (par exemple 0,20 € par caractère).

Options

Chaque option porte un libellé multilingue, un impact prix et son type (montant fixe, pourcentage du prix de base, par caractère, par unité, formule), une couleur pour les pastilles, une vignette pour les vignettes image, un poids en kg, une référence, l’état « par défaut » et la disponibilité. Une option indisponible reste visible mais grisée.

Réordonner les champs et les options

Glissez un champ par sa poignée pour changer l’ordre des étapes ; le bouton Tout replier rend l’opération plus confortable sur un long configurateur. Les options se réordonnent de la même façon avec leur poignée. L’ordre est enregistré avec le configurateur.

Afficher seulement si…

Un champ peut n’apparaître que lorsqu’une option précise d’un autre champ est choisie. Exemple : le champ « Cadre » ne s’affiche que si « Tirage encadré » est choisi dans « Type ». Dans le bloc Afficher seulement si…, sélectionnez la ou les options déclencheuses (Ctrl ou Cmd + clic pour en choisir plusieurs : le champ s’affiche si l’une d’elles est choisie). Aucune sélection : le champ est toujours affiché.

Les dépendances en chaîne sont gérées : si un champ déclencheur est masqué, les champs qui dépendent de lui le sont aussi. Un champ masqué n’entre ni dans le prix ni dans la commande, même s’il est obligatoire.

Lien d’information (fenêtre)

Chaque champ peut afficher, à droite de son titre, un lien comme « Guide des matières » ou « Guide des tailles ». Un clic ouvre une fenêtre par-dessus la page.

• Texte du lien : le libellé affiché, dans chaque langue. Vide : pas de lien.
• Contenu de la fenêtre : du HTML (texte, tableau, images) et les balises {hook …} et {widget …}, exécutées comme dans le widget Shortcode de Creative Elements. Pour une mise en page riche, créez la fenêtre comme modèle enregistré dans Creative Elements et collez son shortcode.

Prix et poids

Les impacts sont saisis hors taxes dans la devise par défaut. La fiche produit affiche le prix de base, le total des options et le total TTC, mis à jour à chaque choix. Ce total n’est qu’un affichage : le prix réel est recalculé côté serveur à partir des choix du client, puis porté par la personnalisation native PrestaShop. Modifier la page ou les requêtes dans le navigateur ne change pas le prix facturé.

Le poids des options choisies est ajouté au poids du panier par PrestaShop. Les tranches de poids de vos transporteurs s’appliquent donc normalement, et le prix des options compte dans le total utilisé pour le seuil de livraison gratuite.

Aperçu visuel (optionnel)

Dans le bloc Prévisualisation visuelle du configurateur, activez l’aperçu et chargez une image de fond (PNG transparent conseillé). Chaque champ peut alors poser un calque image, teinter la silhouette ou afficher le texte du client dans une zone que vous dessinez à la souris. Le client peut choisir la police, la taille et la couleur de son texte, et les couleurs peuvent être liées à un autre champ. À l’ajout au panier, le visuel final est composé et enregistré avec la commande.

Prévisualisation désactivée : aucun aperçu n’est affiché, les images du thème ou du page builder ne sont jamais modifiées, et les réglages d’aperçu des champs sont masqués dans l’éditeur (ils restent enregistrés si vous réactivez l’aperçu).

Creative Elements et page builders

1. Dans les réglages du module, choisissez le mode Intégré et l’emplacement Manuel.
2. Désactivez la prévisualisation dans le configurateur : les images de la fiche restent celles du page builder.
3. Dans le modèle de fiche produit de Creative Elements, ajoutez un widget Modules, choisissez le module DataFirefly Configurateur et saisissez le hook displayDfProductConfigurator. Vous pouvez aussi utiliser un widget Shortcode avec {hook h='displayDfProductConfigurator'}.
4. Placez ce widget à l’endroit voulu, par exemple sous le titre et le prix. Sur les produits sans configurateur, le widget n’affiche rien.
5. Désactivez au besoin la numérotation, la barre des étapes et le nom du configurateur, puis activez le sélecteur de quantité intégré si le widget « Ajouter au panier » de Creative Elements n’est pas présent sur la fiche.

Dans un thème, le même hook s’appelle avec {hook h='displayDfProductConfigurator' product=$product}. Le configurateur n’est rendu qu’une fois par page.

Après l’ajout au panier

Avec le réglage par défaut, une popup s’ouvre : image du produit, prix unitaire, détail de chaque choix (par exemple Type : Tirage encadré, Taille : 40 × 60 cm, Cadre : Noyer), quantité, puis nombre d’articles, sous-total, livraison et total du panier, avec les boutons Continuer mes achats et Commander. Le gabarit views/templates/front/cart_modal.tpl peut être surchargé dans le thème.

Le réglage « Popup native du thème » utilise la popup du module Panier ; elle n’affiche pas le détail de la personnalisation. Le réglage « Message » affiche un lien vers le panier sous le bouton.

Panier, commande et production

Chaque configuration validée crée une personnalisation native PrestaShop : deux configurations différentes donnent deux lignes de panier distinctes. Le récapitulatif lisible (Taille : 40 × 60 cm · Type : Tirage encadré · Cadre : Noyer) apparaît dans le panier, la commande, la facture et le back-office. Le détail de commande du back-office affiche un panneau Personnalisations avec le récapitulatif champ par champ, les fichiers envoyés par le client et, si l’aperçu est actif, le visuel final.

Sur le thème Classic, un changement de quantité recharge une partie de la fiche produit en AJAX : le configurateur reste en place et conserve les choix du client.

Dupliquer un configurateur

Dans la liste, ouvrez le menu de la ligne et cliquez sur Dupliquer (le bouton existe aussi en bas de l’éditeur). La copie reprend les réglages, les champs, les options, les traductions et les images. Les conditions « Afficher seulement si… » et les couleurs liées sont recâblées sur les champs copiés. La copie est créée inactive et sans produit ni catégorie liés, pour ne pas prendre la place de l’original : liez vos produits puis activez-la.

Données de démonstration

La page Configurer propose trois imports, relançables sans doublon :

• Mug, vase, t-shirt : aperçu composé, texte gravé, couleurs conditionnelles par forme, formule de prix, upload.
• Broderie (patch et bonnet) : couleurs liées entre plusieurs éléments.
• Tableau photo (art mural) : aperçu désactivé, lien « Guide des matières », taille avec poids, type de support en vignettes, photo du client, couleur de fond, cadre affiché seulement pour un tirage encadré.

Dépannage

Le configurateur ne s’affiche pas

• Vérifiez que le configurateur est actif et lié au produit, directement ou par une catégorie.
• En emplacement manuel, vérifiez que le hook displayDfProductConfigurator est bien placé dans le modèle de fiche produit.
• En emplacement automatique, vérifiez que le thème appelle displayProductAdditionalInfo (c’est le cas du thème Classic).
• Videz le cache (Paramètres avancés → Performances).

Une option n’apparaît pas dans « Afficher seulement si… »

Elle n’est pas encore enregistrée. Enregistrez le configurateur, puis revenez sur le champ.

Le lien d’information n’apparaît pas

Le texte du lien et le contenu de la fenêtre doivent tous deux être remplis dans la langue affichée.

Le bouton « Ajouter au panier » reste grisé

Un champ obligatoire visible n’est pas rempli : le message sous le total indique lequel. Désactivez « Bloquer l’ajout si invalide » pour laisser le bouton actif et afficher les erreurs au clic.

Les frais de port ne changent pas selon les options

Vérifiez que les options portent un poids et que le transporteur facture selon le poids (et non selon le prix).

Historique des versions

• 1.3.0 : PrestaShop 1.7.7 et 1.7.8, plusieurs produits et catégories par configurateur, duplication, conditions par liste d’options, liens d’information en fenêtre, hook dédié pour page builders, popup panier, réglages d’affichage, glisser-déposer, démo tableau photo.
• 1.2.1 : aperçu identique au visuel final, messages du front traduits, éditeur de zones aux bonnes proportions.
• 1.2.0 : couleurs liées, recoloration des visuels, démos en un clic, aperçu toujours visible.
• 1.1.0 : police, taille et couleur au choix du client, zones de placement à la souris, visuel final et panneau de commande, trois modes d’affichage.
• 1.0.0 : version initiale.