02
Mar

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

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 63 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" style="padding: 9px 10px; float:left;width: 30%; margin-left: 10px;" class="input-group form-control" name="qty">
    <button style="float:left;margin-left: 13px" data-button-action="add-to-cart" class="btn btn-primary">{l s='Add to cart' d='Shop.Theme.Actions'}</button>
</form>

Vous devez avoir :

rendu-apres-ajout-bouton-panier-prestashop-1-7

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 directement dans theme.css du thème Classic. Attention il est peut-être préférable d’utiliser un thème enfant Prestashop.

Rendez vous dans : basedevotresite/themes/nomdevotretheme/assets/css/theme.css
(Vous pouvez décompresser votre fichier pour y voir mieux)

/*! Cherchez ces lignes une par une dans votre fichier : */

#products .thumbnail-container,.featured-products .thumbnail-container,.product-accessories .thumbnail-container,.product-miniature .thumbnail-container{position:relative;margin-bottom:1.5625em;height:318px;width:257px;background:#fff;box-shadow:0 0 5px 3px rgba(0,0,0,.05)}

#products .product-description,.featured-products .product-description,.product-accessories .product-description,.product-miniature .product-description{position:absolute;z-index:1;background:#fff;width:257px;bottom:0;height:70px}

#products .product-price-and-shipping,.featured-products .product-price-and-shipping,.product-accessories .product-price-and-shipping,.product-miniature .product-price-and-shipping{color:#414141;font-weight:700;text-align:center}

/*! Remplacez par : */

#products .thumbnail-container,.featured-products .thumbnail-container,.product-accessories .thumbnail-container,.product-miniature .thumbnail-container{position:relative;margin-bottom:1.5625em;height:355px;width:257px;background:#fff;box-shadow:0 0 5px 3px rgba(0,0,0,.05)}

#products .product-description,.featured-products .product-description,.product-accessories .product-description,.product-miniature .product-description{position:absolute;z-index:1;background:#fff;width:257px;bottom:0;height:115px}

#products .product-price-and-shipping,.featured-products .product-price-and-shipping,.product-accessories .product-price-and-shipping,.product-miniature .product-price-and-shipping{color:#414141;font-weight:700;text-align:center;margin-bottom: 4px}

Voilà le résultat :

prestashop-1-7-ajouter-bouton-au-panier

Il y a encore des petites optimisations à faire, caler l’aperçu rapide, enlever le champ quantité etc.

Peut-être dans une mise à jour de cet article :)

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

Commentaires ( 16 )
  • Crouzat Rémy dit:

    Super, merci, ça faisait une heure que je cherchais.

  • HC dit:

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

    • Matthieu
      Matthieu dit:

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

  • Renard François dit:

    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 ?

  • Reymond dit:

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

  • Kerlin dit:

    Merci !! Vous m’avez sauvé !

  • Kerlin dit:

    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

    • Matthieu
      Matthieu dit:

      Il faut rajouter value=‘1’ dans le input de type number

      • kerlin dit:

        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 !

        • kerlin dit:

          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

  • James dit:

    ça ne marche pas sur Prestashop 1.7.12 !

LAISSER UN COMMENTAIRE

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