Remplacer le Bouton Ajouter au Panier dans les Listings PrestaShop : installation et configuration

Présentation

Le module remplace le bouton Ajouter au panier des miniatures produit (pages catégorie, recherche, accueil, carrousels, produits associés) par un bouton qui mène à la fiche produit. Le client y choisit le poids, la taille ou le format avant d’ajouter au panier. Vous définissez des règles : quels produits sont concernés, quel texte affiche le bouton, et si le prix le plus bas des déclinaisons est affiché avec « À partir de ».

Installation

1. Dans Modules > Gestionnaire de modules, cliquez sur Installer un module et envoyez le fichier dflistingbutton-1.0.0.zip.
2. Le module crée les tables ps_dflb_rule, ps_dflb_rule_lang, ps_dflb_rule_shop, ps_dflb_rule_category et ps_dflb_rule_product, et ajoute le menu Catalogue > Boutons des listings.
3. Une règle d’exemple désactivée, « Exemple : tous les produits avec déclinaisons », est créée. Vous pouvez l’activer telle quelle ou la supprimer.
4. Après avoir créé ou activé une règle, ouvrez une page catégorie de la boutique. Si le bouton n’apparaît pas, videz le cache dans Paramètres avancés > Performances.

Créer une règle

Dans Catalogue > Boutons des listings, cliquez sur Ajouter une règle. Le formulaire comporte trois blocs.

Règle et ciblage

• Nom de la règle : nom interne, non visible par les clients.
• Active : une règle désactivée est ignorée.
• Priorité : quand plusieurs règles correspondent à un produit, celle qui a le plus petit nombre l’emporte. Valeur par défaut : 10.
• S’applique à : Tous les produits, Catégories ou Produits précis.
• Catégories : arbre de cases à cocher avec un champ de filtre. Au moins une catégorie est obligatoire pour ce type de règle.
• Inclure les sous-catégories : les produits de toutes les sous-catégories des catégories cochées sont aussi ciblés.
• Correspondance de catégorie : Le produit est dans l’une des catégories (toutes les catégories associées au produit comptent) ou Catégorie par défaut du produit uniquement.
• Produits : pour le type Produits précis, recherche par nom, référence ou ID.
• Condition : Aucune condition, Produits avec déclinaisons ou Produits utilisant un groupe d’attributs. Avec Produits avec déclinaisons, les produits simples de la même catégorie gardent leur bouton Ajouter au panier.
• Groupe d’attributs : pour la dernière condition, par exemple Poids ou Taille. Seuls les produits dont une déclinaison utilise ce groupe sont ciblés.
• Produits exclus : ces produits ne reçoivent jamais le bouton de cette règle, quel que soit le ciblage.
• Association boutique : en multiboutique, choisissez les boutiques où la règle s’applique.

Bouton

• Texte du bouton : un texte par langue, par exemple « Voir tous les poids disponibles ». Une langue laissée vide reprend le premier texte saisi.
• Style : Bouton principal du thème (classes btn btn-primary), Bouton contour du thème (btn btn-outline-primary) ou Couleurs personnalisées, avec une couleur de fond et une couleur de texte et un aperçu.
• Icône : flèche, options, balance, œil ou aucune.
• Pleine largeur : le bouton occupe toute la largeur de la miniature.
• Classes CSS supplémentaires : ajoutées au bouton, utiles pour reprendre une classe de votre thème.
• Masquer le sélecteur de quantité : masque le champ quantité que certains thèmes affichent dans les listings.

Prix dans les listings

Ce bloc ne concerne que les produits qui ont au moins deux déclinaisons.

• Afficher le prix le plus bas des déclinaisons : PrestaShop calcule le prix de chaque déclinaison (taxes, groupe du client, prix spécifiques et réductions compris). Si le plus bas diffère du prix affiché par le thème, il le remplace, et l’ancien prix barré et le badge de réduction de la miniature sont masqués.
• Ajouter le préfixe « À partir de » : ajouté devant le prix seulement si les prix des déclinaisons diffèrent et que le prix affiché est le plus bas. Si vous désactivez l’option précédente et que la déclinaison par défaut n’est pas la moins chère, le préfixe n’est pas affiché, pour ne pas annoncer un prix faux.
• Texte du préfixe : un texte par langue (« À partir de », « Desde », « Ab »…).

