Pour proposer ces 2 options, nous allons modifier plusieurs fichiers de notre thème Prestashop. Il existe des modules Prestashop gratuits ou payants, mais tout comme sur WordPress, je préfère modifier le thème plutôt que d’ajouter une multitude de plugins.
Nous travaillerons sur le template Prestashop 1.4.5 et utiliserons un plugin jquery pour gérer les cookies : jquery.cookie.js
La liste des produits s’affiche dans plussieurs page. Nous devons donc ajouter ces boutons dans un fichier tpl qui est appelé dès que la page présente une liste de produit.
Le fichier product-sort.tpl fera l’affaire.
Au début de ce fichier (avant {if isset($orderby) AND isset($orderway)}) , ajoutez le code html suivant :
Dans le fichier product-list.tpl, ajoutez après la balise /ul:
</ul>
<br clear="all" />
Le code css pour l’affichage grille n’est pas finalisé, je vous laisse le modifier pour un meilleur résultat.
Le javascript
La partie javascript permettra d’avoir les fonctionnalités suivantes :
au clic sur un des boutons, la liste des produits change d’affichage
ajout d’un cookie pour mémoriser le choix de l’utilisateur
Changement d’affichage
Voici le script pour changer l’affichage (Placer ces lignes dans le fichier footer.tpl, avant la balise
et {/if}) :
<script type="text/javascript">
$(document).ready(function() {
var ul='#product_list';
var div_btn='div.view_options';
$('.view_options a').click(function(){
var height=$(ul).height();
var width=$(ul).width();
var ul_class=$(this).attr('id');
$(div_btn).removeClass('list_l_active').removeClass('grid_l_active');
$(div_btn).addClass(ul_class+'_active');
$(ul).hide().wrap('<div class="loading_view" style="height:'+height+'px;width:'+width+'px"></div>').delay(100).removeClass().addClass(ul_class+' clear clearfix').fadeIn('fast',function(){$(this).unwrap()});
return false;
});
});
</script>
Pour résumer, ce script permet d’ajouter une classe list_l ou grid_l à la liste selon le bouton cliqué.
Jquery : ajout d’un cookie
Pour que l’option grille ou liste soit enregistrée à chaque visite de l’utilisateur, nous devons enregistrer un cookie. Ce cookie sera ensuite lu dans le template product-list.tpl.
Pour travailler avec les cookies et jquery, le plugin jquery.cookie est parfait (téléchargez ici ce plugin).
Enregistrez ce plugin dans le dossier js de votre thème et ajoutez ce plugin au dessus du script précédent :
La création d’un cookie est très simple, il suffit de donner un nom au cookie, une valeur et une date d’expiration. par défaut nous attribuons la valeur list_l ce qui correspond à un affichage liste
Modifions maintenant notre script d’affichage pour modifier la valeur du cookie au clic sur une des deux options :
<script type="text/javascript">
$(document).ready(function() {
if($.cookie('gridorlist_prestarocket')==null){
$.cookie('gridorlist_prestarocket', 'list_l', { expires: 365, path: '/' });
}
var ul='#product_list';
var div_btn='div.view_options';
$('.view_options a').click(function(){
var height=$(ul).height();
var width=$(ul).width();
var ul_class=$(this).attr('id');
$(div_btn).removeClass('list_l_active').removeClass('grid_l_active');
$(div_btn).addClass(ul_class+'_active');
$(ul).hide().wrap('<div class="loading_view" style="height:'+height+'px;width:'+width+'px"></div>').delay(100).removeClass().addClass(ul_class+' clear clearfix').fadeIn('fast',function(){$(this).unwrap()});
//mise à jour du cookie
$.cookie('gridorlist_prestarocket', ul_class, { expires: 365, path: '/' });
return false;
});
});
</script>
Passons maintenant à l’étape suivante : lecture du cookie dans le fichier product-list.tpl
Cookie et Smarty
Les modifications effectuées plus haut permettent de proposer 2 modes d’affichage mais lorsque l’utilisateur change de page, l’option n’est pas mémorisée et l’idée ici est de garder “en mémoire” le choix de l’utilisateur d’une page à l’autre et d’une visite à l’autre.
Pour lire la valeur de notre cookie dans un fichier Smarty (tpl), il suffit d’utiliser la variable réservée :
{$smarty.cookies.nom_du_cookie}
Dans le fichier product-list.tpl, ajoutons les ligne suivantes après {if isset($products)} :
