15 Sep 2022
Ajouter un bouton acheter sur la liste produit Prestashop

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

Mise à jour de l’article 15/09/2022 : Ce tutoriel fonctionne avec les dernières versions en cours de Prestashop (Test effectué sur 1.7.8.7). Tutoriel en vidéo dans 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 impact 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.

Un tutoriel vidéo Prestashop 1.7 pour créer un bouton d’ajout panier sur la liste produit

N’hésitez pas à vous abonnez à ma chaîne Youtube ou mettre un j’aime voir un commentaire. Cela m’aide beaucoup pour créer d’autres contenu sur Prestashop 🙂

Exemple de code pour affiche le bouton ajouter au panier sur 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 (ou 52 selon votre version) avant le bloc product_price_and_shipping.

Par exemple, sur Prestashop 1.7.8.7, c’est à la ligne 77.

Vous devez coller ce code  :

<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.

Appliquez du style CSS sur le bouton ajouter au panier

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: 422px;}
#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;}
#products .thumbnail-container .product-thumbnail img, .featured-products .thumbnail-container .product-thumbnail img, .product-accessories .thumbnail-container .product-thumbnail img, .product-miniature .thumbnail-container .product-thumbnail img {bottom: inherit;}
#products .product-price-and-shipping, .featured-products .product-price-and-shipping, .product-accessories .product-price-and-shipping, .product-miniature .product-price-and-shipping {margin-top: 5px}

Voilà le résultat :

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

Ne pas afficher le champ quantité sur la liste produit Prestashop

Vous souhaitez uniquement le bouton sans le champ quantité ? Vous devez alors utiliser ce bout de code au même emplacement que ci-dessus :

<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">
<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>

Par contre il va falloir aussi adapter votre code css comme ceci :

#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;}
#products .thumbnail-container .product-thumbnail img, .featured-products .thumbnail-container .product-thumbnail img, .product-accessories .thumbnail-container .product-thumbnail img, .product-miniature .thumbnail-container .product-thumbnail img {bottom: inherit;}
#products .product-price-and-shipping, .featured-products .product-price-and-shipping, .product-accessories .product-price-and-shipping, .product-miniature .product-price-and-shipping {margin-top: 5px}

Un module Prestashop pour un bouton acheter maintenant

L’intégration via le code est assez simple mais nécessite de devoir mettre les mains dans le code. Ceci n’est pas évident pour tout le monde.

Je peux vous préconiser un module pour intégrer cela automatiquement : Afficher le bouton Ajouter au panier avancée.

Afficher le bouton ajout panier dans la liste avec un module
Aperçu du module

La fonctionnalité principale est l’implémentation du bouton dans les listes produits mais vous pouvez le personnaliser pour aller plus loin. Les boutons peuvent être transformés en “Acheter maintenant”, ce qui va permettre d’être redirigé automatiquement dans la page de commande sans passer par le panier. Le principe est d’aller à l’essentiel pour l’utilisateur.

Je vous donne un autre module pour faire cela : Liste produits Bouton Ajouter au panier | Aperçu panier

Une formation Prestashop pour créer sa boutique seul

Cela améliore-t-il l’expérience client sur mon Prestashop ?

En e-commerce, on estime que le client doit cliquer le moins de fois possible pour convertir à l’achat. S’il doit naviguer de pages en pages pour pouvoir acheter, alors il y a plus de risque qu’il quitte le site.

Le fait d’avoir un bouton ajouté au panier sur votre produit va permettre au client qui souhaite l’acheter, de pouvoir passer au panier plus facilement.

Vous souhaitez déléguer l’ajout de ce bouton ?

– Je me connecte à votre boutique Prestashop et votre serveur
– Application dans votre thème le code du bouton et le style CSS
– Je valide cela avec vous par e-maol

Il suffit de commander un ticket de support Prestashop depuis mon site.

