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.
Table des matières
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
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.
Hello,
Si tu utilises ce bout de code dans un module et avec du cache, cela ne marchera pas car token en cache…
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.
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 ?