Prestashop : utilisation du module Ever Block HTML

Il existe énormément de modules permettant de gérer des blocs HTML sous Prestashop, tous aussi bien les uns que les autres. Gérer le contenu rédactionnel de son site est très important, tant pour le référencement naturel de votre boutique que pour afficher des mentions rassurantes pour le client.

Notre module Ever Block HTML (ou plus communément Ever Block) est un module compatible Prestashop 1.6 à 1.7, très facile d’utilisation, et surtout très performant pour sa légèreté. Voyons un peu comment l’installer et l’utiliser, à travers les détails du p’tit sommaire habituel !

Je parlerai ici beaucoup des positions de Prestashop, ou des hooks (ce qui est la même chose). Un tutoriel expliquant ce que sont que les hooks est disponible ici, bien que les développeurs apprécient beaucoup la liste des hooks de Prestashop mise à disposition là. Pensez à les consulter si vous ignorez totalement ce que c’est, après tout les modules de blocs HTML sont totalement basés sur ce genre de choses. Prestashop en avait déjà parlé sur leur article de blog par-dessus le marché 🙂

Pour rappel, le module Ever Block HTML est disponible sur notre boutique en cliquant ici, et il est totalement gratuit.

Il est évident que ce module est compatible multiboutiques, multidomaines, multilingues… Bien que vous devriez éviter vivement de mélanger tout cela en même temps !

Installation du module de blocs HTML Ever Block

Sous Prestashop 1.6, rendez-vous dans l’onglet des modules, et cliquez en haut de la page sur « Installer un module ». Récupérez le module sur votre ordinateur, et une fois téléversé sur votre Prestashop, installez-le.

Sous Prestashop 1.7, cela se passe dans l’onglet « Modules » puis « Gestionnaire de modules ». Un simple bouton en haut à droite vous permettra à la fois de téléverser et d’installer le module, d’un seul coup.

Une fois le module installé, aucune configuration à prévoir, tout va se passer ailleurs. Retournez sur votre tableau de bord pour que votre menu d’administration de boutique Prestashop se réactualise, mettant ainsi en place un nouveau menu : « Blocs HTML ». Rien d’autre à faire pour l’installation, si ce n’est que vous devez veiller à bien revenir sur le tableau de bord pour voir apparaître ce nouvel élément dans votre menu.

Paramétrage d’un bloc HTML sous Prestashop

Une fois le module installé, veillez à bien vous rendre sur votre tableau de bord, pour réinitialiser votre menu d’administration de boutique, comme précisé plus haut. Un nouvel onglet est apparu, intitulé « Blocs HTML ». Cliquez dessus visualiser la liste de vos blocs HTML, en ajouter, désactiver ou supprimer.

Systématiquement, un bouton de rappel vous affichera les shorcodes et leurs effets respectifs.

Les actions groupées en bas de page vous permettront d’activer, désactiver ou supprimer en masse vos blocs HTML, une fonctionnalité plutôt usuelle sous Prestashop.

Création d’un bloc HTML pour une catégorie précise

Cette fonctionnalité toute récente permet de saisir du rédactionnel supplémentaire sur les pages catégories notamment, ce qui rejoint un peu le module gratuit Ever SEO Content, que vous pouvez récupérer ici. Ever Block fera très exactement la même chose au niveau des catégories, à partir du moment où vous disposez de hooks correctement positionnés.

Je désire afficher dans le footer de mon site un bloc HTML, précisant une livraison un peu plus longue, pour une catégorie précise. Tous les produits de cette catégorie seront livrés en un peu plus de temps, car ils sont fabriqués à la demande. Je paramètre donc mon bloc HTML comme ceci :

Notez donc que la case « Only on specific category » est bien cochée, me permettant de sélectionner une catégorie précise en ayant un impact uniquement sur celle-ci. Et en image, le résultat est celui-là :

Vous me pardonnerez de ne pas avoir fait de capture d’écran de toutes les autres catégories pour vous prouver que ce texte n’apparaît nulle part ailleurs, sur la boutique utilisée il y a plus de 200 catégories, mine de rien…

Création d’un bloc HTML sur la page panier

Je sais pertinemment que l’internaute se trouvant sur la page « panier » n’est pas connecté. Il va falloir rédiger mon texte en conséquent au sein de ce bloc HTML. Imaginons dans le cas présent que je suis en vacances, et que je désire avertir mes clients que leur commande ne sera expédiée qu’à mon retour (chose que l’on me demande assez régulièrement d’ailleurs).

Créons un nouveau bloc, je pourrais l’activer et le désactiver à convenance, lors de mon départ en congés, et lors de mon retour. Ainsi, pas besoin de savoir coder pour préciser un message simple de congés annuels.

Le hook utilisé ici est « displayShoppingCart », soit « affiché sur le panier », correspondant à la page panier. Le bloc HTML est bien actif, le nom du bloc ne servant qu’à l’administration du site, pour mieux le retrouver. Le bloc HTML est également bien actif, je peux enregistrer. Voici le résultat en image :

Notez qu’il est donc totalement possible de copier le contenu d’un bloc HTML pour l’insérer ailleurs, ce qui représente un gain de temps non négligeable…

Création d’un bloc HTML dans l’administration Prestashop

