Lors du passage en production d’une boutique Prestashop, il est intéressant d’activer tous les caches pour gagner de la vitesse. Même si cela n’est pas « vital », on apprécie de pouvoir diminuer le poids de la boutique.
Qu’est-ce que le CCC ?
Dans les « Paramètres avancés -> Performances », de Prestashop il y’a une option qui concerne le Smart Cache. Pour faire court cette option va compresser le code des fichiers CSS et Javascript, afin de gagner en performance… Le fichier sera compilé sur une seule ligne et vous aurez donc des fichiers sources qui seront plus légers. Du coup quand l’acheteur affiche la page du site, vous aurez un gain de vitesse.
Une option simple à activer et qui fait gagner de la vitesse à votre boutique (+ économie de bande passante).
Ma boutique est déformée avec l’option active
Voici un cas expérimenté chez un client, avec l’activation de l’option la boutique proposait un affichage difformes. Des blocs prenaient des tailles disproportionnées, le menu n’avait pas de mise en forme convenable, le panier positionné à un emplacement indésirable. Ce problème est très pénalisant, car il est difficile d’évaluer où se situe le bug et si cela se trouve dans le coeur du comportement de Prestashop lors de la compilation.
Que ce soit sur un mobile, une table ou un desktop, le contenu est mal agencé , voir déformé.
La solution
Le problème se trouvera dans le fichier CSS même, la principale cause sera la mauvaise structure de celui-ci. Même avec des thèmes achetés, vous pouvez vous trouver avec des CSS qui sont corrompus et où la structure n’est pas intègre. Voici deux causes pouvant créer le problème :
- commentaire CSS mal codé, sans espacement ex : « /*commentaire*/ » au lieu de « /* commentaire */ »
- des balises { ou } qui sont mal fermées
Le problème c’est que parfois la déformation se trouve par exemple sur le panier, mais n’a strictement rien à voir avec le CSS du panier, dans le fichier « global.css » par exemple, il pourrait manquer de balises fermantes. En mode navigateur classique, sans compression… le navigateur corrige à la volée le « bug », on a donc le sentiment que tout fonctionne correctement, mais cela n’est pas le cas et cela se voit immédiatement avec le cache CCC actif.
Pour trouver plus vite un bug
De mon côté j’utilise par exemple l’éditeur Netbeans, qui identifie automatiquement les erreurs sur les fichiers CSS et les signale même avant d’ouvrir le fichier en question. Si un signal rouge s’affiche, cela vaut la peine de regarder plus en détail (notez que certaines erreurs en rouge, ne sont pas forcément critiques).
Le fichier global.css semble potentiellement contenir de mauvaises règles / malformations.
Pour mieux comprendre où le fichier se déforme, il peut être bien pratique de faire appel à CSS Beautify, qui va restructurer votre fichier. Avec cela vous allez donc pouvoir consulter la nouvelle nomenclature du fichier et vous verrez certainement grâce à l’indentation qu’à un certain niveau le fichier ne devrait pas indenter 200 lignes d’affilées… du coup il y’a un problème potentiel d’accolades non fermées.
Nettoyer le CSS aide à mieux comprendre où se trouve le bug, car parfois les fichiers sources sont très touffus et denses.
Bilan
Personnellement, j’ai dû tourner un moment avant de comprendre où se trouvait le bug, il était multiple sur plusieurs fichiers CSS du thème. Par exemple le fichier « category.css » pouvait provoquer la déformation du panier. Pour cela Netbeans a localisé rapidement les CSS avec des erreurs et j’ai pu les évaluer, les restructurer et ajouter les balises manquantes. A noter qu’il faut être prudent quand on ferme la balise, car parfois celle-ci font partie de règles responsives, qui encapsulent d’autres règles.