Sites


Créer et gérer sa boutique en ligne avec Prestashop

Changer les positions des modules

Ce chapitre vous présente une utilisation avancée de Prestashop. Étant dans la section concernant l'apparence du Prestashop, nous nous emploierons à utiliser ce fil conducteur. Mais le principe reste le même concernant les fonctionnalités globales du Prestashop.

Où trouver les positions des modules

Un module (appelé aussi Bloc) représente un ensemble de fonctionnalités. Par exemple le  Bloc Panier permet de réunir toutes les étapes de la commande conduisant au paiement et le  Bloc paiement réunit toutes les étapes de paiement, etc.

Pour connaitre tous les modules de votre Prestashop, rendez-vous au niveau du menu Modules > Position du back-office. Cette longue page présente de façon graphique tout le travail réalisé par les développeurs pour faciliter la personnalisation du Prestashop de façon graphique.

Cette page présente tous les blocs ou modules greffés sur les hook en cours sur votre boutique. Chaque module se greffe sur une position d'une des pages de Prestashop prévu à cet effet : un hook (un point d'accroche). Ces blocs peuvent se dégreffer ou se gréffer facilement afin de relier la fonctionnalité du modules et l'organisation ergonomique de la boutique.

Par exemple, offrir aux utilisateur un accès direct à leur panier disponible en permanence, présent en haut du site. Cela se traduira par  Bloc panier greffé au hook displayTop.

Comment dégreffer un bloc

Vous souhaitez modifier l'endroit où s'affichera le bloc sur votre boutique ? Vous devrez dégreffer le bloc.

Pour cela, commencez par identifier le nom de votre bloc. Par exemple, si vous ne souhaitez pas afficher votre panier sur la page d'accueil, cela concerne directement le Bloc Panier.

Sur la page Modules > Positions, sélectionnez le Bloc Panier. Celui-ci affiche les points d'accroches où ce module est sollicité.

Pour le dégreffer, cliquez simplement sur  Modifier pour avoir accès à l'option Dégreffer. Une fois validé, votre  Bloc Panier ne sera plus présent en haut des pages du site.

En effet, regardez comment se nomment les Positions. Certes elles sont en anglais, Prestashop étant développé dans cette langue. Mais cet anglais est basique et compréhensible par des non développeurs. Cette image présente deux positions :

  • displayTop
  • Header

displayTop signifie que le Bloc panier s'affiche en haut des pages.

Header signifie que le Bloc panier s'affiche dans la partie haute des pages contenant un Header.

Au besoin, utilisez un traducteur anglais -> français pour traduire la petite ligne d'explication des positions. Elles sont destinées à détailler la position.

Les développeurs ont ainsi permis, sans avoir à développer une ligne de code, de vraiment personnaliser l'organisation visuelle de la boutique. Mais bien sûr, vous devez au préalable savoir exactement ce que vous souhaitez comme organisation.

Les points d'accroches sont très nombreux. Il y en a plus de 40. Voici la liste des points d'accroches des modules en page d'accueil avec une explication de leurs emplacements spécifiques :

  • displayHeader : affiche le contenu dans l'en-tête ; 
  • displayTop : affiche le contenu en haut ; 
  • displayLeftColumn : affiche le contenu dans la colonne de gauche ; 
  • displayHome : affiche le contenu au centre de la page ; 
  • displayRightColumn : affiche le contenu dans la colonne de droite ; 
  • displayFooter : affiche le contenu dans le pied de page.

Comment savoir quelle fonctionnalité est gérée par quel bloc ?

Il n'existe pas à l'heure actuelle dans la documentation de Prestashop la liste des blocs au regard de ses fonctionnalités. Vous devrez chercher par vous-mêmes cette information.

Pour cela, rendez-vous dans la liste des modules dans Modules > Modules et recherchez le nom du bloc en écrivant le mot-clé de la fonctionnalité que vous cherchez dans le champ de recherche situé en haut à gauche. 

Au mieux un bloc vous est présenté, au pire quelques-uns. Pour découvrir quel bloc est concerné, tentez de désactiver un bloc et visitez votre boutique pour constater la disparition de cette fonctionnalité. Si vous avez trouvé le bon bloc, alors vous connaissez son nom. Sinon remettez le bloc en l'état et poursuivez vos essais.

Dans cet exemple, au moyen du mot-clé panier, Prestashop me montre le bloc Panier, présenté avec une barre verticale verte m'indiquant que celui-ci est actif sur mon Prestashop. Les autres blocs, concerne également le panier mais soit sont inactifs, soit ne sont pas installés (d'ailleurs certains modules sont payants).

Greffer un module

Il peut être nécessaire de greffer un module pour profiter de la fonctionnalité d'un bloc à un placement spécifique de votre boutique. Par exemple, ajouter la possibilité d'envoyer un lien à un ami par e-mail depuis la page d'un produit ou encore ajouter dans la colonne de droite un filtre de recherche des produits par couleurs.

Ajouter une fonctionnalité à un endroit spécifique s'appelle la greffe d'un module, rassurez-vous ce n'est pas très compliqué.

Pour greffer un module, rendez-vous dans Modules > Position puis cliquez sur le bouton Greffer un module présent en haut à droite. Cela vous bascule sur une autre page.

Dans le menu déroulant intitulé Module, sélectionnez le bloc contenant la fonctionnalité désirée (par exemple Bloc Panier) et dans la liste des Points d'accroche (Greffer le module sur) la position (par exemple displayRightColumns pour la troisième colonne). Une fois satisfait cliquez sur Enregistrer.

Si tout se passe bien, vous serez basculé sur la page précédente et gratifié d'un message positif. Sinon, cela signifie que le thème n'est vraiment pas prévu pour et que vous devez faire appel à un développeur pour hacker Prestashop ou changer de thème.

Modifier la page d'accueil avec le Live edit

Peu nombreux sont les débutants qui ressentent le besoin de greffer ou de dégreffer des modules sur des positions au moyen des points d'accroche (hook).

Prestashop propose un outil plus simple pour commencer : Live edit. Il est disponible depuis la page (maintenant familière) Module > Positions, en cliquant sur un bouton présent sur la droite.

Une fois activé, vous basculez sur la page d'accueil de votre boutique et vous affiche le nom des modules. Depuis cette page, en cliquant sur l'icône poubelle vous pouvez dégreffer des modules ou les greffer autre part, grâce à un simple déplacement depuis les flèches vertes. Arrangez la boutique à votre goût et cliquez Enregistrer en haut à gauche pour valider.

Cette fonctionnalité est fort pratique, mais hélas elle concerne uniquement la page d'accueil.

Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.

Vous devriez rafraîchir la page.