157 commentaires sur “Afficher un bouton ajouter au panier sur le listing produit de Prestashop 1.7
  1. JE N Y ARRIVE PAAAAAS !
    Je viens d’ovh, j’ai une page web admin…
    merciiii…je desespere… mon site doit être opérationnel au 1er juin….

    1. J’ai réalisé cette intervention pour un de mes clients, donc en suivant ce tutoriel cela devrait être bon.
      Vous bloquez ou ?

  2. 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 ?

  3. 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’}

  4. 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

  5. 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.

  6. 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 🙁

  7. 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 !

  8. 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.

  9. 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 ?

    1. On me le demande souvent mais je n’ai pas encore mis à jour mon article !
      C’est au programme pour bientôt, je vous indiquerai cela par mail 🙂

  10. 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?

  11. 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

    1. Bonjour,

      Votre commentaire a rien à voir avec cet article.
      Merci de me faire un mail pour une intervention sur votre site

      Bonne journée

  12. 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

  13. 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 🙂

  14. 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?

  15. 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.

  16. 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 !

  17. 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.

  18. 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

  19. 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

  20. 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.

  21. {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 ?

  22. 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

  23. 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}

  24. 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

  25. 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.

  26. 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.

  27. 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

  28. 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 ?

  29. 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

  30. 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 ?

  31. 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

  32. 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

    1. Bonjour,

      Je n’ai pas connaissance d’un changement de structure dans cette version de Prestashop.
      Le tuto va fonctionner 🙂

  33. 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 !!

  34. 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à.

  35. 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 !

  36. 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.

  37. 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 !

    1. Bonjour,

      Dans le code supprimez le champ quantité :
      input type=”number” class=”input-group form-control” name=”qty” value=”1″

      Cette ligne permet l’affichage de ce champ dans vos listes produits.

  38. Salut Matthieu et merci beaucoup pour ce tuto.

    J’ai cependant un petit problème d’affichage, si le champs quantité est bien dans le cadre, le bouton ajouter au panier, lui, s’affiche en dehors du cadre blanc, par dessus les articles de la ligne du dessous. Je t’aurai bien fait un printscreen…

    Comment se fait-il ? je suis sur la version 1.7.5.1

    1. Il faut bien appliquer le CSS ci-dessus.
      Comme sur ma capture, le bouton sort du cadre produit.

      Cependant si vous avez un thème spécifique il peut y avoir du CSS propre à lui et donc il faut adapter le code CSS de mon article.
      Une fois appliqué, n’oubliez pas de vider le cache pour voir les modifications.

        1. Avez-vous bien appliqué le CSS et modifié le cache ?
          Il faudrait inspecter votre code dans le navigateur pour voir si le nouveau style est bien appliqué à votre Prestashop

  39. Bonjour, et merci pour ce tuto.

    J’ai voulu faire en sorte que ça ressemble comme dans ma fiche produit avec les flèches pour la quantité. J’ai ajouté id=”quantity_wanted” à la ligne du input type=number et cela l’affiche très bien mais seulement sur le premier produit de la liste catégorie. Vous sauriez me dire pour quoi ? Merci beaucoup

          1. Je suis sur Presta 1.7.6.1, et dans le thème il y a tout une suite qui dit une fois (not first child) ou une autre fois (not last child) et j’ai un peu de mal à comprendre ^^. En plus dedans il y a juste un border-radius à 0 je ne comprends pas trop.
            bref merci pour ton aide, du coup j’ai activé les flèches sur chrome et firefox et désactivé cette vue dans la fiche produit pour avoir la même chose partout. C’est un peu dommage car l’autre apparaît sur tout navigateur ou mobile.

          2. Merci de ton retour, après c’est spécifique selon le thème de chacun donc compliqué de faire du cas par cas.
            Avec le thème de base il faut voir l’intégration particulière à chacun de s’adapter selon ses besoins 😉

            Pour information nous ne pouvons pas joindre des images sur les commentaires, merci ta contribution !

          3. justement j’utilise le thème classic, et je ne vois personne d’autre qui a déjà eu ce cas sur internet. Ok désolé pour l’image, c’était surtout pour montrer aux autres ce qu’on peut faire.

  40. Bonjour,

    Je vous remercie d’avoir mis ce code à disposition et de suivre les commentaires.
    Cela fonctionne bien, mais, car il y a toujours un “mais” après une demande de renouvellement du mot de passe d’un compte, le bouton n’est plus fonctionnel sur la liste. En page produit cela fonctionne normalement.

    D’autres utilisateurs ont ils eu ce bug et avez vous une piste pour expliquer cela ?

    Prestashop 1.7.5.1 avec le theme “classic”

    1. Bonjour,

      Le bouton ajouter au panier + renouvellement du mot de passe c’est 2 choses complètements différentes et en plus pas sur la même page… Il faut une meilleure description du problème.

      1. Bonjour et merci de m’avoir répondu,

        Le problème est lié à la gestion du cache. Cache activé, ça buggue, cache désactivé c’est OK.

        Les tables clients viennent de l’ancienne version du site sous 1.6 et je n’ai pas de problème avec les mots de passe.

        Prestashop 1.7.5.1 avec le theme « classic »

        1. Votre problème n’est pas lié au bouton ajouter au panier de Prestashop comme dans mon article ?
          Si c’est hors sujet à l’article merci de me faire un mail directement svp.

  41. Bonjour,
    Je viens de Lire votre article ainsi que les messages , le bouton ajouter au panier fonctionne bien, mais il apparaît toujours en dehors du cadres sur les article du dessous. Malgrés avoir modifié le fichier custom.css
    Cordialement

  42. Si vous avez quelques minutes pouvez vous m’expliquer comment faire pour que le message de rupture de stock soit repris sous le bouton “ajouter au panier”

    Si rupture de stock (et précommande autorisée)
    Bientôt de retour

    Merci

    1. Il faut un petit développement particulier pour l’afficher. Ce n’est pas le but de cet article, peut-être qu’un jour je le ferai sur ce sujet 😉

  43. Bonjour ,
    J’ai une petite modification à faire mais je ne sais pas comment .
    J’ai mes produits qui sont avec des déclinaisons , quand on clic sur ajouter au panier , on obtient que le plus petit produit .
    On ne peut pas choisir la déclinaison de longueur .
    Ce serai bien une fois avoir cliqué sur ajouter au panier , le client puisse choisir la longueur du produit.
    Une petite explication ?
    Merci d’avance .

    1. L’ajout panier va mettre le produit par défaut au panier. Sur le back-office vous pouvez définir quel produit est par défaut sur l’onglet déclinaison. Cependant, mettre les choix de déclinaisons après l’ajout est un développement assez lourd que je ne peux expliquer ici. Le mieux est de réfléchir à mettre un bouton “voir le produit” qui amène sur la fiche produit s’il possède des déclinaisons.

    1. Bonjour,

      Non parce que ce sont des modifications du thème et non de Prestashop.
      Le dossier override est réservé à l’ajout de fonctionnalités de la solution.
      Si le thème dispose d’un thème “enfant”, elles peuvent être faite dedans.

  44. Bonjour Matthieu,
    si on fait les modifs de ces 2 fichiers via le thème enfant.
    est-ce que l’on met seulement les parties du code à ajouter dans les 2 fichiers du thème enfant ou tout le code du fichier du thème classic et on modifie une partie ?
    Merci

  45. Bonjour,

    Je suis débutant dans tout celà et j’ai suivi les étapes.
    Merci pour votre article cela fonctionne nickel.
    Il y aurait il la possibilité d’afficher le bouton juste à côté du champ de saise et de remplacer le texte par une icône?

    En vous remerciant,

    1. Bonjour,

      Oui, à la place de {l s='Add to cart' d='Shop.Theme.Actions'} il faut mettre une balise icône ou image.
      Par exemple sur Prestashop 1.7 l’icône du panier est :
      Icon Panier HTML Prestashop 1.7
      Il faut vérifier si ça peut fonctionner sur la liste produit et adapter en CSS selon vos besoins.

      1. Merci encore une fois .
        Ça met bien l’icone sur le bouton et tout fonctionne bien.

        En revanche je n’ai pas réussi à placer les deux éléments l’un à côté de l’autre (j’ai tâtonné comme j’ai pu; mais bon ça ne s’improvise pas) 🙂

  46. Bonjour et merci pour e travail.
    J’ai réussi la première étape, mais pas la deuxième. Le bouton reste décalé.
    Merci d’avance pour votre aide

    1. Avez-vous bien vidé le cache Prestashop ? Vérifiez aussi en navigation privée.
      Si vous avez bien intégré le CSS sur le thème par défaut il n’y a pas de raisons.

      Merci

  47. bjr

    Alors moi je m’arrache les cheveux !!! Quand je vais sur mon fichier zip en suivant votre demarche, on me repond ceci

    le fichier ne contient pas d’appli associe pour effectuer cette action.
    installer une appli ou si c’est deja fait creer une association sur la page parametres des appli par defaut.

    besoin d’aide please..

    merci

    1. Bonjour,

      Alors pour ouvrir un fichier zip, vous pouvez utiliser sur mac l’application (gratuite) The Unarchiver et sur PC Winzip.

      Merci bien

  48. Bonjour,

    votre astuce est au top ! J’essaie de la coupler avec le module qui affiche chaque produit par déclinaison dans les catégories. Pour le moment en 1.7, évidemment il me met le produit par défaut. Mais comme la déclinaison est déjà visible j’ai tenté d’ajouter un input si le produit a des déclinaisons ça :

    {if isset($product.id_product_attribute) && $product.id_product_attribute}

    {/if}

    Je récupère bien l’id de l’attribut dans la value mais ça ne semble pas être assez pour la mise au panier.
    Une petite idée ? Je dois récupérer quoi ?

    Merci pour votre retour 🙂 Si vous trouvez cette solution vous auriez ma reconnaissance éternelle ^^

    1. Bonjour,

      Vous voulez créer un produit par déclinaison dans le product list ?
      Si c’est le cas, pour le SEO ce n’est pas optimal et il y a des modules il me semble bien pour ça.

      Malheureusement ce n’est pas le sujet de cet article, vous pouvez me faire un mail avec votre demande à contact@matthieu-jalbert.fr

      1. Pas du tout 🙂 J’ai déjà un produit / déclinaison dans le product list grâce au module “Products by attributes: Produits affichés par attributs” de Presta Module.

        Je souhaite mettre dans mon panier la bonne déclinaison affichée (dans mon cas un dvd ou un blu-ray) et non la déclinaison par défaut dans le product-list. Ça doit pas se jouer à grand chose !

        1. Je n’ai pas ce pas ce module sous la main et je ne peux donc pas regarder cela.
          Il y a peut-être une variable du module à rajouter et où un appel JS à appliquer en plus.

          Connaissant Presta Module, si vous demandez au support ils vous donneront la méthode pour l’appliquer à leur module.

          Merci bien

  49. Merci pour ce tuto
    j’ai bien le bouton mais je n’ai pas de fichier custom.css
    Alors j’en ai créé un mais alors le bouton ajouter au panier disparait…
    Une idée pour m’aider?
    Merci

    1. Il faut voir dans le code si le custom.css est bien pris en compte vu qu’il n’existait pas.
      (sur le site, ouvrir l’inspecteur de votre navigateur et chercher le custom.css)
      Si mon code CSS ne s’adapte pas à votre site / thème, il va falloir l’adapter. Il est peut-être juste masqué
      Comme ça je ne peux pas savoir ce qui bloque

      1. Merci, j’ai fait une recherche et custom.css n’est pas appelé dans mon fichier thème.
        Bon avec mon thème (qui est le classic) et ma version (1.7.8) le bouton ne masque pas les autres produits, je vais laisser comme ca.

  50. Bonjour monsieur Jalbert,

    Tout d’abord, merci pour ce travail c’est super !
    Actuellement j’ai la version 1.7.8.7 de PS et quand je télécharge le dossier classic child afin d’effectuer des modification j’ai bien accès à “assets” et ce jusqu’au CSS. Mais je n’ai pas de dossier “catalog” donc je ne peux pas modifier les lignes de codes. Savez-vous comment je peux faire ? Dois-je passer uniquement pat DevTools ?
    Le seul autre dossier s’appelle “config” mais il ne contient pas ce qu’il faut.

    En attendant votre retour,
    Je vous remercie par avance,
    Maïlys.

      1. D’accord merci, par contre ou je trouve le dossier .tpl déjà créé svp, car je ne peux pas taper qu’un bout de code ? je ne sais même pas si mon ordi ouvre ce type de fichier

        1. Dans le dossier Classic du thème, vous avez les sources. Il vous faut un éditeur de code ensuite. Mais je ne peux pas donner des explications de codage comme ça. Regardez des tutoriels sur les éditeurs de code en fonction de votre ordinateur (pc, mac etc).

          1. D’accord je vais essayer de m’en sortir comme ça ! merci en tout cas ! je suis désolée je suis tellement nulle dans ce domaine.
            Bonne journée,
            Maïlys.

  51. Bonjour
    Merci pour le code car je recherchais exactement ça , je voudrais que la case quantité n apparaisse que lorsque que l on est connecté
    Y a t il une modification que je puisse faire ?merci

Laisser un commentaire

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