Exemple : fromages et charcuterie vendus au poids

1. Nom : Fromages au poids. S’applique à : Catégories. Cochez Fromages et charcuterie et gardez Inclure les sous-catégories.
2. Condition : Produits utilisant un groupe d’attributs, groupe Poids.
3. Texte du bouton : « Voir tous les poids disponibles » en français, « Ver todas las opciones de peso » en espagnol.
4. Gardez Afficher le prix le plus bas et À partir de activés, puis enregistrez.

Dans la catégorie, chaque fromage vendu en 250 g, 500 g et 1 kg affiche « À partir de » suivi du prix du 250 g et le bouton vers sa fiche. Un produit vendu à l’unité, sans déclinaison de poids, garde son bouton Ajouter au panier.

Réglages généraux

La page de configuration du module (bouton Réglages en haut de la liste des règles) contient :

• Activer le module : coupe toutes les règles sans les supprimer.
• Détection du thème : Automatique (recommandé), Toujours utiliser la recherche AJAX ou Hooks uniquement. Voir la section suivante.
• Désactiver aussi le lien natif d’ajout au panier : vide côté serveur l’URL d’ajout au panier des produits ciblés, via le hook actionPresentProductListing. Certains thèmes affichent alors leur propre lien « Voir le produit » : si vous obtenez deux boutons, laissez cette option désactivée.
• Masquer le bouton Aperçu rapide : sur les produits ciblés uniquement.
• Ignorer les déclinaisons en rupture pour le prix le plus bas : s’applique quand la gestion des stocks est active et que le produit refuse les commandes hors stock. Si toutes les déclinaisons sont en rupture, toutes sont prises en compte.

Compatibilité avec votre thème

Comment le module repère les produits

Pendant l’affichage d’une miniature, le module s’exécute dans les hooks displayProductPriceBlock et displayProductListReviews, que le thème Classic, Hummingbird et la plupart des thèmes appellent. Pour chaque produit ciblé, il imprime un repère invisible. Le script du module trouve la miniature qui contient ce repère, masque le bouton panier, le formulaire d’ajout au panier qui l’entoure et le sélecteur de quantité, puis insère le nouveau bouton à la place du bouton masqué.

Si le thème n’affiche aucun bouton panier dans ses listings (cas du thème Classic), le bouton est placé juste après le bloc de prix.

En mode Automatique, si aucune miniature de la page n’a déclenché ces hooks, le script envoie les ID des produits visibles au contrôleur du module, qui renvoie ceux qui sont ciblés (60 produits au plus par requête, produits actifs et visibles uniquement). Les miniatures ajoutées après un filtre à facettes, un tri ou un chargement infini sont traitées automatiquement.

Sélecteurs CSS

Le bloc Compatibilité thème (sélecteurs CSS) de la configuration contient les sélecteurs utilisés par le script :

• Conteneur de la miniature produit : bloc qui entoure un produit (.product-miniature, .ajax_block_product…).
• Bouton Ajouter au panier : éléments remplacés (.add-to-cart, [data-button-action="add-to-cart"]…).
• Sélecteur de quantité, Prix, Ancien prix et réduction, Point d’insertion, Bouton Aperçu rapide.

Ajoutez les classes de votre thème à la liste, séparées par des virgules. Le bouton Rétablir les sélecteurs par défaut remet les valeurs d’origine.

Personnaliser le style

Le bouton porte la classe .dflb-btn, plus .dflb-full en pleine largeur et .dflb-style-custom en couleurs personnalisées (variables --dflb-bg et --dflb-color). Le préfixe de prix porte la classe .dflb-from, et la miniature traitée reçoit .dflb-has-btn.

Ce que le module ne modifie pas

• le produit principal de la fiche produit et son aperçu rapide ;
• le panier, le tunnel de commande et le compte client ;
• les fichiers du cœur et du thème (aucun override, aucun template modifié).

Limites connues

• Le module change l’affichage des listings. Il ne bloque pas un ajout au panier fait par un autre moyen (lien direct, module tiers).
• Le prix le plus bas et le préfixe sont appliqués dans le navigateur. Le code HTML d’origine et les données structurées du thème gardent le prix de la déclinaison par défaut.
• Au-delà de 150 déclinaisons sur un même produit, seules les 150 premières servent au calcul du prix le plus bas.