Tutoriels >> Créer son propre thème Prestashop

Créer son propre thème Prestashop


Les boutiques utilisant Prestashop sont de plus en plus répandues, et nombreux sont les utilisateurs qui veulent créer leur propre thème ou encore modifier certains fonctionnement de leur boutique. C’est une bonne initiative car le thème par défaut est assez générique et pas très accrocheur.

 

Quelques prérequis seront nécessaires pour créer son thème :

  • être familier avec le langage HTML
  • connaître le langage PHP (nécessaire pour modifier le fonctionnement d'un module ou d'une classe seulement)
  • maîtriser le langage CSS
  • avoir de bonne notions en graphisme et notamment Photoshop (nécessaire pour un design plus travaillé)

Se lancer dans la création d’un thème Prestashop sans ces prérequis risque de vous faire perdre plus de temps qu’autre chose. Si vous ne maîtrisez donc pas ces différents langages je vous conseille d’acheter un thème à votre image, il y en a à tous les prix et pour tous les goûts, il en existe même des gratuits en cherchant un peu sur le net.

 

Architecture d’un thème Prestashop

 

Les thèmes de Prestashop se situent dans le dossier « themes » situé à la racine du site. Chaque thème est composé de la façon suivante :

 

dossier thème par défaut 

 

  • /css : contient tous les fichiers CSS
  • /img : contient toutes les images
  • /js : contient tous les scripts javascript
  • /lang : contient toutes les traductions
  • des fichiers .tpl : ce sont les templates des pages du site, ils contiennent du code html et smarty

Les autres dossiers ne nous serons pas utiles à la personnalisation du thème de votre site.

 

Création du thème Prestashop

 

Pour créer un nouveau thème nous allons nous baser sur le thème par défaut que nous modifieront selon notre convenance. Pour cela il faut dupliquer le dossier « default » dans /themes et renommer la copie avec le nom de votre thème.

 

dossier themes

 

Pour modifier les aspects généraux de votre thème Prestashop (tels que le header ou le footer) qui apparaitront dans la quasi-totalité des pages de votre site je vous conseille de créer un nouveau fichier CSS dans le dossier /themes/montheme/css plutôt que de modifier les CSS déjà existant. Cela vous permettra de retrouver très facilement les modifications que vous avez apportées par rapport au thème par défaut.

 

Afin de modifier l’architecture de vos page il faudra alors modifier les fichiers .tpl présents dans le dossier /themes/montheme/xxx.tpl. Ces fichiers utilisent du langage Smarty qui est un moteur de template pour le langage PHP, il faudra donc vous familiariser avec.

 

Placez toutes vos images dans le dossier “img”. Placez toutes vos javascripts dans le dossier “js”.

 

Pour les modifications plus avancées, tels que la modifications de l’aspect des différents modules présents dans Prestashop, ou encore pour modifier le fonctionnement de certaines classes nous allons utiliser l’override de Prestashop qui a été introduit dans sa version 1.4.

 

L’override dans Prestashop

 

Qu’est-ce que l’ « override » ? Il peut être traduit par « outrepasser » ou « ne pas tenir compte », et c’est exactement ce que fait Prestashop. En clair, nous allons dupliquer un fichier que l’on veut modifier dans un répertoire défini, et ainsi Prestashop utilisera notre fichier dupliqué sans tenir compte du fichier original.

 

On irait plus vite à modifier le fichier original non ?

 

Certes, mais l’override possède des avantages de poids !

 

À commencer par les mises à jour de Prestashop, car si vous modifiez les fichiers originaux, lors de l’application de la mise à jour toutes vos modifications seront écrasées et vous devrez faire toutes vos modifications fichiers par fichiers. Alors que si vos modifications sont dans votre thème, aucun soucis puisque le thème n’est pas mis à jour.

 

Deuxièmement, il faut considérer que la modification d’un module particulier est faite en sorte qu’il colle avec votre thème personnalisé. Si vous modifiez les fichiers originaux du module et qu’un jour vous décidiez d’importer ce thème vers une autre boutique, les modifications propres au modules qui auront été faites sur les fichiers originaux ne seront pas importés.

 

Mais attention, on ne peut pas overrider tous les fichiers dans Prestashop, seuls les fichiers css, tpl et js peuvent être override ainsi que les classes et controllers d’origine de Prestashop.

 

Pour overrider des modules :

 

Voici l’architecture d’un module :

 

architecture module

 

Pour modifier l’affichage de ce module nous allons créer les fichiers suivant :

  • /themes/montheme/modules/monmodule/xxx.tpl : pour override les fichiers tpl
  • /themes/montheme/css/modules/monmodule/xxx.css : pour override les fichiers css
  • /themes/montheme/js/modules/monmodule/xxx.js : pour override les fichiers js

Attention : les fichiers overridés doivent avoir le même nom que le fichier original qu’il override !

 

Pour overrider des classes et controllers :

 

Attention, ici des notions de PHP sont nécessaires !

 

Même chose pour les classes et controllers à quelques détails près. Afin d’override une classe il faudra dupliquer le fichier de la classe « maclasse.php » situé dans le répertoire /classes dans le répertoire /override/classes.

 

Voici un exemple :

 

Imaginons que l’on souhaite modifier le fonctionnement de la fonction Adress ::update(). Cette fonction se trouve dans le fichier /classes/Adress.php dans la class AdressCore. Afin de modifier son fonctionnement nous allons créer le fichier /override/classes/Adress.php et dedans créer la classe Adress héritant de sa classe mère AdressCore.

 

En clair, votre fichier /override/classes/Adress.php devra contenir ceci

class Address extends AddressCore { 
    public function update($null_values = false) {
        //vos modifications ici
    }
}

Attention toutefois à l’override des classes et controllers, si une mise à jour de Prestashop vient à modifier les fichiers de classes ou controllers pour par exemple une mise à jour de sécurité, votre classe overridée conservera peut-être les failles corrigées dans le fichier original.