Améliorer les catégories CMS et pages CMS de Prestashop

Dans Prestashop, il y a très souvent l’éditeur « TinyMCE » qui est disponible, pour faire l’intégration du texte ou la mise en forme d’images. Cela est bien pratique pour le texte, mais pas vraiment pour les images surtout dans les pages CMS.

Page CMS Prestashop

Les pauvres pages CMS

Est-ce que vous l’avez déjà remarqué ? Sur les sites Prestashop, les pages CMS sont assez souvent pauvres au niveau de la présentation… dans le 95% des cas on ne retrouve que du texte. Si on se penche sur la problématique des catégories CMS (groupement de plusieurs pages), une simple liste fade de lien s’affiche… on doit pouvoir faire mieux et donner envie au visiteur de consulter le contenu.

La création de contenu via page CMS reste assez fastidieux... inclure une image oui c'est possible, mais la mise en forme n'est pas pensée pour le responsive.
La création de contenu via page CMS reste assez fastidieux… inclure une image oui c’est possible, mais la mise en forme n’est pas pensée pour le responsive.

Améliorons les pages CMS

Pour faire un premier pas vers des pages plus optimisées, je propose que l’on injecte automatiquement une image en entête de page, qui pourra être variable pour chaque page CMS. Cela aura pour intérêt de proposer un visuel plus dynamique et 100% compatible responsive, sans se creuser la tête sur la génération du contenu HTML dans la page CMS.

Bon... au moins sur la page CMS on a un titre et des sous-titres, c'est déjà mieux que rien.
Bon… au moins sur la page CMS on a un titre et des sous-titres, c’est déjà mieux que rien.

1) Pour cela, ouvrez le fichier « cms.tpl » de votre thème et ajoutez après cette ligne (n° 40 env.) :

<div class="rte{if $content_only} content_only{/if}">

Le code suivant :

{* Webbax - 21.03.16 - bannière automatique *} 
<div class="container">
    <div class="row">
        <div class="col-sm-8 col-sm-offset-2">
            {assign var="img" value="img/cms/{$cms->id}.jpg"}
            {if file_exists($img)}
                <img src="{$base_dir}{$img}" />
            {/if}
        </div>
    </div>
</div>

2) Et dans le fichier « /themes/votretheme/css/cms.css » ajoutez à la fin du fichier le code suivant.

 
#cms .rte img{display:block;}

3) Enfin dans le dossier « /img/cms/ » déposez votre image en l’appelant par exemple « 9.jpg », le numéro 9 correspond à l’id de la page CMS. Celle-ci est indiquée dans votre back-office, il faudra respecter cette convention de nommage.

A présent si vous rechargez la page, vous devriez obtenir automatiquement une bannière en entête de page. Le template vérifie si l’image existe dans le dossier (pour la page CMS concernée), si oui il la chargera automatiquement.

A présent la page CMS charge automatiquement une image en entête, cela donne une meilleure impression.
A présent la page CMS charge automatiquement une image en entête, cela donne une meilleure impression.

Plus fort encore avec les catégories

Les catégories qui regroupent plusieurs pages CMS c’est bien pratique pour créer des sections de page sur une thématique de votre choix… mais visuellement, c’est vraiment très pauvre. Avec l’exemple ci-dessous, on a une catégorie de page CMS « Nos prestations » avec 4 pages… certes cela est lisible, mais c’est pas vraiment joli à l’oeil.

La visualisation des pages via catégories CMS est assez austère.
La visualisation des pages via catégories CMS est assez austère.

1) Modifiez à nouveau le fichier « cms.tpl » de votre thème, juste après la ligne ci-dessous :

{if isset($cms_pages) && !empty($cms_pages)}

Ajoutez le code suivant :

{* Webbax - 21.03.16 - mise en forme de la liste des pages *}
{foreach from=$cms_pages item=cmspages}
    <div id="list_pages" class="col-sm-6">
        <a href="{$link->getCMSLink($cmspages.id_cms, $cmspages.link_rewrite)|escape:'html':'UTF-8'}" class="title">{$cmspages.meta_title|escape:'html':'UTF-8'}</a>
        <a href="{$link->getCMSLink($cmspages.id_cms, $cmspages.link_rewrite)|escape:'html':'UTF-8'}" class="title">
            <img src="{$img_ps_dir}cms/{$cmspages.id_cms}.jpg">
        </a>
    </div>
{/foreach}

2) Et dans le fichier « /themes/votretheme/css/cms.css » ajoutez à la fin du fichier le code suivant :

#cms #list_pages{margin-top:20px;}
#cms #list_pages .title{font-size:20px;text-align:center;display:block;margin-bottom:10px;color:#006131;}
#cms #list_pages img{border: 1px solid #1eab65;margin: 10px 0;padding: 10px;}
#cms #list_pages img:hover{opacity: 0.8;filter: alpha(opacity=80);}

