Aller au contenu
Accueil » Prestashop » Prestashop 1.7 – Ajouter le bouton « Ajouter au panier » sur les listes de produits

Prestashop 1.7 – Ajouter le bouton « Ajouter au panier » sur les listes de produits

Bouton très utilisé sur les versions 1.5 et 1.6 de PrestaShop, il a malheureusement disparu avec la version 1.7 de PrestaShop. Cependant, c’est une chose très demandée par les commerçants car il permet, forcément, d’ajouter un produit au panier en réalisant beaucoup moins de clics qu’en passant par la page produit.

Modification du TPL

La modification principale se situe dans le fichier themes > classic> templates > catalog > _partials > miniatures > product.tpl. Je vous conseille de faire vos modifications de thèmes dans un thème enfant, enfant de toujours profiter des mises à jours de Prestashop sur votre thème 😉

Repérez cette ligne :

[pastacode lang= »markup » manual= »%7Bhook%20h%3D’displayProductPriceBlock’%20product%3D%24product%20type%3D’weight’%7D » message= » » highlight= » » provider= »manual »/]

Et placez le code suivant juste en dessous :

[pastacode lang= »markup » manual= »%3Cform%20action%3D%22%7B%24urls.pages.cart%7D%22%20method%3D%22post%22%20id%3D%22add-to-cart-or-refresh%22%3E%0A%20%20%20%20%3Cinput%20type%3D%22hidden%22%20name%3D%22token%22%20value%3D%22%7B%24static_token%7D%22%3E%0A%20%20%20%20%3Cinput%20type%3D%22hidden%22%20name%3D%22id_product%22%20value%3D%22%7B%24product.id%7D%22%20id%3D%22product_page_product_id%22%3E%0A%20%20%20%20%3Cinput%20type%3D%22hidden%22%20name%3D%22id_customization%22%20value%3D%22%7B%24product.id_customization%7D%22%20id%3D%22product_customization_id%22%3E%0A%0A%0A%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-primary%20add-to-cart%22%20data-button-action%3D%22add-to-cart%22%20type%3D%22submit%22%20%7Bif%20!%24product.add_to_cart_url%20%7C%7C%20%24product.quantity_wanted%3E%24product.quantity%7Ddisabled%7B%2Fif%7D%3E%0A%20%20%20%20%20%20%3Ci%20class%3D%22material-icons%20shopping-cart%22%3E%26%23xE547%3B%3C%2Fi%3E%0A%20%20%20%20%20%20%7Bl%20s%3D’Add%20to%20cart’%20d%3D’Shop.Theme.Actions’%7D%0A%20%20%20%20%3C%2Fbutton%3E%0A%3C%2Fform%3E » message= » » highlight= » » provider= »manual »/]

Ce code devrait suffire à afficher le bouton d’ajout au panier ainsi qu’un champ pour choisir la quantité désirée et devrait être suffisant pour déclencher l’ajout du produit au panier en AJAX.

Modification du style

Pour le style du bouton et du champ quantité, je vous laisse maître de la chose et faire ce que vous souhaitez.

Sachez que si vous souhaitez modifier la mise en forme, si vous n’y connaissez pas grand chose en compilation SCSS, NodeJS, etc, vous pouvez directement faire vos modifications dans le fichier : /themes/classic/assets/css/custom.css.

Si vous vous y connaissez et avez la possibilité de compiler facilement votre style, le fichier /themes/classic/_dev/css/components/products.scss devrait correspondre à ce que vous voulez modifier.

J’espère que cet article vous aidera, j’ai pas mal chercher avant de trouver ce dont j’avais besoin, je pense que cela pourra servir à d’autres 🙂

Image : Tumisu / Pixabay

4 commentaires sur “Prestashop 1.7 – Ajouter le bouton « Ajouter au panier » sur les listes de produits”

  1. Merci, très utile.
    Technique pour enlever le texte « ajouter au panier »: spécifier une taille de police à zéro, ce qui n’impacte pas l’icône du panier.

  2. lorsqu’on demande d’ajouter le produit. le produit n’est pas ajouter dans le panier. Qu’est-ce qui cause cet anomalie? est-ce que les paramètres sont reellemment les bons paramètres.

  3. Salut Frantz,

    J’utilise le code sur plusieurs sites de production donc oui il fonctionne. Après, plusieurs facteurs peuvent provoquer une dysfonctionnement.

    Avez-vous vidé votre cache ?
    Mon code est conçu à partir du thème classic, sur quel thème l’utilisez-vous ?
    Avez-vous des modules qui pourraient causer un dysfonctionnement sur l’ajout au panier ?

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.