#Prestashop : Améliorer le champ quantité de la page produit avec Jquery

Voici un tutoriel pour améliorer l’ergonomie de la fiche produit et plus précisément le formulaire d’ajout au panier.
Le champ quantité sur le thème par défaut de Prestashop est un simple champ input text où le visiteur doit renseigner la quantité à commander en utilisant son clavier numérique.

Notre solution pour améliorer l’expérience client sur les sites sous prestashop, est d’ajouter un bouton plus et un bouton moins à côté du champ quantité qui incrémente ou décrémente la quantité .

DEMO

Les fichiers de votre thème à modifier sont les suivants :

  • product.tpl
  • footer.tpl
  • product.css

Ajout des boutons dans le fichier product.tpl et mise en forme css

Cherchez les lignes suivantes dans le fichier product.tpl :

[code lang="php"]
<!-- quantity wanted -->
<p id="quantity_wanted_p"{if (!$allow_oosp && $product->quantity <= 0) OR $virtual OR !$product->available_for_order OR $PS_CATALOG_MODE} style="display: none;"{/if}>
<label>{l s='Quantity :'}</label>
<input type="text" name="qty" id="quantity_wanted" class="text" value="{if isset($quantityBackup)}{$quantityBackup|intval}{else}{if $product->minimal_quantity > 1}{$product->minimal_quantity}{else}1{/if}{/if}" size="2" maxlength="3" {if $product->minimal_quantity > 1}onkeyup="checkMinimalQuantity({$product->minimal_quantity});"{/if} />
</p>
[/code]

Et remplacez-les par les lignes suivantes :

[code lang="php" highlight="4,6"]
<!-- quantity wanted -->
<p id="quantity_wanted_p"{if (!$allow_oosp && $product->quantity <= 0) OR $virtual OR !$product->available_for_order OR $PS_CATALOG_MODE} style="display: none;"{/if}>
<label>{l s='Quantity :'}</label>
<span class="btn-qty"><a href="#" class="btn-down">-</a></span>
<input type="text" name="qty" id="quantity_wanted" class="text" value="{if isset($quantityBackup)}{$quantityBackup|intval}{else}{if $product->minimal_quantity > 1}{$product->minimal_quantity}{else}1{/if}{/if}" size="2" maxlength="3" {if $product->minimal_quantity > 1}onkeyup="checkMinimalQuantity({$product->minimal_quantity});"{/if} />
<span class="btn-qty"><a href="#" class="btn-up">+</a></span>
</p>
[/code]

Dans le fichier product.css de votre thème, ajoutez les lignes suivantes pour mettre en forme ces boutons :

[code lang="css"]
.btn-qty{
display: inline-block;
}
.btn-qty a{
width:20px;
height:20px;
background:#000;
color:#fff;
display:none;
text-align:center;
line-height:18px;
text-decoration:none;
font-weight:bold;
}
.btn-qty a:hover{
background:#333333;
color:#fff;
}
[/code]

Après ces modifications, le champ quantité de votre page produit ressemblera à ceci :

Un peu de Jquery

Les fonctionnalités du script Jquery sont les suivantes :

  • augmentation ou diminution de la quantité au clic sur les boutons +/-
  • le champ quantité doit être supérieur ou égal à 1
  • le champ quantité doit être supérieur ou égal à la quantité minimale pour commander le produit
  • afficher le message d’alerte en rouge si l’internaute choisit une quantité inférieure à la quantité minimale

Dans le fichier footer.tpl, ajoutez ces ligne avant la balise </body> :

