02 Mar 2017

Afficher un bouton ajouter au panier sur le listing produit de Prestashop 1.7

Mise à jour de l’article 29/04/2019 : Ce tutoriel fonctionne avec les dernières versions en cours de Prestashop (maj de l’article blog effectuée sur la 1.7.5). Tutoriel en vidéo en bas de l’article !

Je travaillais sur une boutique d’un client, ma première intégration sur Prestashop 1.7 (Je me suis servis du thème Classic pour ma base) et je me suis rendu compte d’une chose toute bête… Sur les pages catégorie il n’y a pas de bouton ajouter au panier. J’ai donc cherché à ajouter ce bouton pour qu’il fonctionne correctement sur le listing produit avec la pop-up de confirmation d’ajout au panier ou encore la navigation à facettes !

De base sur le thème Classic, il y a seulement un lien pour se rendre sur la fiche produit. Pas de bouton ajouter au panier, parce que la simulation met en avant uniquement des produits avec des déclinaisons. L’utilisateur est obligé d’aller sur la fiche produit pour sélectionner l’attribut qu’il veut (taille ou couleur par exemple) avant d’ajouter au panier.

Il y a des modules sur Prestashop addons pour cela mais évitons de dépenser des sous 🙂

À savoir que cela impacte aussi le module produit phare sur la page d’accueil.

Fiches produit de base sur le thème Classic de Prestashop 1.7
Fiches produit de base sur le thème Classic de Prestashop 1.7

Bien évidemment il y a le quick view (aperçu rapide) qui permet au client d’afficher en pop-up le détail du produit avec ses déclinaisons. Mais si vous avez des produits simples, vous n’avez peut-être pas besoin de l’aperçu rapide de Prestashop.

Rendez-vous dans le tpl du listing produit, le chemin :

/themes/nomdevotretheme/template/catalog/_partials/miniatures/product.tpl

Ouvrez votre fichier et rendez-vous à la ligne 54 avant le bloc product_price_and_shipping et vous collez ceci :

<form action="{$urls.pages.cart}" method="post">
   <input type="hidden" name="token" value="{$static_token}">
   <input type="hidden" value="{$product.id_product}" name="id_product">
   <input type="number" class="input-group form-control" name="qty" value="1">
   <button data-button-action="add-to-cart" {if !$product.add_to_cart_url}disabled{/if} class="btn btn-primary">{l s='Add to cart' d='Shop.Theme.Actions'}</button>
</form>

Vous devez avoir :

Nous associons le bouton quantité à celui du panier pour permettre l’ajout du produit depuis le listing produit. Sans définir de quantité, vous allez ajouter un produit à 0 dans votre panier.
Cependant cela n’est pas très esthétique. Prestashop 1.7 utilise des tailles fixes, il faut donc définir des nouvelles hauteurs sur vos produits.
Nous allons donc modifier le CSS. Vous pouvez le faire directement dans theme.css du thème Classic. Attention il est peut-être préférable d’utiliser un thème enfant Prestashop. (Vous pouvez décompresser votre fichier pour y voir mieux).

Le mieux est d’utiliser un autre fichier CSS, justement il y a un fichier dédié dans Prestashop 1.7. Rendez-vous dans : basedevotresite/themes/nomdevotretheme/assets/css/custom.css et collez-y cela :

#products article.product-miniature div.thumbnail-container, article.product-miniature div.thumbnail-container {height: 410px;}
#products article.product-miniature div.product-description, article.product-miniature div.product-description{height: 172px;text-align: center;}
#products article.product-miniature div.product-description input.input-group.form-control, article.product-miniature div.product-description input.input-group.form-control{width: 30%;margin-left: auto;margin-right: auto;margin-bottom: 12px;margin-top: 10px;}

Voilà le résultat :

Vous ne voyez rien ? Alors videz le cache dans les performances de votre site dans les paramètres avancées.

Pour le moment, bonne intégration sur Prestashop 1.7 !

