Améliorez vos pages CMS Prestashop avec des produits

Pour cette fin de semaine,  on va voir ensemble un module gratuit qui permet d’ajouter des produits dans vos pages CMS. Testons le ensemble, une chose est sûre… votre boutique Prestashop va adorer !

Pages CMS Prestashop

Merci Mypresta.eu

Ce n’est pas la première fois que vous parle de Mypresta.eu, régulièrement ils proposent une version « gratuite » de chaque module qu’ils commercialisent (c’est le cas pour le module Display Products CMS). Du coup, pour ceux qui savent se contenter du minimum, il est possible de profiter de nouvelles fonctionnalités et cela 100% gratuitement.

Il est assez rare de voir des prestataires proposant une alternative "gratuite", leur geste est vraiment louable.
Il est assez rare de voir des prestataires proposant une alternative « gratuite », leur geste est vraiment louable.

Passons à la mise en place

Le but de ce module, comme vous l’aurez compris est d’afficher des produits dans la page CMS qui normalement est censée contenir uniquement du texte. Une fois le module téléchargé et installé dans votre back-office, il n’y a rien à configurer…. celui-ci va prendre automatiquement charge les nouveaux « shortcodes ».

Pour une fois, ce ne n'est pas la configuration du module qui devrait vous rebuter.
Pour une fois, ce ne n’est pas la configuration du module qui devrait vous rebuter.

Ensuite, c’est tout simple, on va se mettre dans une page CMS et comme l’indique la documentation vous avez deux possibilités (le chiffre correspond à l’ID du produit du back-office) :

  • L’affichage du produit 1 avec le code : {product:1}
  • Ou l’affichage de plusieurs produits avec le code : {products:1,2,3,4}
On ajoute notre code {products:1,2,3,4} dans le code HTML
On ajoute notre code {products:1,2,3,4} dans le code HTML
Et le résultat est au top, en plus "responsive", que demander de mieux ?
Et le résultat est au top, en plus « responsive », que demander de mieux ?

On peut aussi envisager des mises en page plus complexes, il suffit de respecter les conventions de nommage de « Bootstrap » pour le CSS responsive. En intégrant par exemple le code ci-dessous :

<div class="row">
	<div class="col-sm-6">
		<h1>Présentation Lorem ipsum</h1>
		<img src="http://www.votresite.com/votreimage.jpg" class="img-responsive">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nisi erat, scelerisque ac rhoncus eget, tristique et orci. Fusce vitae auctor ipsum. Nunc quis aliquet tortor. In maximus sapien quis urna rhoncus, in ultricies ex faucibus. Nulla fermentum lacinia interdum. Pellentesque congue non felis ac eleifend. Mauris eu tellus finibus, sollicitudin orci in, accumsan lacus. Quisque tempus orci quis elit suscipit hendrerit. Proin hendrerit ligula eget tortor semper, at pulvinar lacus facilisis. Aenean semper ante vitae erat auctor auctor. Donec lectus ligula, vehicula et ex non, feugiat pretium tellus.<br/>
		<br/>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nisi erat, scelerisque ac rhoncus eget, tristique et orci. Fusce vitae auctor ipsum. Nunc quis aliquet tortor. In maximus sapien quis urna rhoncus, in ultricies ex faucibus. Nulla fermentum lacinia interdum. Pellentesque congue non felis ac eleifend. Mauris eu tellus finibus, sollicitudin orci in, accumsan lacus. Quisque tempus orci quis elit suscipit hendrerit. Proin hendrerit ligula eget tortor semper, at pulvinar lacus facilisis. Aenean semper ante vitae erat auctor auctor. Donec lectus ligula, vehicula et ex non, feugiat pretium tellus.
	</div>
	<div class="col-sm-6">
		<h2>Wouaw ! La bonne affaire : </h2>
		{products:1,2,3,4}
		<h2>Nos clients adorent : </h2>
		{products:5,6,7,8}
	</div>
</div>

Voici le résultat obtenu :

