Le Blog Imelia

Créer un site marchand avec Prestashop: les bonnes pratiques [#1]

Objet de l’article: créer et modifier un site Prestashop sans empêcher les mises à jour de versions.

 

Lorsque l’on crée un site internet, il ne suffit pas de le penser à l’instant I de son lancement. Il faut l’envisager sur le long terme, avec ses possibilités d’évolution « souhaitées » (autrement dit celles que le client pourra commander à son prestataire pour améliorer sa plateforme) et ses obligations d’évolutions techniques. Le web est un monde mouvant. Les techniques évoluent, la sécurisation des plateformes s’améliore…la mise à jour technique d’un site web est aujourd’hui incontournable pour conserver une plateforme sûre et performante.

Toutefois, une mise à jour technique n’est pas forcément chose aisée et il est important de bien préparer ces manipulations, surtout lorsque l’on travaille avec un CMS et à plus forte raison lorsque l’on travaille avec Prestashop: mettre à jour ce CMS peut se révéler être une véritable angoisse si, lors de la création du site initial,  le fonctionnement et les conséquences de ces mises à jour sur le coeur du CMS n’ont pas été envisagés ou anticipés.

Mais le « coeur » d’un CMS, c’est quoi?

Le coeur, c’est l’ensemble des fichiers et dossiers qui constituent le CMS à la base, lorsqu’il est téléchargé. Ce coeur est conçu pour fonctionner en l’état et sans manipulations préalables: on télécharge le package, on l’installe selon les spécifications de l’éditeur, et c’est tout. Ca fonctionne.

De quoi est composé le coeur de Prestashop?

De trois grandes sections, fournies dans le package à télécharger:

1)Les fichiers et dossiers qui permettent au site de fonctionner en interne: script de gestion des commandes, des clients, du panier. Fonctions pour l’affichage des produits, des prix, des déclinaisons….

2) Le dossier « modules », dédié aux blocs sur l’administration et sur l’interface visiteurs (bloc panier, bloc panier, bloc catégories, bloc menu….)

3) Le dossier « thèmes », qui accueille les kits techniques et graphiques régissant le comportement du site sur l’interface utilisateur: organisation des produits, appararence graphique, fonctionnalités spécifiques de mise en relation des produits….Lors du téléchargement, Prestashop est fourni avec un thème unique par défaut, nommé « prestashop »

(cliquez sur les images pour les agrandir)

 

En quoi consiste une mise à jour de Prestashop?

Mettre à jour un CMS, cela revient à remplacer le coeur initialement installé sur le serveur par la nouvelle version de ce coeur. Chaque CMS étant régulièrement mis à jour par les team de développement, il faut donc remplacer le coeur à chaque nouvelle version . Et remplacer le coeur, cela revient à « écraser » tout ce que contenait la version initiale, et à tout remplacer par les nouveaux fichiers.

Peut-être commencez-vous à voir où je veux en venir? :P Lorsque vous créez votre site avec un CMS, vous souhaitez (et c’est bien normal) l’adapter à vos besoins: améliorer ou transformer des sections, modifier des modules…Concernant les thèmes, vous pouvez choisir d’utiliser un thème gratuit ou payant trouvé sur le web, mais aussi tout simplement décider de partir du thème par défaut et de le transormer selon vos besoins. Dans le premier cas (thème gratuit ou payant téléchargé sur le web), la mise à jour ne posera pas de problèmes: même si vous avez modifié ce thème après l’avoir installé, il ne sera pas écrasé puisqu’il n’est pas présent par défaut dans le CMS. Pour le thème fourni avec, en revanche, cela posera problème: lorsque vous voudrez faire une mise à jour de version (par exemple, passer de la version 1.3.7 à la version 1.4) et si vous avez modifié directement le thème « prestashop » sans prendre vos précautions, toutes vos modifications seront écrasées et remplacées par le dossier « prestashop » du nouveau coeur. Et votre boutique n’aura plus du tout la tête qu’elle avait avant!

Il est donc important de garder à l’esprit une règle d’or: ne modifiez le coeur de Prestashop que si vous ne pouvez pas faire autrement.

