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
