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

prestashop creation theme

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.

prestashop liste creer version

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 /_dev/ dossier.

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 :

/_dev$ npm install

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’à :/_dev$ npm install

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 .

Vous pouvez également ajouter et lier d'autres scripts à vos pages html.

Note : ce code ne fonctionnera pas si vous activez la compression et la fusion de js.

Cependant, le problème peut être résolu avec un simple module.

Core.js dans Prestashop 1.7

Core.js est fourni par PrestaShop. Il importe la librairie jQuery v2 et génère divers événements sur les actions de l'utilisateur, comme par exemple :

  • changedCheckoutStep;
  • clickQuickView;
  • editAddress;
  • editDelivery;
  • handleError;
  • updateCart;
  • updatedAddressForm;
  • updatedCart;
  • updatedDeliveryForm;
  • updatedProduct;
  • updateProduct.

L'interaction est basée sur le modèle Event qui utilise EventEmitter (vous pouvez en savoir plus sur EventEmitter dans le manuel Node.js).

Voici un algorithme approximatif de performance d'un modèle d'événement :

  • Le gestionnaire d'événements reçoit l'événement et recherche un gestionnaire enregistré (dans notre cas, il s'agit de la variable globale Prestashop).
  • Génération d'un événement en réponse à une action externe (cliquez sur le bouton Ajouter au panier, entrer le nom du pays dans le champ de livraison, etc.)
  • Envoi de l'événement au gestionnaire d'événements (en utilisant la méthode .emit, en indiquant le type de l'événement comme premier argument).
  • Le gestionnaire d'événements reçoit l'événement et recherche un gestionnaire enregistré (pour enregistrer un gestionnaire personnalisé pour un événement, on peut utiliser les méthodes .on ou .once qui reçoivent deux paramètres obligatoires - le nom de l'événement et la fonction du gestionnaire d'événements).
  • Le gestionnaire d'événements appelle le gestionnaire (handler).

Suivre ce modèle nous donne beaucoup de flexibilité. Nous devrions également accorder une attention particulière à handleError.

La gestion des erreurs est souvent ignorée par les développeurs, mais en utilisant cet événement, vous pouvez couvrir presque toutes les erreurs possibles qui seront principalement liées aux requêtes Ajax.

En outre, pour d'autres événements (tels que editAddress, editDelivery, updatedAddressForm, updatedDeliveryForm), vous pouvez ajouter une validation de formulaire, un traitement de téléchargement et une mise à jour de produit (événements: clickQuickView, updatedAddressForm, updatedDeliveryForm, updatedProduct, updateProduct, updateProductList).

Il est également important de mentionner les scripts des modules

Comment est-il possible de les modifier ou de les supprimer/exclure d'une page?

C'est assez simple: pour redéfinir un fichier de module js ou css, vous devez créer une copie du même fichier dans le dossier thématique, en conservant le chemin original du fichier.

Pour supprimer (annuler la connexion) un script, vous devez garder le fichier redéfini vide.

Source : modules/ /path/to/file.{css,js}modules/ps_imageslider/js/homeslider.js

Remplacer par :

/modules//path/to/file.{css,js}my_theme/modules/ps_imageslider/js/homeslider.js

De plus, il serait intéressant de mettre en place une charge utile pour accélérer le processus de développement et ainsi obtenir un thème optimisé.

Recevez par email nos prochains conseils

Oseox sur Facebook Notifications via Facebook Oseox sur Twitter Notre actu sur twitter