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 ! (15 votes, moyenne : 4,93 sur 5)
Loading...

17 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…

    1. Bonjour,

      Pour Prestashop 1.6 oui il faut idéalement mettre cela dans le fichier /js/tools.js de la racine. Si cela ne fonctionne pas, videz aussi le cache navigateur (pas uniquement le cache Prestashop). Vérifiez aussi dans le code source de la page que vous voyez bien le code dans le fichier.

      A bientôt !

  4. Bonjour,
    Désolé, cela ne fonctionne toujours pas…
    – j’ai la version 1.6.1.23
    – La boutique est en « construction » les systèmes de caches sont désactivés
    – La ligne s’affiche bien dans le code source du navigateur
    $(‘.page-product-heading’).after(‘Voilà mon texte après dans la catégorie’);
    – Le cache navigateur à été effacé moult fois….
    – J’ai essayé dans le fichier global.js du thème, rien non plus…
    – J’ ai essayé en local avec une version 1.7 ça a fonctionné du premier coup !

    C’est dommage, le truc est génial mais mes compétences ne me permettent pas de résoudre ce problème …
    Si vous avez une solution se serait super 🙂
    Merci pour votre réponse et joyeuses fêtes,
    Olivier.

    1. Bonjour,

      Vous pouvez aussi essayer d’ajouter le code Javascript directement dans le fichier « category.tpl » du thème :

      {literal}
      <script>
      le code...
      </script>
      {/literal}
      

      A bientôt !

  5. Génial…. tout simplement génial !
    Merci…
    Du coup j’ai eu l’idée d’y injecter du code layoutit comme tu l’enseignes dans ton épisode « Module bloc texte personnalisé (ép.11) »…. ca marche!
    Un container fluid avec des row, des colonnes des images, des textes, des videos !!!! NICKEL
    Petite info importante, on ne peut pas aller à la ligne dans le code. il faut qu’il soit en une seule ligne.
    Donc si le code est long je conseille d’utiliser un site qui aide à  » minifier » et « un-minifier » le code.
    Nicolas

  6. Bonjour Germain,
    Super tuto , je cherche à utiliser une fonction Javascript qui reprend du code Html et que ce code soit valide sur toutes les pages de mon site mais je ne sais pas ou placer les ligne de code html,
    c’est pour faire des notifications qui s’affichent dans la parti front
    merci d’avance pour ton aide

    1. Bonjour,

      Difficile de répondre sur ce point… en version 1.7 si vous voulez ajouter du comportement JS il faut le mettre dans custom.js (ensuite tout dépend du but & objectifs recherchés).

      A bientôt !

  7. Bonjour Germain,
    Je suis débutant sur Prestashop mais je fais mon autoformation en grande partie grâce à tes vidéos.
    Je suis sur la 25 (blocs html illimités). J’ai reproduis tes exemples qui fonctionnent dur ma 1.7.
    Mon but serait d’avoir un bloc texte, a chaque catégorie, sous les images produits, que je pourrai remplir à souhait.
    Dans ce tuto, je me retrouve avec le même texte sur toutes les pages.
    Merci d’avance.

    1. Bonjour,

      Hum, cela est un peu plus compliqué… en fait il faudrait pouvoir déjà ajouter un « id » de catégorie au body de la page… pour qu’ensuite en JS on puisse faire un truc du genre $(‘#category_123’)… Pour ça il faudrait retoucher le header du thème… mais cela demande d’intégrer du code que je n’ai pas expérimenté ici.

      A bientôt !

Laisser un commentaire

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