Créer un thème
Thème
Dans cet article, vous trouverez tout ce dont vous avez besoins pour créer votre propre modèle PrestaShop.
Pour commencer, vous devrez avoir des bases solides en :
- Langage CSS, JavaScript, HTML, Smarty 3 et structure des fichiers de Prestashop 1.7
- Webpac
- Compréhension de node.js, modules node.js et de gestionnaire de paquets NPM
- GIT
- Comprendre l’architecture MVC (modèle, vue, contrôleur)
Voici une liste succincte des changements les plus importants sur Prestashop 1.7 :
- Les thèmes précédents ne sont plus compatibles avec la nouvelle version de PrestaShop
- Il est maintenant possible de connecter différents scripts et styles, en fonction des pages et des priorités (il peut être configuré grâce à theme.yml)
- La structure des fichiers de thème a été modifiée
- Utilisation de la nouvelle mise à jour du framework Bootstrap, la version 4
- Possibilité de créer et d’utiliser des crochets personnalisés
Premièrement : configuration initiale
Il est nécessaire d’avoir des connaissances fondamentales sur GIT. On commencera par faire un “clone” du répertoire dans un dossier de notre serveur.
$ git clone https://github.com/PrestaShop/PrestaShop
De plus, il est nécessaire de switcher de la branche de développement courante à la branche de la version stable.
Pour faire cela, allez dans le fichier courant et entrez la commande suivante :
- $ cd
- $ git tag
Après ça, nous allons être face à une liste de versions disponibles.
Nous allons switcher sur la version 1.7.0.0, dans cet exemple la version est ; 1.7.0.0
$ git checkout 1.7.0.0
Maintenant que tout est prêt pour l’installation, nous allons dans un premier temps :
- Installer Composer
- Naviguez dans le fichier principal, là où vous avez cloné le répertoire
- composer install
Il est important que vous ayez activé le mode Dev dans PrestaShop.
Deuxièmement : commencer le template comme un prototype
Une fois l’étape ci-dessus terminée, nous devrions décider quelle template conviendra le mieux pour créer le nouveau template.
A ce moment, nous avons deux thèmes pour les développeurs :
- Classic
- StarterThemes
La différence entre ces deux thèmes, c’est que “StarterThemes” a uniquement les fonctions basiques.
Tandis que, le thème “Classic” est le thème par défaut (vous pouvez trouver les fichiers sources dans le répertoire GIT officiel).
Troisièmement : configuration de l’environnement
Après avoir décidé quel thème sera notre prototype, commençons par l'installation de l’environnement opérationnel :
- L’installation de Node.js
- L’installation du paquet global Webpack (via le manager de paquet npm)
Pour les utilisateurs de Windows : $ npm i -g webpack
Pour les autres utilisateurs : $ sudo npm i -g webpack
Ensuite, naviguons sur
A noter, que tous les fichiers sources sont déplacés dans ce répertoire, ainsi que les fichiers de configuration de l’assembleur et le paquet .json dans lequel est décrit toutes les dépendances.
Définissons donc ces dépendances :
A ce stade, nous avons presque terminé le minimum indispensable de la configuration requise.
Et maintenant, nous sommes prêts à commencer la partie la plus importante : la création du thème !
Si vous n’avez pas de connaissances avec les technologies décrites ci-dessus, il est fortement recommandé d’en savoir plus sur Node.js, npm/yarn et webpack.
Maintenant vous pouvez lancer le bundler. Pour ce faire, il suffit de naviguer jusqu’à :
Et de le lancer $ webpack
Regroupement de tous les fichiers sources du thème PrestaShop : $ webpack -w
Le mode tracking : bundler n’arrête pas son travail, mais attend les changements et effectue la recompilation, qui est très rapide par mise en cache.
Webpack est un blunder assez puissant. Si vous ne vous êtes pas encore familiarisé avec lui, il est grand temps de vous y mettre !
Quel que soit le pré (post-)processeur que vous utilisez, webpack fonctionnera correctement avec tous les autres types, du moment que vous l'avez configuré auparavant.
C’est la même chose avec js, vous pouvez utiliser tout ce que vous voulez : es2015, Coffeescript, typescr.
Alors, commençons!
Tout d'abord, éditez le fichier theme_folder/config/theme.yml.
Il suffit de remplir les paramètres nécessaires. Ici vous pouvez également trouver plus d'informations sur le fichier theme.yml de Prestashop 1.7. Lorsque vous créez un nouveau thème, il est supposé que tous les scripts doivent être rassemblés dans un seul thème de bundle.js.
Il est préférable de charger les gros fichiers js de manière asynchrone (comme conseillé par Google).
Il est possible d'y parvenir en utilisant des méthodes telles que: requirejs, importation dynamique de webpack, <script src= "..." async> et preload.
Chaque méthode possède ses propres avantages et inconvénients.
En ce qui concerne la méthode de précharge, ajoutez le code suivant à la tête du modèle:
<!-- /templates/_partials/head.tpl-->
<link rel=”preload” href=”{$urls.base_url}themes/core.js” as=”script”>
<link rel=”preload” href=”{$urls.js_url}theme.js” as=”script”>
Ce qui va se passer : les navigateurs qui supportent le préchargement vont analyser la tête d'un document html et lancer l'exécution des scripts obligatoires en arrière-plan : core.js et theme.js, qui sont situés au bas d'un document html juste avant la balise
