Boutons +/- de Quantité — Guide complet

Présentation

Le module Boutons +/- de Quantité ajoute de vrais boutons + et − de chaque côté du champ quantité, sur la fiche produit. Il remplace l’usage du petit champ nombre natif de PrestaShop, peu pratique au clavier comme au doigt sur mobile, par deux larges boutons faciles à viser.

Le module ne modifie aucun fichier de thème : il ajoute une feuille de style et un script légers, uniquement sur la fiche produit, qui encapsulent le champ quantité existant. Il est compatible PrestaShop 1.7, 8 et 9, avec le thème Classic comme avec la plupart des thèmes personnalisés.

Installation

1. Depuis le back-office, ouvrez Modules > Gestionnaire de modules.
2. Cliquez sur Installer un module et déposez l’archive ZIP du module.
3. Une fois l’installation terminée, cliquez sur Configurer (facultatif : le module fonctionne avec ses réglages par défaut dès l’installation).

Aucune table SQL n’est créée et aucun fichier de thème n’est modifié. Le module enregistre simplement le hook qui charge ses ressources sur la fiche produit.

Configuration

La page de configuration regroupe quatre réglages. Tous sont optionnels : par défaut, les boutons sont actifs, en style carré, avec masquage des flèches natives.

Activer les boutons

L’interrupteur Activer les boutons contrôle l’affichage global. Désactivez-le pour masquer temporairement les boutons sans désinstaller le module : la fiche produit retrouve alors le champ quantité d’origine.

Style des boutons

Choisissez l’apparence des boutons :

• Carré : les boutons + et − ont des coins légèrement arrondis aux extrémités du groupe (style par défaut).
• Arrondi : les boutons adoptent une forme en pilule, avec des extrémités complètement arrondies.

Couleur de fond et couleur des icônes

Deux sélecteurs de couleur permettent d’ajuster :

• la couleur de fond des boutons (par défaut un gris clair) ;
• la couleur des icônes + et − (par défaut un gris foncé).

L’effet au survol est dérivé automatiquement de la couleur de fond : il n’y a donc pas de troisième réglage à gérer. Les couleurs sont appliquées au moyen de variables CSS, ce qui garantit une intégration propre dans la plupart des thèmes.

Masquer les flèches natives du champ nombre

Lorsque cette option est activée (recommandé), les petites flèches verticales du champ nombre du navigateur sont masquées, pour ne conserver que les boutons + et − du module. Désactivez-la si vous préférez laisser les flèches natives visibles.

Côté client

Sur la fiche produit, le client voit un bouton − à gauche du champ quantité et un bouton + à droite. Chaque clic incrémente ou décrémente la quantité d’un pas, puis met à jour le prix, les éventuelles déclinaisons et le bouton d’ajout au panier, exactement comme une saisie manuelle. La quantité reste bien sûr modifiable directement au clavier dans le champ.

Fonctionnement et compatibilité

Aucun override de template

Le module n’écrase aucun fichier de thème. Il repère le champ quantité standard de la fiche produit et l’encapsule par injection JavaScript pour y ajouter les boutons. Cette approche le rend compatible avec un large éventail de thèmes et le préserve des mises à jour de PrestaShop, puisqu’aucun template n’est surchargé.

Thème Classic et bootstrap-touchspin

Le thème Classic enrichit déjà le champ quantité avec bootstrap-touchspin, qui ajoute deux petites flèches verticales. Le module neutralise proprement ces flèches à l’intérieur de son propre groupe de boutons, afin de ne laisser que les + et − bien lisibles, sans doublon ni décalage de mise en page.

Synchronisation avec le panier

À chaque clic, le module applique la nouvelle valeur puis déclenche les événements attendus par PrestaShop, à la fois natifs et jQuery. Le prix total, les déclinaisons et le bouton d’ajout au panier réagissent normalement. Après un changement de déclinaison, qui reconstruit le bloc quantité, les boutons sont automatiquement réinjectés.

Respect du stock et des contraintes

Les boutons lisent la quantité minimale, la quantité maximale et le pas définis sur le champ. Le client ne peut pas descendre sous le minimum requis (souvent 1) ni dépasser le stock disponible lorsque celui-ci est borné. Le comportement reste cohérent avec les règles de la boutique.

Dépannage

Les boutons n’apparaissent pas sur la fiche produit

Vérifiez que le module est activé et que l’option Activer les boutons est bien sur Oui. Videz ensuite le cache de PrestaShop (Paramètres avancés > Performances) et rechargez la fiche produit. Si votre thème utilise un champ quantité fortement personnalisé, le module peut ne pas le détecter ; contactez le support en précisant votre thème.

Les flèches natives du thème Classic restent visibles

Assurez-vous d’utiliser la version 1.1.0 ou supérieure, qui neutralise les flèches bootstrap-touchspin, puis videz le cache. Vérifiez également qu’aucune surcharge CSS de votre thème ne réaffiche ces flèches.

La quantité change mais le prix ne se met pas à jour

Ce comportement vient généralement d’un thème qui n’utilise pas les événements standard de PrestaShop. Le module déclenche les événements natifs et jQuery ; si le thème écoute un mécanisme différent, contactez le support en indiquant le thème utilisé.

Désinstallation

La désinstallation du module retire ses ressources de la fiche produit et supprime sa configuration. Le champ quantité retrouve son apparence d’origine. Aucune donnée produit ni commande n’est affectée.

FAQ

Le module modifie-t-il mon thème ?

Non. Il n’écrase aucun fichier de thème : il ajoute une feuille de style et un script uniquement sur la fiche produit, qui encapsulent le champ quantité existant.

Puis-je changer la couleur des boutons ?

Oui. La configuration permet de régler la couleur de fond et la couleur des icônes + et −, ainsi que le style carré ou arrondi. L’effet de survol est dérivé automatiquement de la couleur de fond.

Le module est-il compatible PrestaShop 9 ?

Oui, le module est compatible PrestaShop 1.7, 8.x et 9.x, en mono comme en multi-boutique.