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.

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

  2. 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

    Répondre

    1. Hello,

      On peut faire la même chose en version 1.6 en ajoutant les règles dans le fichier « /js/tools.js » de Prestashop.

      A bientôt !

      Répondre

  5. 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

    Répondre

    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 !

      Répondre

  6. 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…

    Répondre

    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 !

      Répondre

  7. 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.

    Répondre

    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 !

      Répondre

  8. 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

    Répondre

  9. 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

    Répondre

    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 !

      Répondre

  10. 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.

    Répondre

    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 !

      Répondre

  11. Bonjour
    Super tuto mais j’ai essayé sous presta 1.6 dans la page « product-list.tpl » mais mon image se répète plusieurs fois. voila le script :
    {literal}

    $(‘#homefeatured’).after( »);

    {/literal}
    as-t une idée? possible de la mettre en aléatoir sur la page?
    Merci

    Répondre

    1. Bonjour,

      Ce tutoriel concerne Prestashop 1.7 avec le thème par défaut, dans le cas présent je ne peux pas vraiment en dire plus sur votre problématique qui est plus spécifique.

      A bientôt !

      Répondre

  12. Bonjour,
    Super tuto…
    Question basique… j’ai modifié le custom.js et uploadé mais je ne vois rien.
    Comment le fichier custom.js est-il chargé ? « alert » ne produit aucun message.

    Répondre

  13. Bonjour,
    Excellent tuto comme d’habitude.
    Pas du tout expert en js j’ai une question.
    Comment effacer tout ou partie d’une chaîne de caractère. Comment remplacer une chaine par une autre.
    Exemple dans 1.7 comment remplacer en page d’accueil la chaîne ‘Produits populaires’ par un texte plus vendeur ? (.products-section-title).

    Répondre

  15. Bonjour Germain,

    Depuis quelque temps, je reviens voir vos vieux tutos, car je remarque que pour certains, je n’avais pas alors la maturité pour comprendre leur intérêt, ou tout simplement mon site a besoin d’évoluer.

    Vraiment très bonne idée ces lignes Javascript ! Simple à gérer – grâce à vous comme d’habitude – mais je ne connais pas ce langage.

    J’ai fait cette ligne de code dans le custom.js… « $(‘.block-category’).before(‘ Début du text… ….et… …fin du texte‘); »

    $('.block-category').before('</i> Début du text…<i></i> ….et… <b> …fin du texte</b>');

    Cela fonctionne très bien mais, j’aimerai choisir les catégories dans lesquelles le « block-category » doit apparaitre.
    J’ai cherché les méthodes avec les « IF » et « || », et bien d’autres choses, mais je n’y arrive pas ☹

    Une idée peut-être ?

    Cordialement,
    Eric

    Répondre

    1. Bonjour,

      C’est un peu plus compliqué, il faut en gros encapsuler du CODE Smarty autour du Javascript avec quelque chose du genre :

      [php]
      {if $category->id == 3}
      // le code Javascript
      {/if}
      [php]

      Mais cela peut dépendre du contexte et de l’emplacement, vous pouvez visualiser les variables Prestashop disponible grâce à la fonction {debug} de Smarty.

      A bientôt !

      Répondre

  16. Bonsoir Germain,

    J’avais essayé cette alternative, mais elle ne fonctionne pas chez moi.

    Pour le mode {debug}, quoi que je fasse depuis longtemps, j’ai toujours des erreurs…

    Whoops, looks like something went wrong.
1/1
ContextErrorException in smarty_internal_templatebase.php(157) : eval()'d code line 555:
Notice: Undefined index: n
in smarty_internal_templatebase.php(157) : eval()'d code line 555
at ErrorHandler-&gt;handleError('8', 'Undefined index: n', '/htdocs/vendor/prestashop/smarty/sysplugins/smarty_internal_templatebase.php(157) : eval()'d code', '555', array('_smarty_tpl' =&gt; object(Smarty_Dev_Template), '_tpl_stack' =&gt; array())) in smarty_internal_templatebase.php(157) : eval()'d code line 555
at content_5e46d7e10a6385_56186381(object(Smarty_Dev_Template)) in smarty_internal_templatebase.php(157) : eval()'d code line 106
at content_5e46d7e11bd3b8_23199286(object(Smarty_Dev_Template)) in smarty_internal_templatebase.php line 188
at Smarty_Internal_TemplateBase-&gt;fetch('cms/page.tpl', null, 'layouts/layout-full-width.tpl', object(SmartyDev), false, true, false) in SmartyDev.php line 41
at SmartyDev-&gt;fetch('cms/page.tpl', null, 'layouts/layout-full-width.tpl') in FrontController.php line 671
at FrontControllerCore-&gt;smartyOutputContent('cms/page.tpl') in FrontController.php line 655
at FrontControllerCore-&gt;display() in Controller.php line 225
at ControllerCore-&gt;run() in Dispatcher.php line 379
at DispatcherCore-&gt;dispatch() in index.php line 55

    Il semble que je ne suis pas le seul dans ce cas (forums étrangers), et à chaque essai de modification – ou même quand j’enlève mes adaptations – j’ai une nouvelle erreur.
    J’ai donc décidé d’abandonner ce problème pour l’instant, puisque mon site fonction assez bien.
    J’ai malheureusement d’autres priorités, et vos vidéos hebdomadaires me donnent souvent encore plus de travail 😉

    Je continue à chercher, et si je trouve une alternative avec le IF, je la posterai ici…

    Merci pour tout !

    Cordialement,
    Eric

    PS : bravo pour les 1 million !!!!

    Répondre

    1. Hello,

      Hum difficile d’en dire plus concernant cette erreur Prestashop, l’index « n » ne semble pas défini… mais j’ai l’impression que c’est une erreur à un autre emplacement.

      Sur Prestashop 1.7, j’ai l’impression que le debug est plus sensible qu’à l’époque… le moindre avertissement provoque le blocage d’affichage (peut-être qu’il y a une solution pour outrepasser ce comportement… mais je n’ai jamais testé pour le moment).

      Merci & à bientôt !

      Répondre

  17. Bonjour Germain,

    Bon, j’ai fait un compromis, car votre idée m’a fait réaliser que je pouvais… 😉

    J’ai tout simplement changé votre code Javascript en html avec un DIV entouré d’un IF – dans le block « product_list_header » de \themes\classic\templates\catalog\listing\category.tpl

    {if ($category.id == 3)} 
 <a>  Mon texte…</a>      
{/if}

    Ça fonctionne, donc ça me va, mais rien de très « sexy », j’aurais préféré utiliser votre technique Javascript, qui est nouvelle pour moi.

    Bien Cordialement,
    Eric

    Répondre

    1. Bonjour,

      C’est très bien, en développement il faut toujours trouver des compromis… le plus important étant de trouver une solution.

      A bientôt !

      Répondre

  18. Bonjour,

    Merci pour ce super tuto qui est au top et très utile. J’arrive a affiché avec les méthodes que vous expliquez.
    Par contre, je souhaiterais pouvoir afficher le contenu d’un fichier html plutôt que d’écrire directement l’html dans le custom.js. Est ce possible ?

    Exemple :

    if(prestashop.language.language_code=="fr"){
    $('#carousel').after(/* LE FICHIER HTML */);
}

    Je ne sais pas comment procéder, j’ai essayé plusieurs manipulations mais sans succès.

    Bien à vous,

    Kévin

    Répondre

    2. En supprimant les espaces et sauts de lignes de ton html, tu peux l’ajouter dans le fichier js :

      $('#carousel').after('TON HTML SANS SAUT DE LIGNE ET ESPACES INUTILES');
      Répondre

  20. Bonjour Germain,
    Excellent tuto comme toujours : facile à comprendre, efficace et performant. Merci !
    Une question : comment ajouter le js avant une section ?
    Par exemple, en page d’accueil j’ai :

    Je voudrais ajouter mon code js avant cette section, mais ni .featured-products clearfix mt-3, ni #featured-products clearfix mt-3 ne fonctionnent…

    Répondre

    1. Je me réponds à moi-même : il faut mettre par exemple : section.featured-products.clearfix.mt-3.
      Dans la console, on voit ce nom en en positionnant la souris sur la section en question

      Répondre

  21. Bonjour,

    Merci par contre je viens de télécharger PS 1.7 et dans le fichier « /themes/classic/assets/js » je n’ai pas de fichier custom.js !

    Juste ‘theme.js’ et ‘error.js’

    Répondre

  22. Bonjour,
    Merci beaucoup pour votre ligne de code c’est super je n’avais pas le fichier dans le répertoire je l’ai créer et cela fonctionne je suis avec la version 1.7.8.7. et je suis en local
    Par contre je souhaiterais mettre un lien dans produit récapitulatif style cliquez ici cela amènerais vers lien.html
    J’ai essayé avec le trombone mais cela ne prend pas le fichier extension refusé. Avez vous une solution
    Merci François

    Répondre

Laisser un commentaire

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