Accueil > Dossiers > E-commerce > Comment modifier le mode d’affichage par défaut des produits d’une catégorie dans Prestashop (liste ou grille)

Comment modifier le mode d’affichage par défaut des produits d’une catégorie dans Prestashop (liste ou grille)

Sur votre boutique en ligne, vous aurez peut-être remarqué qu’il est possible de choisir le type d’affichage de la liste de vos produits dans les différentes catégories. Cette fonctionnalité se présente sous la forme de 2 pictogrammes situés en haut de votre liste de produits et vous permet de choisir un affichage en mode «liste» ou en mode «grille» (sorte de mosaïque). En cliquant sur l’une des deux options, un cookie est installé sur votre ordinateur afin de conserver en mémoire votre réglage préféré qui sera automatiquement affiché lors de votre prochaine visite.

Affichage en grille ou en liste des produits avec Prestashop

Mais alors comment choisir le mode d’affichage par défaut pour les internautes qui visitent votre site pour la première fois ? Ce paramètre n’étant pas réglable via le back-office il est nécessaire de modifier légèrement les fichiers de votre template.

InformationLa version de Prestashop ayant servis de référence pour l’établissement des modifications qui suivent est la V.1.5.3.1.

Nous allons modifier les 2 fichiers suivants :
product-list.tpl
product-sort.tpl

Changer l’affichage par défaut de la liste de produits

Ouvrez le fichier product-list.tpl et cherchez le morceau de code suivant (généralement au début du fichier) :
Changer l'affichage par défaut de la liste de produits

Ce code devrait être soit Changer l'affichage par défaut de la liste de produits

soit Changer l'affichage par défaut de la liste de produits

Modifier alors la class de la balise en fonction du mode que vous souhaitez afficher par défaut.

Pour afficher le mode «grille» par défaut recopiez le code suivant : Changer l'affichage par défaut de la liste de produits

Pour afficher le mode «liste» par défaut recopiez le code suivant : Changer l'affichage par défaut de la liste de produits

Affichez le pictogramme sélectionné par défaut

Ouvrez le fichier product-sort.tpl et cherchez le morceau de code suivant : Changer l'affichage par défaut de la liste de produits

Vous devriez avoir un code semblable à celui ci-dessous, permettant d’afficher le pictogramme «liste» par défaut :
Changer l'affichage par défaut de la liste de produits

Si vous avez choisi d’afficher le mode «grille» par défaut remplacez le code ci-dessus afin d’afficher le pictogramme «grille» :
Changer l'affichage par défaut de la liste de produits

Changer l'affichage par défaut des produits dans Prestashop

Modifier l'affichage par défaut sur PrestaShop 1.6

Si votre boutique en ligne est propulsé depuis la version 1.6 de PrestaShop, inutile de procéder aux modifications ci-dessus. connectez-vous simplement sur votre back-office et allez dans "Modules > Modules".

Cherchez alors le module "Configurateur de thème" et modifiez simplement le paramètre "Afficher les catégories de produits en tant que liste".

Tester le mode d’affichage par défaut

Avant de tester le fonctionnement de votre modification, pensez à supprimer les cookies de votre navigateur. Vous pouvez également tester depuis un ordinateur qui n’a jamais été sur votre site et qui est donc vierge de tout cookie émanant de celui-ci.

Pensez également à désactiver le cache SMARTY dans Paramètres avancés > Performances puis à cocher «Forcer la compilation à chaque appel».

Pour augmenter les performances de votre boutique Prestashop pensez à ré-activer le cache et à re-cocher «Recompiler les fichiers de templates si ils ont été mis à jour».

Vous avez aimé cet article ?

Si vous avez aimé cet article n'hésitez pas à le partager sur les réseaux sociaux Google+, Tweeter, Facebook et LinkedIn. Cela nous permettra d'en écrire davantage et de répondre à vos questions. Pour partager l'article cliquez simplement sur les bouton ci-dessous.

Merci d'avance pour vos partages !

Vous avez des questions ?

Si vous avez des questions, des remarques à faire concernant cet article ou que vous souhaitez simplement partager votre expérience, n'hésitez pas à utiliser le formulaire ci-dessous situé en bas de cette page.

4 commentaire(s)

kami
10/10/2014 à 08:59:10

Pardon si doublon il y a je ne vois pas mon post d'hier. Bravo pour ce tuto clair et soigné pour une fonctionnalité qui devrait exister de base dans Presta. Mais hélas, dans ma version 1.5.6.2 je n'ai pas cela mais

    ... impossible de trouver sur le Net une solution !
Kamila
08/10/2014 à 19:19:32

Bonjour et merci pour ce tuto bien fait. Mais voici ce que j'ai : "!-- Products list -->

    " Presta 1.5.6.2. Comprends pas que Presta n'inclue pas cela dans ses réglages ! Merci si vous pouvez m'aider !
Johan
24/02/2014 à 10:58:59
Effectivement, je corrige cela dans la journée !
Acktarrus
22/02/2014 à 14:49:25

Dommage les codes à rechercher, a remplacer à coller n'apparaissent pas ... Votre tuto pourrait m’être d'une grande aide.

Laissez un commentaire


(ne sera pas publiée)


Recevoir une alerte par email lorsqu'une réponse est postée

* champ requis