C'est déjà bien mieux que la page standard avec une largeur à 100%. Dans le cas présent avec une largeur de contenu text à 50% cela commence à être présentable.
C’est déjà bien mieux que la page standard avec une largeur à 100%. Dans le cas présent avec une largeur de contenu text à 50% cela commence à être présentable.

Des produits avec modération

L’utilisation des produits dans les pages CMS ne doit pas devenir « intrusive », elle permet de rendre la page plus vivante, mais il faut que les produits affichés soient mûrement réfléchis. Ce système peut-être pratique pour appuyer plus spécifiquement la visibilité de certains produits via une page d’information dédiée / complémentaire ou si on se sert des pages CMS comme outil de blog.

Bilan

Les pages CMS de Prestashop sont austères par défaut, bien souvent sur la plupart des boutiques on retrouve comme contenu quelques lignes de textes qui font la largeur de l’écran et cela donne rarement envie de lire le texte.

Dans les pages CMS il est important de pouvoir segmenter le contenu en colonne (comme le deuxième exemple) et d’illustrer le contenu par une image, cela fait toute la différence. Il vous reste à présent plus qu’à tester le module, bonne intégration !

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

19 commentaires sur “Améliorez vos pages CMS Prestashop avec des produits”

    1. Bonjour,

      Normalement cela devrait fonctionner avec votre version.

      Si le module ne s’affiche pas dans votre liste, essayez de ré-initialiser les filtres de recherche (dans l’onglet modules du back-office).

      Merci pour votre visite !

  1. Bonjour,

    J’ai installé le module et je n’ai aucune erreur.
    En revanche lorsque j’utilise les shorcodes, je vois les shorcodes sur ma page et pas les produits…
    Un conseil?

    Merci d’avance

      1. Bonjour,

        Il faudrait bien vérifier que tous les caches Prestashop sont désactivés côté template et voir s’il n’y a pas d’erreurs d’exécution Javascript (ex. avec Firebug).

        C’est un peu vague comme réponse, mais je ne l’ai pas assez utilisé souvent pour vous faire un retour précis de debug.

        Merci pour votre visite !

    1. Bonjour,

      Cela demande une approche différente pour le chargement des données… que je n’ai pas expérimenté. La méthode alternative simple serait de mettre quelques images en HTML basique directement dans le TPL, qui renverrait vers les catégories phares du site.

      A bientôt !

  2. Merci pour ce tuto, j’ai découvert ce très bon module grâce à lui. Malheureusement, le module, qui fonctionne parfaitement avec la version 1.7.2.4, n’est plus opérant avec la 1.7.3.2 : les shortcodes apparaissent au lieu des produits. Dommage.

    1. Bonjour,

      Ce module semble être toujours compatible Prestashop 1.7 (sur leur fiche produit)… vous pouvez leur signaler le problème, pour qu’ils fassent la correction sur les prochaines mises à jour.

      A bientôt !

  3. Ce module très interessant ne fonctionne pas sur ma version 1.7.4.2
    Je suis deg, si je ne trouve pas un moyen de mettre des produits sur une page statique je vais abandonné l’idée d’utiliser prestashop pour créer ma boutique.
    Qui dirige prestashop pour créé des versions pareil … ?

    1. J’ai oublié de décrire le problème: plus aucune page statique (anciennement appelé page CMS) ne fonctionne sur mon site en localhost sous wamp. il y marqué en plein milieu de la page:

      Cette page ne fonctionne pas
      Impossible de traiter cette demande via localhost à l’heure actuelle.
      HTTP ERROR 500

      1. Bonjour,

        Difficile de répondre sur ce point, à vérifier en désactivant l’url rewriting de Prestashop (des urls) pour voir si l’erreur persiste.

        A bientôt !

  4. P’tain le con, j’avais mis la version 1.6 sur mon presta 1.7 ….
    Bon désormais les pages statiques s’affichent normalement mais les produits n’apparaissent pas. Est ce que le short code {product:4} necessite un addon pour fonctionner ou est ce que ça fonctionne nativement, je débute et je ne connais pas tout.

  5. Bon module, en plus gratuit !

    Par contre, c’est dommage, je voulais afficher les déclinaisons, et visiblement, ce n’est pas possible. exact ?

Laisser un commentaire

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