Prestashop blocs HTML

Prestashop 1.7 – Blocs HTML illimités (ép. 62)

Créer du contenu où l’on veut dans Prestashop peut importe la structure ou le template utilisé c’est souvent l’une des demandes récurrentes des clients… Il y’a une manière simple d’y parvenir avec une seule ligne de code.

La frustration pour ajouter du contenu

En standard sous Prestashop dès qu’on veut faire afficher du contenu HTML à un emplacement donné on est toujours obligé de passer par un module externe. On se retrouve ensuite avec beaucoup de modules chargés qui sont là parfois juste pour faire afficher un simple bloc de texte. Il existe des modules Prestashop gratuits comme Prestashop Contentbox ou encore Prestashop HTML box, mais ces versions gratuites restent très limitées.

Le problème des HOOKS

Même en utilisant un module Prestashop payant cela n’est pas forcément plus facile pour autant, car il faut que le point d’accroche existe dans Prestashop à l’emplacement là où vous voulez greffer votre contenu et ça parfois même les modules les plus avancés n’arrivent pas à résoudre ce problème. Il y’a aussi le soucis qu’un module ne peut pas être greffé plusieurs fois sur le même point d’accroche (ex. en début de colonne de gauche puis en fin de colonne de gauche, avec des modules injectés entre deux).

Alleluia jQuery va nous sauver !

La méthode que je préconise est assez simple, il suffit en fait d’utiliser la librairie jQuery déjà présente dans Prestashop pour injecter facilement du contenu à des emplacements de votre choix. Grâce aux différentes méthodes « after, before, append, prepend » vous pouvez injecter du contenu là où vous le voulez sans avoir de contraintes techniques d’intégration, car Javascript modifie les zones de la page en live après chargement.

Pour le référencement c’est pas mauvais ?

En fait, bien souvent quand les e-commerçants veulent injecter du contenu personnalisé c’est surtout pour mettre en place des textes ou des bannières / images dans leur shop. Ce sont rarement des textes de contenus importants pour Google, mais plutôt des éléments visuels à montrer au client lorsqu’il navigue sur la boutique. Le fait d’utiliser cette méthode ne va donc pas impacter le niveau de votre référencement dans Google.

Contenu HTML multilingue

A travers le comportement du Javascript je vous montre comment faire quelques exceptions avec la variable de langue JS présente dans Prestashop. Cette méthode a le mérite de tout centraliser les modifications dans un seul fichier. Si vous regardez l’exemple que je vous propose en vidéo vous vous rendrez compte que ce n’est pas vraiment plus complexe que de le faire via une interface multilingue en back-office, il faut simplement mettre quelques « IF » de contrôle sur la langue courante.

Ressources

Pour ce tutoriel vous aurez à disposition :

  • 1 x fichier custom.js (avec les règles tests pour l’injection du HTML)

Télécharger

Résumé de la vidéo : intégrer des zones HTML facilement dans Prestashop

  • Présentation des HOOKS de Prestashop dans le back-office avec l’agencement des positions pour chaque module.
  • Test du chargement du fichier JS avec intégration d’une alerte.
  • Utilisation du fichier « custom.js » avec intégration du code progressif pas à pas + mes explications sur chaque fonction.
  • Utilisation de jQuery avec insertion du contenu HTML via les méthodes populaires suggérées par l’API.
  • La méthode d’intégration est rapide, simple et diaboliquement efficace.
Notez mon billet, Google va adorer :
1 étoiles - J'aime pas !2 étoiles - Bof !3 étoiles - Bien !4 étoiles - Très bien !5 étoiles - Génial ! (12 votes, moyenne : 4,92 sur 5)
Loading...

8 commentaires sur “Prestashop 1.7 – Blocs HTML illimités (ép. 62)”

  1. Enfin… Il était temps. Une vraie solution souple et efficace. Avec Prestashop les choses sont souvent complexes et compliquées et au final pour y arriver simplement on est obligé de mettre les mais dans le cambouis (le code).
    Ajouter des modules est parfois une fausse solution, on reste malgré tout enfermé dans de nouvelles conditions comme le fait de ne pas pouvoir mettre plusieurs blocs de texte n’importe où à l’envi.
    Merci

  2. Hello

    J’ai fais des tests mais sans succès. J’ai pas du ajouter le code au bon endroit…
    Il doit se trouver à un endroit bien précis le code dans le fichier /js/tools.js ?
    Merci

    1. Hello,

      Il faut mettre cela tout à la fin du fichier et ensuite désactiver tous les caches de Prestashop (et s’assurer de bien vider le cache du navigateur).

      A bientôt !

  3. Bonjour,
    j’ai bien ajouté les règles dans le fichier tools.js mais rien ne se passe non plus chez moi… 🙁
    J’ai beau désactiver tous les caches rien n’y fait.
    J’ai essayé sur la version 1.7 tout à bien fonctionné…
    C’est bien le fichier tools.js qui est dans le dossier js à la racine du site ?
    Ne faut-il pas aller dans le dossier du thème ?
    Perso j’ai essayé avec cette classe : .page-product-box pour pouvoir mettre un texte identique sur tous les produits de la boutique…

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *