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