Mais comment faire autrement, justement?

En dupliquant tous les éléments que vous souhaitez modifier, et en concentrant tous ces éléments dupliqués directement dans le dossier « themes » de Prestashop. En effet, pour afficher votre site sur le navigateur du visiteur, Prestashop va d’abord aller explorer le dossier « thèmes », afin de récupérer les consignes d’affichage de votre boutique. Mais il va également tester la présence d’un sous-dossier « modules » qui contiendrait d’éventuels modules personnalisés. Si ces modules existent, alors Prestashop utiliseras leurs consignes spécifiques. S’ils n’existent pas, alors il ira récupérer les consignes dans le dossier « Modules » du coeur. La procédure de duplication d’un module est simple:

1) Ouvrez le dossier contenant le thème de votre boutique.

2) En principe, le dossier de votre thème contient déjà plusieurs sous-dossiers (css, img, fonctions…). Si le sous-dossiers « modules » n’existe pas, créez-le.

3) Dans le dossier « Modules » du coeur (cf illustration 1 ci dessus, encadré bleu clair), identifiez le module que vous souhaitez modifier. Par exemple, le bloc panier correspond au dossier « Blockcart ». Le module « Catégories » correspond au dossier « Blockcategories »….et ainsi de suite.

4) Copiez-le puis collez-le dans le sous-dossier « modules » que vous avez créé.

Le module que vous souhaitez modifier est maintenant dupliqué. Dorénavant, toutes les modifications que vous souhaitez apporter à ce module seront faites à cet endroit: lorsque Prestashop parcourra le dossier « Themes » pour afficher votre site, il utilisera en priorité les consignes du module dupliqué dans le sous-dossier que vous aurez créé et délaissera celles du module original.

(cliquez sur les images pour agrandir)

 

Ces opérations vous permettront de faire ainsi toutes les modifications que vous souhaitez sur vos modules, sans toutefois modifier le coeur: lors de la mise à jour, l’ancien coeur sera effectivement écrasé mais cela n’affectera pas vos modifications car le sous-dossier « modules » n’existe pas dans la version initiale de Prestashop: il ne risque donc pas d’être remplacé et les modifications seront préservées. Finie l’angoisse de la mise à jour, vous pouvez dormir tranquilles!

Finissons avec le thème par défaut

Si vous souhaitez construire votre site sur la base du thème par défaut mais en y apportant vos propres améliorations (techniques, graphiques…), utilisez là aussi la duplication: copiez le thème « prestashop » puis collez-le juste à côté et attribuez-lui un nouveau nom. Sur les images ci-dessus, le thème « manufacture » que je crée actuellement pour un client n’est en fait qu’une copie du thème « prestashop ». L’avantage étant que Prestashop ne risque pas de l’écraser lors de la mise à jour de versions, puisqu’il n’existe pas à l’origine dans la solution.

Conclusion

Je vous dis que vous pouvez dormir tranquilles en utilisant la duplication des modules et le copier/coller/renommer du thème par défaut. Toutefois, restez prudents: Prestashop est une grosse machine qui aime qu’on la manipule avec douceur et les mises à jour, quelles qu’elles soient, doivent être réalisées avec précautions. Dans tous les cas, avant une mise à jour de votre boutique au niveau des fichiers sources (et plus généralement à chaque manipulation des fichiers et dossiers), il est très fortement recommandé de faire une sauvegarde complète de votre site et de votre base de données, ceci afin de pouvoir restaurer la boutique à son état antérieur si jamais une erreur de manipulation venait compromettre l’opération.

N’oubliez pas, également, que des professionnels ( dont moi :P ) sont à votre disposition pour effectuer ces manipulations délicates. Les solliciter pourra vous faire gagner un temps précieux et vous aider à aborder ces aspects techniques, souvent déroutants, bien plus tranquillement.

1 commentaire sur cet article

  1. waaziz

    Merci pour ce tuto bien précieux!je vais bientôt m’en servir :)

Laisser un commentaire

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

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>