Et si nous ajoutions un message dans l’administration de Prestashop ? Car oui, le module Ever Block HTML détecte tellement bien les positions de votre boutique, qu’il va même vous proposer de mettre en place des blocs HTML dans l’interface d’administration !

Ainsi, si je désire que les personnes se connectant à l’interface de gestion de la boutique puissent avoir un message, je vais sélectionner un hook dédié à cela. Je vais les avertir qu’une vague de spam sur le SAV Prestashop est à corriger, avec directement un lien pour récupérer un module de Google Captcha.

Allons-y pour la sélection du hook. Comme je peux modifier le bloc à convenance, rien ne m’empêche d’en tester quelques-uns pour savoir où ils sont positionnés. Dans le meilleur des cas, tout se positionnera tout seul, sinon soit je déplace le module depuis les positions de Prestashop, soit je modifie le hook de ce bloc HTML.

Pour modifier les positions de vos modules, cela se passe dans « Apparence » puis « Positions » si vous êtes sous Prestashop 1.7, mais si vous utilisez la version 1.6 les positions se trouvent dans « Modules » puis « Positions ».

Je vais simplement demander à mes administrateurs de boutique de recontrôler les commandes et les comptes clients, comme ceci :

Ici, il serait comme précédemment plus judicieux d’utiliser une mise en forme spécifique, mais peu importe dans l’immédiat, voici le résultat lorsque l’on cherche à visualiser une commande fraîchement passée sur la boutique Prestashop :

Le message est actuellement certes peu lisible, mais libre à moi de le mettre en forme en me servant de TinyMce, l’éditeur de code natif de Prestashop. Si mon back-office était multilingue, je pourrais également gérer pour chaque langue le même message, le module Ever Block HTML étant multilingue.

Des shortcodes Prestashop pour vos blocs HTML

Comme il peut se révéler utile de mettre en place des liens internes à la boutique, sans avoir à les modifier suite à un changement de nom de domaine (par exemple en cas de migration de site), nous avons ajouté des shortcodes à la manière de WordPress. Ceux-ci vous permettront de mettre en place du contenu beaucoup plus personnalisé, comme pour mettre le nom et le prénom du client si celui-ci est connecté.

Il va de soi que votre rédactionnel devra être orienté selon ces critères, ainsi que l’emplacement de la position. Si mon texte personnalisé est affiché sur la page « Mon Compte » , cela sous-entend que le client est bien connecté, je vais donc pouvoir utiliser tous les shortcodes en rapport avec le client, comme [entity_lastname ] ou [entity _firstname]

Liste des shortcodes pour vos blocs HTML

Voici donc la liste des shortcodes actuellement gérés par Ever Block HTML, ainsi que ce qu’ils font :

• [shop_url] => pour l’URL de votre boutique
• [shop_name] => pour le nom de votre boutique
• [start_cart_link] => ouvre un lien vers la page du panier
• [end_cart_link] => ferme le lien vers la page du panier
• [start_shop_link] => ouvre un lien vers la page d’accueil
• [end_shop_link] => ferme le lien vers la page d’accueil
• [start_contact_link] => ouvre un lien vers la page contact
• [end_contact_link] => ferme le lien vers la page contact
• [entity_lastname] => nom du client ou de l’employé
• [entity_firstname] => nom du client ou de l’employé
• [entity_company] => nom du client
• [entity_siret] => Siret du client
• [entity_ape] => code APE du client
• [entity_birthday] => date de naissance du client
• [entity_website] => site internet du client
• [entity_gender] => genre du client (monsieur, madame…)

Si vous mettez en place un shortcode mais que l’information relative n’est pas existante ou pas disponible, le module n’affichera rien en retour. Par exemple, un client non connecté ne verra rien en remplacement du shortcode [entity_lastname].

La liste des shortcodes est bien évidemment fournie dans l’en-tête des pages d’administration du module de blocs HTML, tout comme sur sa fiche produit.

Exemple de shortcodes dans un bloc HTML front-office

Testons un bloc HTML sur le compte client. Celui-ci est donc connecté, sans quoi il sera automatiquement redirigé vers la page de connexion ou de création de compte.

J’utilise dans ce cas deux shortcodes qui seront remplacés respectivement par le prénom et le nom du client. Comme ces deux champs sont requis sur Prestashop, le bloc HTML les trouvera sans aucun problème. Voyons ce que cela donne sur la page « Mon Compte » :

Ici, la position n’est certes pas idéale, mais selon le thème utilisé, cela peut varier. Dans le pire des cas, je peux très bien utiliser le module gratuit de création de hook Ever Hook, et créer un thème enfant Prestashop pour ajouter une position.

Exemple de shortcodes dans un bloc HTML back-office

Il va de soi que chaque utilisateur connecté à l’administration possède des informations, comme son nom, son prénom, son email… C’est ce que nous allons utiliser pour personnaliser le bloc HTML.

Reprenons le bloc HTML que nous avions créé pour les commandes. Le voici, avec l’utilisation de deux shortcodes simples : [entity_firstname] [entity_lastname].

Les shortcodes [entity_firstname] [entity_lastname] seront donc normalement remplacés par mon prénom et mon nom de famille, ce qui nous donne :

Et ce sera tout (et c’est déjà pas mal) pour un module de blocs HTML gratuit pour Prestashop !

 Imprimer