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

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 :

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

Et remplacez-les par les lignes suivantes :

		

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

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

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

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 :

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

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 !