[code lang="php"]
<!-- on affiche le script uniquement si l'on se trouve sur la page produit -->
{if $page_name eq 'product'}
{literal}
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
var btn = $(".btn-qty a");
//on affiche les boutons +/-
$(btn).css('display','block');
$(btn).click(function() {
var $button = $(this);
var input_qtity = $('#quantity_wanted');
var qty_value=$(input_qtity).val();
var qty_min=parseFloat($('#minimal_quantity_label').html());
var qty_min_p = $('#minimal_quantity_wanted_p');
//on vérifie si le le produit ou la combinaison a une quantité minimum de commande
if($('#minimal_quantity_wanted_p').is(':hidden')){
var min=false;
}
else
{
var min=true;
}
//si le btn a la class btn-up, on est sur le btn +
if ($button.hasClass('btn-up')) {
var newVal = parseFloat(qty_value) + 1;
$(input_qtity).val(newVal);
$(qty_min_p).css('color','');
$(input_qtity).css('border', '');
}
else
{
//btn -
//condition pour vérifier que le champ est >= 1
if (qty_value - 1 >= 1) {
//minimum de commande et qtité >= mini de commande
if (min=true && qty_value - 1 >= qty_min) {
var newVal = parseFloat(qty_value) - 1;
$(input_qtity).val(newVal);
$(qty_min_p).css('color','');
$(input_qtity).css('border', '');
}
// qtité <= mini de commande
else if(min=true && qty_value - 1 <= qty_min)
{
$(qty_min_p).css('color','red');
$(input_qtity).css('border', '1px solid red');
}
}
}
return false;
});
});
// ]]></script>
{/literal}
{/if}
[/code]

Vous pouvez améliorer ce script en ajoutant des class CSS pour gérer l’affichage des messages d’alerte.

Si vous avez des remarques ou des suggestions, n’hésitez pas à commenter cet article !

  • Arnaud Mérigeau

    Hello,
    J’ai fais un petit tuto se rapprochant du tien qui pourra sûrement aider aussi, c’est ici : http://www.prestashop.com/forums/topic/147952-agir-sur-les-attributs-du-produt/page__fromsearch__1
    :)

  • Ampisoa Mbara

    Bonjour,

    Je suis sous prestashop 1.4 et je cherche un moyen de modifier la quantité du produit via un input mais dans le fichier shopping-cart-product-line.tpl

    Si quelqu’un peut m’aider, merci

  • Bruce

    Bonjour,

    Avez-vous une astuce pour mettre à jour le prix en fonction de la quantité ?

    Merci d’avance

  • johann1

    Bonjour,

    Je viens de découvrir ce petit hack sympa.
    Certes je le retrouve dans le produit, mais rien dans l’admin.

    En effet, j’aimerais contrôler pour l’un ou l’autre produit des quantités diverses.
    Ex: Un produit avec un quantité d’achat minimum de 2 et l’autre de 3.
    Est-ce possible ? Ai-je raté un épisode ? :O)
    Merci pour votre aide

    • http://www.prestarocket.com/ Prestarocket

      Bonjour,

      Normalement, c’est géré car #minimal_quantity_label varie d’un produit à l’autre..

      • johann1

        Pardonne-moi PrestaRocket, je ne comprends pas.
        Du côté de l’admin du produit (prix ?), je ne retrouve rien de plus qu’avant pour l’obliger à prendre obligatoirement 10 ou 20 produits.

  • http://www.facebook.com/lordbdp Bryon Marc

    Superbe et en plus fonctionne sous PS 1.5.4.1. ^^

    Comment faire pour remplacer le + et – par des images svp ?

    • Flo du Web

      simple et facile, tu ajoute dans la balise a ceci :



      Tu dis ensuite dans ton css, un background: none; et paf the dog
      N’oubli pas de mettre tes images dans le répertoire img du template

  • Julien Henry-Prince

    Hello, fonctionne super en local mais pas en ligne… Une idée ?!
    Merci d’avance !

  • SARAH

    bonjour,
    je suis sous prestashop 1.5.4.1 et j’ai suivi ce tuto.
    je vous en remercie.
    cependant je rencontre un souci: le bouton – ne fonctionne pas.
    pas de souci pour le plus
    avez vous une idée?
    peut etre dois je supprimer le minimal quantity ( je ne m’en sers pas)
    merci a vous

  • SARAH

    test

  • SARAH

    bonjour,
    merci pour ce tuto
    je l’ai suivi a la lettre, mais je rencontre un petit souci. en effet si je peux ajouter des produits avec le bouton +? IMPOSSIBLE DE DIMINUER AVEC LE BOUTON –
    une idee svp?

    • http://www.prestarocket.com/ Prestarocket

      Bonjour, sans url de votre site, difficile de vous aider