Thèmes

Structure d’un thème

L’ensemble des fichiers constituant un thème est présent dans un dossier qui lui est propre et dont le nom est unique.

Chaque dossier de thème est contenu dans le dossier /themes.

Le moteur de rendu utilisé pour les thèmes étant le même que celui des modules, il s’agit de Smarty.

La structure d’un thème peut se rapprocher de ceci :

  . 
  ├── _dev 
  │   ├── css 
  │   │   └── ... 
  │   ├── js 
  │   │   └── ... 
  │   ├── package.json 
  │   └── webpack.config.js 
  ├── assets 
  │   ├── css 
  │   │   ├── ... 
  │   ├── img 
  │   │   └── ... 
  │   └── js 
  │       └── ... 
  ├── composer.json 
  ├── config 
  │   └── theme.yml 
  ├── dependencies 
  │   └──...

Fichier de configuration

name: eni 
display_name: Theme ENI 
version: 1.0.0 
author: 
  name: "Jonathan Danse" 
  email: "j.danse@prestaedit.com" 
  url: "https://prestaedit.github.io/" 
 
meta: 
  compatibility: 
    from: 8.0.0 
    to: ~ 

global_settings: 
  configuration: 
    PS_QUICK_VIEW: false 
    PS_PRODUCTS_PER_PAGE: 8 
    ENI_CUSTOM: true 

global_settings: 
  modules: 
    to_enable: 
      # Les modules doivent être présents 
      - enithemeeditor 
      - ps_mainmenu 
    to_disable: 
      - eninotexists 
      - blockwishlist 
    to_reset: 
      - ps_mainmenu 
      - eninotexists 

Fichiers requis

Pour qu’un thème soit considéré comme valide et soit donc installable sur une boutique, cela requiert l’existence d’un ensemble de fichiers dans son répertoire associé :

De plus, un ensemble de templates est requis :

Il existe également un ensemble de templates qui, contrairement aux précédents, sont implicitement requis de par leur utilisation au sein du code et non par la contrainte de validation du thème :

Gestions des assets

Au sein de la configuration du thème, vous avez pu voir que PrestaShop charge un ensemble de fichiers par défaut et qu’il vous est possible de définir l’ajout d’assets selon vos besoins.

D’autres manipulations sont possibles.

public function hookActionFrontControllerSetMedia($params) 
{ 
    $this->context->controller->unregisterJavascript('used-id'); 
 
    $this->context->controller->unregisterStylesheet('used-id'); 
} 

Core.js

Ce fichier, chargé par défaut et fournit par PrestaShop, embarque un ensemble de fonctions définissant une logique commune à l’ensemble des thèmes.

On y retrouve notamment des fonctions utiles concernant le panier, les facettes ou encore le listing de produits.

Compilé, il n’a pas vocation à être modifié. Les sources servant à la compilation de ce fichier se situent dans le dossier /themes/_core/js accessible sur le repository GitHub de PrestaShop. Elles ne sont pas incluses dans une version packagée. 

Par ailleurs, le fichier core.js embarque également la librairie jQuery par défaut. 

La version 3.5 de cette dernière est utilisée.

Les thèmes enfants

Un thème est dit enfant lorsqu’il repose sur un thème existant, son parent.

Il hérite de l’ensemble des paramètres, des assets ainsi que des templates du thème de référence.

Cela permet de modifier le comportement d’un thème en ciblant les modifications effectuées.

  . 
  ├── config 
  │   └── theme.yml 
  └── preview.png 

parent: eni 
name: enichild 
display_name: Theme enfant pour le theme ENI 
version: 1.0.0 

{$theme_assets} {* /themes/<nom du thème>/assets/ *} ...

Smarty

{* Peu importe le module *} 
{hook h='displayContent'} 
 
{* Uniquement le module enimodule *} 
{hook h='displayContent' mod='enimodule'} 

{widget name='enimodule'} 
{widget name='enimodule' hook='displayContent'} 

Événements JavaScript

Certaines actions, telles que le changement de déclinaisons, peuvent entraîner des événements JavaScript.

Ils sont émis par le core.js et sont principalement gérés par le theme.js. Certains événements sont traités également par le core, au sein de composants.

Pour que votre thème soit en mesure d’intercepter ces événements, vous devez ajouter les imports suivants dans votre fichier d’entrée :

import prestashop from 'prestashop'; 
import EventEmitter from 'events'; 
 
// "inherit" EventEmitter 
for (const i in EventEmitter.prototype) { 
    prestashop[i] = EventEmitter.prototype[i]; 
}  

Ceci a pour effet de rajouter à l’objet prestashop les prototypes définis par EventEmitter : emit et on.

prestashop.emit('editAddress'); 
 
// Avec des arguments 
prestashop.emit('updatedDeliveryForm', { 
    dataForm: $deliveryMethodForm.serializeArray(), ...

Sélecteurs JavaScript

Au sein du DOM généré, un ensemble de classes et d’identifiants sont attribués aux différents éléments qui composent une page.

Afin de limiter les modifications du JavaScript lorsqu’une classe associée à un élément HTML est vouée à être modifiée au sein du thème, les sélecteurs sont globalement définis au sein d’un seul et même fichier (selectors.js) et sont rattachés à l’objet prestashop.

On retrouve la propriété selectors pour les sélecteurs issus du core et themeSelectors pour ceux déclarés par le thème.

Dans votre thème, vous pouvez donc altérer le fichier pour y faire figurer les changements. Cela nécessite une copie globale du fichier, ce que l’on pourrait vouloir éviter dans le cadre d’un thème enfant.

Dans le cas des sélecteurs issus du core, mais également de ceux du thème, vous pouvez procéder à une surcharge des déclarations effectuées initialement.

prestashop.once('selectorsInit', () => { 
    prestashop.selectors.cart.overview = 
'.cart-overwiew-overrided'; 
}); 
 
prestashop.once('themeSelectorsInit', () => { 
    prestashop.themeSelectors.cart.displayPromo...

Prise en charge du RTL

Lorsque la langue utilisée sur la boutique PrestaShop est une langue dite RTL (Right to Left), un nouvel asset est automatiquement chargé :

Cette feuille de style vous permet d’ajuster le style au besoin.

De plus, pour toute feuille de style enregistrée par la méthode registerJavascript(), la même feuille de style disposant du suffixe _rtl sera automatiquement ajoutée.

La feuille de style theme_rtl.css est ajoutée en même temps que theme.css.

La feuille de style custom_rtl.css est ajoutée en même temps que custom.css.

Lorsque le thème ne dispose pas de ces alternatives ou de feuille de style spécifique à la prise en charge du RTL, PrestaShop vous permet d’en générer automatiquement.

Cette transformation s’appuie sur l’utilisation de CSSJanus : https://github.com/cssjanus/cssjanus

Pour cela, rendez-vous dans Apparence - Thème et logo.

Lorsque vous passez le paramètre Générer une feuille de style RTL à Oui et que vous validez le formulaire, l’ensemble des feuilles de style présentes dans le dossier du thème - peu importe l’endroit - disposent d’une version déclinée.