Tutoriel vidéo Prestashop 1.7 : Création d’un bouton ajouter au panier sur les pages catégorie et la page d’accueil

97 commentaires sur “Afficher un bouton ajouter au panier sur le listing produit de Prestashop 1.7
    1. J’ai réalisé cette intervention pour un de mes clients, donc en suivant ce tutoriel cela devrait être bon.
      Vous bloquez ou ?

  1. Merci c’est super, je test sur un site en local, ça marche mais la quantité à 0 par défaut me gène un peut.

    Comment puis-je faire en sorte que la quantité soit à 1 sans que l’acheteur n’ait à cliquer sur la flèche ?

  2. J’ai inséré à la ligne 63 comme tu le dis mais ça ne marche pas chez moi. Un bout de code :

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

    {l s=’Add to cart’ d=’Shop.Theme.Actions’}

    {/if}
    {/block}

    {block name=’product_reviews’}

  3. Pour info, sur Chrome, les petites flèches des quantités ne s’affichaient pas. Il faut rajouter ceci dans le css :
    input[type=number]::-webkit-inner-spin-button {
    opacity:1;
    }.
    Par contre, chez moi, je n’ai pas de nombre, donc si le client n’y pense pas, cela lui rajoute 0 produits. Comment mettre 1 par défaut ? Merci

      1. Super, merci ! Juste une faute de frappe, il faut mettre ‘1’. Mais j’ai un autre souci : le bouton n’est pas ‘disabled’ dans la liste des produits si le produit n’est plus en stock. J’ai essayé en ajoutant {if $product.available_for_order} avant le FORM ACTION et {else} {l s=’Add to cart’} {/if}
        après le FORM. Mais ce n’est pas pris en compte. Une idée ? Merci d’avance !

        1. J’ai trouvé :
          {if product.quantity >0}
          <form action …
          {else}
          <form action mais en ajoutant disabled à la class du button
          {/if}
          Et ça marche ! Maintenant, je cherche comment rajouter le bouton Détails

  4. Merci pour le code.
    ça m’a fait gagner du temps, le problème c’est que la navigation (pagination) ne fonctionne plus donc je cherche une autre soluce …
    Dommage … Si vous avez une idée ??
    PS 1.7.2.0

    1. Bonjour,

      J’utilise ce modèle sur un site d’un client et il n’y a pas de problème de pagination.
      Avez-vous la navigation à facette de Prestashop ? Il faut peut-être la re-indexer.
      Regardez aussi le débug pour voir s’il y a des erreurs.

  5. Bonjour,

    Un correctif pour votre solution sur 1.7.1 ?
    Ca fonctionne mais du moment qu’on passe à une seconde page ou alors qu’on utilise les filtres, l’ajout au panier n’est malheureusement plus effectif 🙁

  6. Bonjour,

    merci !! Pour ce tuto fort utile, j’avais effectivement le problème de la quantité à 0, en ajoutant une valeur de 1, ça fonctionne nickel.
    Avant de lire les commentaires, j’avais fini par prendre les caractéristiques du input sur la page produit, mais le premier produit de la liste appelait la div complète au lieu du input. Seulement le premier produit de la liste. Savez-vous pourquoi ?

    En tout cas, votre tuto me sauve !

  7. Oups… je n’ai pas lu les commentaires jusqu’au bout, et effectivement, dès qu’on active les filtres cela ne fonctionne plus… si vous avez une solution, je suis preneuse..

      1. Bonjour, alors effectivement avec les filtres ça fonctionne, en revanche, pas toujours, même si les filtres ne sont pas activés. Et on sait hélas que certains clients ne sont pas très patients ni persistants lorsqu’il s’agit de re-créer son panier..
        Je remets la product-list à son état d’origine, pour des raisons purement commerciales (dues au déclinaisons sur certains produits), je vous garde néanmoins dans mes favoris, merci pour cette solution plus qu’astucieuse.

  8. Hello,

    Merci pour cette solution qui a l’air de fonctionner parfaitement ! Cependant cela ne fonctionne pas de mon côté : mon site utilise la version 1.7.2.3 de Prestashop.

    Un coup de main pour adapter ce code à ma version ?

  9. bonjour,
    j’ai un cas de plusieurs warehouse, je veux sur la page product.tpl donner le choix au acheteur de valider un choix via un chekbox 1=wh_region, 2=wh_ville, 3=wh_fournisseur et passer ce parametre a une variable a la page cart afin de diviser la commande s’il y a plusieur produits selectionner de different entrepot pour choisir a la fin un trspt pour chaque entrepot et ‘enregistrer a la base comment faire svp?

  10. version prestashop 1.5
    j’ai fais un requette select afin d’avoir le codepostal du region par defaut et ville et frs selon le choix d’acheteur pour le comparer avec code postal du warehouse via la table ps_adresse pour afficher seulement la qte disponible de ce warehouse_region et desactiver bouton si la qte < 0 et stocker la qte ds une variable avec 'id_warehouse afin d'additionner les produits du meme warehouse en une seule commande et choisir trsport unique pour warehouse_frs et diviser la cmde en deux si le client a modifier le choix warehouse pour un autre produit

    je vous remerci d'avance de votre aide

  11. Bonjour Matthieu, merci beaucoup pour l’article,il m’a été très utile.
    Je voulais vous demander comment faire pour afficher le nombre « 1 » par défaut dans la case de quantité d’articles .

    merci bcp

  12. Bonjour,
    je suis sur ma premiere integration de Prestashop 1.7… bcp de changement par rapport à la V1.6 et entre autre chose le problème d’afficher le prix sur les vignettes… Merci pour l’article et le partage de solution. Cela m’a été bien utile 🙂

  13. Bonjour Matthieu,

    Depuis qu’on a ajouté le bouton afficher au panier sur le listing produit,lorsqu’on clique sur le produit pour voir ses caractéristiques et ensuite l’ajouter au panier, le panier affiche toujours « 0 »produit ajouté .avez vous une solution svp? merci pour votre aide

        1. Je n’ai pas de problème sur les dernières versions de PS.
          Peut-être que vous avez un conflit avec un autre module.
          Vérifiez si vous n’avez pas une erreur javascript dans votre inspecteur d’élément de votre navigateur.
          Videz et désactivez vos caches pour faire un test.

          1. Bonjour,
            J’ai exactement le même problème. Au 1er chargement de la page tout fonctionne. Mais dès qu’il y a un rafraîchissement ajax (changement de page ou filtre), l’ajout au panier ne fonctionne pas : la popup s’affiche mais aucun produit n’est affiché et rien n’est ajouté au panier.
            Avez vous résolu le problème Essaied?

  14. Bonjour,
    Je n’avais pas fait attention, mais suite à l’intégration de votre code tout semblait bien fonctionner… en fait non, la pagination ne fonctionne plus.
    Quand je clique sur un numero de page ou sur « precedent/suivant » j’ai une erreur dans la console JS :
    Failed to load resource: the server responded with a status of 500 (Internal Server Error)
    core.js
    Est ce que cela arrive a d’autre ?
    Version Prestashop : 1.7.1.2

    1. J’ai fais une vérification sur ma version de dev et je n’ai pas d’erreur JS sur la pagination. Cela fonctionne.
      Vous utilisez le thème par défaut de Prestashop ?
      Videz bien le cache et faite un test en enlevant la compression javascript.

  15. Bonjour,
    C’est bon cela fonctionne maintenant. Lorsque j’ai vidé le cache ca n’a rien changé mais le site était en « mode débug » et quand j’ai désactivé ce mode je n’avais plus d’erreur.
    Le mode débug créé des erreurs a priori donc, il faut s’en méfier 🙂
    merci pour la réactivité et le partage !

  16. Bonjour, je suis nouvelle et un peu perdu avec tout ça, je souhaiterai ajouter un bouton ‘ajouter au panier’ pour que mes clients puisse ajouter les produits plus facilement, comment dois-je faire ?

    Je vous remercie par avance de m’aider.

    1. Il faut suivre le tutoriel cependant si vous avez aucune connaissance en codage effectivement cela est plus compliqué.

      Si vous avez besoin d’une intervention sur votre vous pouvez me contacte pour un devis sur ma page contact.

  17. Cela ne fonctionne pas actuellement après un multi page.
    La variable $urls à l’air d’être vide. et quand je la mets en dur, il y a des soucis d’ajout, certainement avec la variable $static_token qui est vide également

  18. bonjour
    tuto très utile mais j’ai deux soucis?
    1°) le tuto n’est pas responsibe quand on bascule sur affiche mobile tout est décallé
    2°) en ajoutant ceci nous n’avons plus l’affichage rapide des descriptions des produits
    ou bien je me suis mal pris dans l’execution du tuto
    merci

          1. Après vérification, suite à mon tuto, cela fonctionne parfaitement sur mobile.
            Cela vient donc de votre intégration, de votre css personnalisé.

            Vous pouvez me contacter pour un devis d’une intervention Prestashop à contact@matthieu-jalbert.fr

            Merci

    1. bonjour Yalcin j’ai aussi le souci de responsibe quand on bascule sur affiche mobile tout est décallé S’il te plait tu peux m’aider avec le code que tu as utilisé? Merci infiniment

      1. Bonjour, si vous utilisez le thème par défaut Prestashop il ne doit pas y avoir de problème, je viens de tester. Si vous utilisez un autre thème alors il doit y avoir un code particulier qui gêne l’affichage

  19. Merci pour le tuto, j’avais réussi à ajouter le bouton de base mais les paramètres n’étaient pas envoyer, là c’est parfait. A titre personnel j’ai commenté l’input quantité et cela fonctionne sans problème.

  20. {block name=’product_price_and_shipping’}

    {if $product.show_price}

    {if $product.has_discount}
    {hook h=’displayProductPriceBlock’ product=$product type= »old_price »}

    {l s=’Add to cart’ d=’Shop.Theme.Actions’}

    {l s=’Regular price’ d=’Shop.Theme.Catalog’}
    {$product.regular_price}
    {if $product.discount_type === ‘percentage’}
    {$product.discount_percentage}
    {elseif $product.discount_type === ‘amount’}
    {$product.discount_amount_to_display}
    {/if}

    Cela ne marche pas pour moi alors que je ne vois pas l’erreur que je fais quelqu’un peut m’aider svp?

    1. Bonjour,
      Il vous manque pas un {/if} pour fermer votre condition has_discount ?
      De plus on ne mets pas 3 « === » pour désigner quelque chose.

      Si vous activez les erreurs dans Prestashop vous avez quel message ?

  21. Bonjour et merci pour ce super article.

    J’ai bien intégré le code dans le fichier product.tpl et j’obtiens l’effet que tu décris.
    Cependant quand j’intègre le code dans le customs.css aucun changement. J’ai vidé les caches de mon presta et de mon navigateur… toujours rien… Une idée de piste pour résoudre ça ? Encore merci

    1. Autant pour moi c’est réglé !

      Par contre, est-ce qu’il y a la possibilité de laisser le choix des déclinaisons (couleurs) dans la miniature ? Sinon je vois que c’est la couleur par défaut qui est ajoutée au panier

  22. Bonjour Matthieu,
    Un grand merci pour ce tuto, sincèrement !
    J’ai suivi dans les commentaires une conversation concernant le fait que s’il n’y a pas de produit en stock, le bouton s’affiche quand même, et quand je test sur mon Presta, en effet, j’ai un ajout au panier d’une quantité 0 sans référence en face, donc un ajout vide.
    J’ai tenté de refaire le code mais je n’ai pas bien compris à cause des abréviations d’un de vos lecteurs.
    Si je veux que ce bouton s’opacifie si mon stock est à 0, je dois faire quelque chose comme ça : (mais où est l’erreur du coup ? »
    MERCI !! et belle journée 🙂

    {if $product.quantity >0}

    {l s=’Add to cart’ d=’Shop.Theme.Actions’}

    {else} {l s=’Add to cart’} {/disabled}

    1. Ah, le code ne s’est pas bien affiché. Je recommence :

      {if $product.quantity >0}

      {l s=’Add to cart’ d=’Shop.Theme.Actions’}

      {else} {l s=’Add to cart’} {/disabled}

  23. Bonjour Matthieu,
    le bouton ‘Ajouter au Panier’ n’est pas centré sur mon site , j’ai pourtant suivi a la lettre le css
    d’où vient le souci ?
    merci de ton aide et super tuto

      1. J’ai réussi à le centrer mais il n’apparaît pas dans la case du produit; mais en dessous .. je ne sais pas si vous voyez ce que je veux dire …
        j’utilise le thème par défaut pourtant et installation toute récente

  24. Bonjour,

    Tutoriel vraiment intéressant !

    En ce qui me concerne, je rencontre juste un petit problème lors de l’intégration : je perds l’affichage de l’aperçu au survol de la vignette.
    Je vois que cela est dû à la dernière ligne du code CSS mais je ne suis pas assez calé pour comprendre …

    J’utilise le thème Classic

    Merci par avance !

    1. La dernière ligne de code n’impacte pas cela.

      Cependant de base il y a :
      .btn-primary:hover {
      color: #fff;
      background-color: #2592a9;
      border-color: transparent;
      }

      Si vous avez changé les couleurs du bouton alors il faut changer la couleur au hover ou bien mettre une opacité pour avoir un effet de survol.

  25. Bonjour,

    Je me réponds à moi même.

    J’ai réussi à résoudre mon problème en ajoutant une ligne de code dans le customm.css à savoir

    #products article.product-miniature div.highlighted-informations, article.product-miniature div.highlighted-informations{height: 150px;}

    Il m’a fallu tatonner pour arriver à une mesure de 150px et ça semble pas mal. Je ne maîtrise pas vraiment tout mais cela semble pas trop mal …

    Bonne continuation à tous !

    Cordialement.

    1. En CSS vous devez mette un font-size: 12px; par exemple. Il me semble que de base c’est 14 ou 15px donc 12px ça permet de réduire la typographie.

  26. bonjour, l’essai en localhost 1.7.4.3 fonctionne très bien, excepter Internet explorer 11, les petites flèches n’apparaissent pas. J’ai cherché mais il ne semble pas avoir de solution. Avez-vous une solution à ce problème? Est-il possible d’avoir la quantité à gauche et le bouton d’achat à droite sur la même ligne?
    Merci à l’avance.

    1. Bonjour,

      Les navigateurs interprète différemment les inputs. Sur IE il n’y a pas peut-être pas de flèches effectivement.
      Pour les aligner vous pouvez faire le test en CSS avec des float (left/right) ou en utilisant display: inline-block

      Merci

  27. Bonjour, grand merci pour votre tuto !
    Je rencontre un petit souci, il ne met en place cette modification que sur les produits avec une réduction et pas les autres. Savez vous d’où cela peut il venir ? (prestashop 1.7.5)

    1. Bonjour,

      Je n’ai pas testé à ce jour sur cette dernière version 1.7.5.
      Il y a la possibilité que vous ayez placé le code dans une condition qui appelle les réductions de prix.
      Vous utilisez le thème par défaut ?

  28. Merci pour votre retour rapide, oui je vois ce que vous voulez dire, effectivement en y regardant plus clairement, c’est l’emplacement dans le fichier tpl qui pose problème, il est inclu dans une condition ;

     »
    {block name=’product_price_and_shipping’}
    {if $product.show_price}

    {if $product.has_discount} »
    // j’imagine que je dois simplement mettre votre code un peu plus haut pr l’exclure de la condition, je vais tester cela, merci ///un theme enfant mais c’est majoritairement le thème par défaut avec qqes modifications css

  29. A tout hasard, savez vous de quel fichier je dois m’inspirer pour avoir le même visuel des flèches pour l’implémentation de la quantité comme sur une fiche produit ?

  30. Bonjour, est il possible de prendre en compte que pour les produits non disponibles à la vente magasin, le bouton soit grisé comme sur la page du produit ? de meme je cherche une solution pour gérer les déclinaisons
    merci pour votre aide

      1. oui j’ai vu effectivement, mais utiliser cette variable ne m’arrange pas, j’ai la gestion des stock activée, je voulais voir si je pouvais utiliser une caractéristique ou une catégorie ou autre chose, je vais reflechir sur la meme logique

  31. Bonjour, je voudrais la même chose sur la version 1.7.5.1 que j’ai installer en local, cela est il possible ? si oui le tutto est le même ou pas ?

    Merci d’avance pour votre réponse

  32. Bonjour à tous s’il vous plait quelqu’un peut m’aider avec le code qu’il faut pour que sur mobile le bouton ajouter au panier ne déborde pas? car sur ordinateur le code marche bien mais sur mobile le bouton descend sur un autre produit.
    Je vous remercie !!

  33. Merci beaucoup pour ce partage ! ça fonctionne très bien sur 1.7.5.1. J’ai juste mis en hidden l’input des quantités. De cette façon, le clic sur le bouton ajoute bien un produit dans le panier et je n’avais pas besoin d’un choix de quantités à ce niveau là.

  34. bonjour , merci beaucoup pour ce partage , j’ai rencontré un problème avec le code css ne fonctionne pas .
    merci d’avance pour votre réponse !

  35. Bonjour,

    C’est très pratique et cela fonctionne idéalement pour des produits sans déclinaisons.
    Est ce que vous me dire comment faire si l’on souhaite que le client ait aussi la possibilité de sélectionner la taille ? ( Si j’ai un produit avec plusieurs déclinaisons de taille l’idéal c’est qu’il choisis la taille qu’il souhaite et la mette directement dans son panier).

    Merci pour votre tuto .

    1. Pour les produits avec déclinaisons cela ajoute le produit par défaut (comme sur les anciennes versions de Prestashop au final).
      Cependant pour rajouter les champs des déclinaisons cela est un autre développement que je n’ai jamais fais encore.

  36. Bonjour,
    Merci pour ce tutoriel très intéressant qui marche sur prestashop 1.7.6.
    L’actuel problème est que le bouton « Ajouter au panier » reste actif sur la page d’accueil même si il n’y a plus de stock pour le produit concerné.

    Je vous suggère une amélioration des fonctionnalités:

    1. Modifier le fichier /themes/nomdevotretheme/template/catalog/_partials/miniatures/product.tpl et copié les lignes ci-dessous (sous la ligne 51)

    <button class="btn btn-primary add-to-cart" data-button-action="add-to-cart" type="submit" {if $product.quantity
    {l s=’Add to cart’ d=’Shop.Theme.Actions’}

    2. Modifier le fichier basedevotresite/themes/nomdevotretheme/assets/css/custom.css
    #products article.product-miniature div.thumbnail-container, article.product-miniature div.thumbnail-container {height: 410px;}
    #products article.product-miniature div.product-description, article.product-miniature div.product-description{height: 172px;text-align: center;}
    #products article.product-miniature div.product-description input.input-group.form-control, article.product-miniature div.product-description input.input-group.form-control{width: 30%;margin-left: auto;margin-right: auto;margin-bottom: 12px;margin-top: 10px;}

    3. Sur l’interface d’administration de prestashop, aller sur Paramètres avancés et Performances et cliquer sur « Vider le cache »
    4. Sur votre navigateur internet, vider vos cookies.

    Vous avez maintenant le même bouton « Ajouter au panier » qui prends en compte en plus les produits plus en stock.

    Bonne journée

    1. Merci j’avais zappé cela, cependant attention pas besoin de faire autant ! 🙂
      Il suffit de mettre dans le bouton : {if !$product.add_to_cart_url}disabled{/if}

      L’articles est à jour !

Laisser un commentaire

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