Nuancier pour PrestaShop – échantillons de couleurs et de textures sur la fiche produit

Ce que fait le module

Nuancier affiche sur la fiche produit toutes les valeurs des groupes d'attributs de type « Couleur ou texture » sélectionnés, sous forme de grands échantillons accompagnés de leur nom. Le client clique sur un échantillon et le voit en grand, sans quitter la fiche produit. Le module a été écrit pour les boutiques de meubles, de tissus d'ameublement, de parquets, de peintures et de papiers peints, c'est-à-dire là où l'aspect du matériau décide de l'achat.

Où le nuancier s'affiche

Par défaut, sous le bouton « Ajouter au panier ». Dans la fiche produit du back-office, onglet Modules, vous cochez les groupes d'attributs à inclure dans le nuancier – séparément pour chaque produit.

Le nuancier peut aussi être inséré n'importe où dans la description ou dans le résumé, à l'aide de deux shortcodes :

• [pdswatchchart] – les groupes cochés dans la fiche produit,
• [pdswatchchart ids="5,7"] – les groupes dont l'ID est indiqué, quelle que soit la sélection.

Le module supprime le paragraphe qui entoure le shortcode : le HTML de la description reste valide et le nuancier s'affiche comme un élément de bloc. Lorsque le shortcode figure dans la description, le nuancier n'apparaît pas une seconde fois sous le bouton.

Échantillons et agrandissement

• Si la valeur d'attribut possède une image de texture, l'échantillon montre cette image. La couleur HEX n'est utilisée qu'en l'absence d'image.
• L'agrandissement s'ouvre dans une lightbox. On la ferme par la croix, par un clic sur le fond ou par la touche Échap.
• La fenêtre porte des attributs ARIA et des libellés aria-label ; à la fermeture, le focus revient sur l'échantillon cliqué.
• Les échantillons sont responsives et le nuancier fonctionne aussi après un changement de déclinaison, lorsque PrestaShop rafraîchit la fiche en AJAX.

Ce que la boutique y gagne

Le client voit toutes les finitions disponibles au même endroit et peut examiner chacune de près avant d'ajouter le produit au panier. Le but : moins de commandes renvoyées parce que la teinte ou la structure du matériau n'était pas celle que le client imaginait. Toute la configuration se fait dans la fiche produit, sans modifier les templates du thème.

Dans le back-office

Lors de la duplication d'un produit, le module copie la sélection des groupes ; lors de sa suppression, il efface ses entrées. L'interface est disponible en polonais et en anglais.

Configuration requise

• PrestaShop 8 ou 9,
• PHP de 7.2 à 8.4,
• des attributs de type « Couleur ou texture » créés dans Catalogue → Attributs & caractéristiques,
• n'importe quel thème – le nuancier fonctionne sans modifier le fichier product.tpl.

Installation

Téléversez l'archive dans le Gestionnaire de modules, ou copiez le dossier dans modules/ et installez le module avec la commande console. Après l'installation, la fiche de chaque produit comporte un onglet où vous cochez les groupes d'attributs à afficher. L'archive contient un fichier readme. Il explique notamment comment modifier l'apparence des échantillons à l'aide de variables CSS et comment surcharger le template du nuancier dans le thème.