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 :

{hook h='displayProductPriceBlock' product=$product type='weight'}

Et placez le code suivant juste en dessous :

<form action="{$urls.pages.cart}" method="post" id="add-to-cart-or-refresh">
    <input type="hidden" name="token" value="{$static_token}">
    <input type="hidden" name="id_product" value="{$product.id}" id="product_page_product_id">
    <input type="hidden" name="id_customization" value="{$product.id_customization}" id="product_customization_id">


    <button class="btn btn-primary add-to-cart" data-button-action="add-to-cart" type="submit" {if !$product.add_to_cart_url || $product.quantity_wanted>$product.quantity}disabled{/if}>
      <i class="material-icons shopping-cart"></i>
      {l s='Add to cart' d='Shop.Theme.Actions'}
    </button>
</form>

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

1 commentaire pour “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.

Laisser un commentaire

Votre adresse de messagerie 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.