Le concept logique est toujours de s’appuyer sur des conventions, c’est-à-dire qu’on va chercher les bannières (images CMS du dossier /img/cms/) et les afficher déjà au niveau des catégories pour donner envie de cliquer à l’internaute. Si vous l’avez fait correctement les images devraient s’afficher comme l’exemple ci-dessous.

Difficile d'imaginer qu'il s'agit de la même page... et pourtant...  La modification est simple, mais change totalement l'approche visuelle, ça donne forcément envie de cliquer.
Difficile d’imaginer qu’il s’agit de la même page… et pourtant… La modification est simple, mais change totalement l’approche visuelle, ça donne forcément envie de cliquer.

Bilan

Le gros problème actuel c’est que les éditeurs de contenu ne sont pas pensés pour gérer du responsive, avec un code qui soit propre et fonctionnel. Il faudrait idéalement des champs prédéfinis, comme sur une fiche produit, cela simplifierait la mise en forme (plus limité certes, mais fonctionnel). En appliquant cette méthode chez ce client, celui-ci gagne en souplesse et peut créer lui-même un contenu visuellement plus attractif.

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

38 commentaires sur “Améliorer les catégories CMS et pages CMS de Prestashop”

  1. Très bon tuto. Il faut que je mettes ça en place au plus vite sur ma boutique !

    J’ai uniquement pas compris comment tu gères les images. 🙁
    Tu mets le lien de l’image en dur dans le code ?

    1. En fait il faut modifier le fichier « cms.tpl » comme indiqué ci-dessus, ensuite il ira chercher automatiquement dans le dossier « img/cms/ » une image qui va s’appeler par exemple « 123.jpg » si l’identifiant Prestashop de ta page est « 123 ».

      Il n’y a pas d’image à insérer manuellement dans la page CMS.

    1. Sur l’exemple où il y’a les 4 images, il s’agit des « Catégories CMS » de Prestashop, dans cette catégorie il y’a 4 pages et chaque page a sa propre bannière.

      Prestashop charge ensuite automatiquement la bannière de chaque page pour en faire une mosaïque dans la « Catégorie CMS ».

      Sur une page CMS simple, une seule image est affichée.

  2. Bonjour,

    Moi ce que je ne comprends pas, ou ne trouve pas, quand je vais chercher le fichier cms.tpl, je n’ai pas de code.

    D’habitude, je n’ai pas trop de peine à suivre vos tutos géniaux, mais là, je bloque …. étrange

    1. Bonjour,

      Cela dépend de la version de Prestashop, si vous ne trouvez rien dans le dossier « modules » du thème que vous utilisez, essayez de consulter le fichier via le dossier « modules » placé à la racine du shop.

      Merci pour votre visite !

        1. Bonjour,,

          J’ai fini par trouver !!!!!!

          Par contre, je ne comprends pas, à quel endroit je dois mettre l’image pour la retrouver après. Je dois quand même la télécharger un moment donné, mais où ??????

  3. Bonsoir,

    encore moi !!!!! Bon, j’ai réussi, j’ai les images dans les catégories, après pas mal de péripéties.

    j’ai bien mes images comme sur la photo que vous avez mis, mais par dessus, j’ai la liste des catégories, du coup, c’est pas terrible, car ça vient par dessus mes images.

    Bon, je ne peux pas vous montrer, c’est sur mon site en local,

    1. Bonjour,

      Il se peut qu’il faille ajuster le CSS ou la présentation du TPL, dans l’exemple cité je n’ai pas utilisé le thème par défaut de Prestashop.

  4. Bonjour

    Un grand merci pour votre astuce qui est géniale, et très simple à mettre en place.

    C’est un fait que les CMS sont nettement plus attrayantes présentées de cette manière.

    Toutefois, j’ai un léger soucis avec le HTTPS, et Chrome de donne l’erreur suivante:

    « Mixed Content: The page at ‘https://www.st-sm.com/07SM/fr/content/1-livraison-gratuite’ was loaded over HTTPS, but requested an insecure image ‘http://www.st-sm.com/07SM/img/cms/1_fr.jpg’. This content should also be served over HTTPS. »

    https://www.st-sm.com/07SM/fr/content/1-livraison-gratuite

    Par contre, quand je suis sur la page /category/, aucun souci du coté du HTTPS

    https://www.st-sm.com/07SM/fr/content/category/6-informations-livraisons

    Comment y remédier?

    Cordialement

    Philippe

    1. Bonjour,

      Vous pouvez essayer de remplacer par exemple {$img_ps_dir} par « https://www.st-sm.com/07SM/img » pour voir si cela peut résoudre le problème.

      Merci pour votre visite.

      1. Merci pour la réponse rapide, mais j’ai solutionné mon souci en remplaçant:

        par:

        … donc le petit bout de code qui sert à ajouter l’image sur la page CMS (vers la ligne 40) est devenu:

        {assign var= »img » value= »img/cms/{$cms->id}_{$lang_iso|escape:’htmlall’:’UTF-8′}.jpg »}
        {if file_exists($img)}

        {/if}

        Note: l’ajout du _{$lang_iso|escape:’htmlall’:’UTF-8′} me permet d’avoir 2 images différentes pour FR ou EN (donc les images sont nommées respectivement « 1_fr.jpg » & « 1_en.jpg »)

        Pour la seconde partie de code (vers la ligne 80) qui sert à afficher les images dans la page « catégories de CMS », je n’ai touché à rien, car le HTTPS fonctionnait correctement 😉

    1. Bonjour,

      Cela est possible avec tous les thèmes Prestashop en principe, ensuite il faudra adapter peut-être légèrement le code en fonction de l’apparence du thème que vous utilisez.

      Merci pour votre visite !

    1. Bonjour,

      Dans le fichier TPL essayez de supprimer le code qui commence par « {foreach…} » et fini par « {/foreach} », en faisant quelques tests vous devriez trouver quelle boucle génère cet affichage du listing.

      Merci pour votre visite !

  5. Bonjour,
    merci de votre aide, j’ai réussi à retirer la liste en supprimant

    {foreach from=$cms_pages item=cmspages}
    <a>getCMSLink($cmspages.id_cms, $cmspages.link_rewrite)|escape:'htmlall':'UTF-8'}"&gt;{$cmspages.meta_title|escape:'htmlall':'UTF-8'}</a>				
    {/foreach}
    

    dans le fichier TPL

    1. Bonjour,

      Dans le cas présent une révision des règles CSS peut-être nécessaire. Si vous n’avez pas les compétences techniques requises, nous vous invitons à faire appel à un intégrateur CSS / HTML pour reformater la mise en page correctement.

      Merci pour votre participation.

    1. Bonjour,

      Désolé, mais je peux pas vous donner les instructions exactes pour effectuer l’ajustement sur votre boutique, car il faudrait vérifier point par point les étapes dans ce tutoriel.

      Vous pouvez toujours demander à un intégrateur Prestashop de vous donner un petit coup de pouce.

      Merci pour votre visite !

      1. J’ai justement appliqué point par point les étapes décrites ci-dessus.
        Je trouve dommage que vous ne fournissiez pas de suggestions ni de « coup de pouce » comme vous le dites.

        Bonne continuation

        1. Bonjour,

          Lorsque je vois exactement où peut-être le problème je peux faire effectivement une suggestion. Sinon dans le cas contraire je devrai pour chaque personne qui rencontre un problème, poser toute une série de questions, faire valider chaque point, vérifier pas à pas pour avancer (et cela n’est pas possible actuellement).

          Cela me fait plaisir de partager des informations avec vous, mais je ne peux pas prendre de temps pour aider chaque lecteur sur son cas (sa version de Prestashop, son template, son serveur etc…).

          J’espère que vous comprendrez ma réponse.

    1. Bonjour,

      Cela doit être faisable, mais j’ai pas été jusqu’à cette étape d’optimisation, il est possible aussi qu’il faille inclure une librairie JS supplémentaire pour avoir un bon rendu.

  6. Super tuto, mis en place juste après la lecture. J’ai juste eu à enlever la liste ul d’origine en commentant, mais merci, parce qu’effectivement c’est vraiment pas terrible autrement.

  7. Bonjour, bravo pour le tuto et la disponibilité dont tu fais preuve en répondant à chacun. Je n’ai pas de questions, juste dire que sur la 1.7 « le pauvre block CMS » est encore plus pauvre ! Je me suis pris la tête à créer des catégories pour ranger tous les CMS proprement…elles ne s’affichent même pas ! Tous les liens en tas les uns sous les autres…Et encore, si on met le block en displayFooter, parce qu’en rightColumn là on a plus que le titre général du block à cause des expand/collapse ! Youpi vive le progrès !
    Du coup je suis dans le cambouis du ps_linklist.php du module. Que de temps perdu !

  8. Salut, je viens de suivre tes conseils, mais lorsque je vais dans mes catégories cms, les images s’affichent bien mais la liste de base reste aussi, saurais tu comment m’aider?

    1. Bonjour,

      Désolé la question est trop spécifique cela dépend du thème et de beaucoup d’autres critères. Vous pouvez toujours faire appel à un intégrateur pour vous faire aider.

      A bientôt !

Laisser un commentaire

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