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.
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 :
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/
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 :
Par contre il va falloir aussi adapter votre code css comme ceci :
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.
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
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.
Super, merci, ça faisait une heure que je cherchais.
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….
J’ai réalisé cette intervention pour un de mes clients, donc en suivant ce tutoriel cela devrait être bon.
Vous bloquez ou ?
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 ?
Et en rajoutant dans le input de la quantité, value=‘1’, cela fonctionne ?
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’}
le code html ne s’affiche pas mais il correspond à la ligne {l s=’Add to cart’ d=’Shop.Theme.Actions’}
Merci !! Vous m’avez sauvé !
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
Il faut rajouter value=‘1’ dans le input de type number
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 !
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
Petite erreur ne pas oublier le $ pour la variable smarty
{if $product.quantity >0}
<form action …
ça ne marche pas sur Prestashop 1.7.12 !
Merci je vais faire un test et essayer d’adapter à cette version de Prestashop 1.7 🙂
Qu’en est-il avec Prestashop 1.7?
Je rencontre le même problème
Justement c’est pour 1.7
Mais pas pour 1.7.1 vous voulez dire.
Je n’ai pas encore testé sur cette version
L’article est à jour
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
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.
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 🙁
Voilà, l’article est à jour pour les dernières versions de PS 1.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 !
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..
J’ai réalisé cela sur un Prestashop 1.7.0.4 d’un client avec des filtres et cela fonctionne.
Quelle est votre version ?
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.
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 ?
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 🙂
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?
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
Bonjour,
Votre commentaire a rien à voir avec cet article.
Merci de me faire un mail pour une intervention sur votre site
Bonne journée
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
Vous avez la réponse maintenant 🙂
Merci infiniment 🙂 vous êtes vraiment top 🙂
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 🙂
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
Cela me semble être un problème Javascript.
Vous utilisez un thème premium ou le thème classic Prestashop ?
j’utilise le thème classic
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.
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?
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
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.
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 !
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.
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.
En fin je ne sais pas a quoi correspond la ligne 61 , pourriez vous me montrer avec une photo.
Vous avez le code ci-dessus pas besoin de photo ça sera la même chose.
bonjour a tous , j’aimerai avoir une solution afin de remplacé Ajouter au panier , par Au Panier cordialement prestashop 1.7
Il suffit de changer le mot dans les traductions de Prestashop
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
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
Responsive*
Vous utilisez le thème par défaut ou un autre thème ?
oui pardon responsive
thème par défaut dont j’ai modifier un peu le css
bonjour vous n’avez pas de solutions ?
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
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
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
Un grand merci ça marche a perfection pour moi (y)
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.
{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?
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 ?
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
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
Bonjour,
Nativement non, il faudrait faire un dev spéc en plus mais pour le moment je ne suis pas penché dessus 😉
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}
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}
Bonjour,
Cela doit terminer par {/if} et non {/disabled}
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
Cela va dépendre des thèmes aussi, il y a plusieurs raisons possible, c’est du cas par cas
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
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 !
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.
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.
Bonjour,
comment réduire la taille d’écriture du bouton ?
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.
je dois donc intégrer cela dans le CSS indiqué dans le tuto ? ou dans mon theme ?
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.
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
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)
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 ?
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
Si vous avez le thème par défaut suivez exactement le tuto et ça sera bon.
Bonne continuation
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 ?
car j’ai beau tester dans tous les sens je n’y arrive pas
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
Vous avez la réponse dans les commentaires en utilisant la variable product.quantity
Merci
ok merci dsl je vais aller revoir ça
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
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
Bonjour,
Je n’ai pas connaissance d’un changement de structure dans cette version de Prestashop.
Le tuto va fonctionner 🙂
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 !!
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à.
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 !
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 .
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.
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
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 !
Matthieu, dans le bouton, c’est à dire à quel endroit?
Cela est déjà dans le code de mon article pour ajouter le bouton au panier.
Il n’y a rien à rajouter
Bonjour comment faire pour ne pas avoir la case avec le nombre?
merci par avance
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.
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
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.
Bonjour,
J’ai le même soucis j’utilise le thème classic et je suis la version 1.7.6.2
Merci pour ce tuto très clair !
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
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
Il faut voir si vous n’avez pas un code CSS qui s’applique uniquement à un seul élément de la liste
Il ressemblerait à quoi ? First-child last-child ?
Oui exactement, ça peut-être cela
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.
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 !
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.
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”
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.
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 »
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.
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
Bonjour,
Sur le thème classic ? Avec quelle version de Prestashop ?
Merci
L’article est à jour !
Woouuwww génial, superbe tuto et éfficace. Merci beaucoup !
🙂
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
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 😉
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 .
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.
Bonjour,
les modifications dont vous parlez, doit-on ou peut on les faire dans le dossier override ?
Merci
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.
Bonjour merci pour le superbe tuto
Merci beaucoup !
prestashop 1.7.6.4
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
Il faut mettre l’ensemble du fichier
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,
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 :
Il faut vérifier si ça peut fonctionner sur la liste produit et adapter en CSS selon vos besoins.
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) 🙂
Parfait.
Du coup cela doit changer par rapport à ce que j’apporte dans l’article.
Si vous avez besoin d’une intervention pour placer l’ensemble vous pouvez commander un ticket ici
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
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
Bonjour,
Il fallait le mettre dans theme.css directement, et ça marche.
Merci beaucoup.
Au top, fonctionne en 2mn sur un thème enfant Classic 🙂
De simples copier-coller ont suffit à ce que tout marche du premier coup
Visible à cette URL => https://hygiaphone-plexiglas.fr/13-visieres-de-protection-sanitaire
Super tuto, comme d’hab’
Merci pour ton commentaire 😀
Génial l’exemple héhé
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
Bonjour,
Alors pour ouvrir un fichier zip, vous pouvez utiliser sur mac l’application (gratuite) The Unarchiver et sur PC Winzip.
Merci bien
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 ^^
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
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 !
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
bonjour
probleme de css avec mon theme
si vous ouvez m aider
sur la fiche produit la aussi le bouton ajouter serait le bienvenu
merci
Il faut adapter selon votre thème et votre charte graphique.
Si vous n’arrivez pas à modifier CSS, vous pouvez m’écrire pour un devis.
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
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
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.
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.
Il suffit de créer le dossier catalog et ainsi de suite et d’y ajouter les fichiers du thème classic que vous souhaitez modifier
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
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).
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.
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
Merci, utilisez une condition comme {if $logged} pour adapter votre code
encore merci pour la solution