Dans notre précédent article, nous avons vu comment modifier simplement notre thème de base.

Or depuis la version 1.7, Prestashop met à disposition un StarterTheme https://github.com/PrestaShop/StarterTheme

vous le trouverez sur github.com librement.

Comment utiliser le StarterTheme ?

Pour le modifier « dans les règles de l’art » il faut utiliser la technologie mise à place à l’aide de nodeJS.

Si on analyse de plus près la structure du thème:

on s’aperçoit qu’il y a un dossier _dev

Tout se passe dans celui-ci.

Prérequis:

Pour modifier ce thème il vous faudra:

• Installer nodeJS sur votre ordinateur ou serveur https://nodejs.org/en/ prenez toujours une version stable.
• Avoir un éditeur de code, pour ma part j’utilise depuis peu Visual Studio Code que je trouve vraiment top https://code.visualstudio.com/
• Savoir utiliser la console de son ordinateur (CMD windows Terminal mac / linux)
• Avoir git d’installé sur votre ordinateur / serveur (pas obligatoire mais fortement conseillé)

Une fois tout ça mis en place, on peut commencer.

Installer le thème

Pour commencer, rendez vous dans le dossier /themes/ de prestashop et faites un clone du starterTheme ou collez le dossier si vous n’utilisez pas git.

Je me rends dans mon dossier thèmes:

cd themes/

Je clone le StarterTheme:

git clone https://github.com/PrestaShop/StarterTheme.git

Le dossier /themes/ de prestashop ressemble donc à ça:

Rendez vous ensuite dans le dossier du theme et renommez le theme.dist.yml par theme.yml

modifiez ensuite ce fichier et rentrez vos informations:

name: StarterTheme
display_name: Starter Theme
version: 3.0.0
author:
  name: "Prestasafe Team"
  email: "contact@prestasafe.com"
  url: "https://prestasafe.com"
meta:
  compatibility:
      from: 1.7.2.0
      to: ~
  available_layouts:
    layout-full-width:
      name: Full Width
      description: No side columns, ideal for distraction-free pages such as product pages.
    layout-both-columns:
      name: Three Columns
      description: One large central column and 2 side columns.
    layout-left-side-column:
      name: Two Columns, small left column
      description: Two columns with a small left column
    layout-right-side-column:
      name: Two Columns, small right column
      description: Two columns with a small right column
global_settings:
  configuration:
    PS_QUICK_VIEW: false
  hooks:
    custom_hooks:
      - name: displayFooterBefore
        title: displayFooterBefore
        description: Add a widget area above the footer
    modules_to_hook:
      displayNav:
        - ps_shoppingcart
        - ps_languageselector
        - ps_currencyselector
        - ps_customersignin
      displayTop:
        - ps_mainmenu
      displayHome:
        - ps_imageslider
        - ps_featuredproducts
        - ps_banner
      displayFooter:
        - ps_contactinfo
  image_types:
    cart_default:
      width: 80
      height: 80
      scope: [products]
    small_default:
      width: 125
      height: 125
      scope: [products, categories, manufacturers, suppliers]
    medium_default:
      width: 300
      height: 300
      scope: [products, categories, manufacturers, suppliers]
    large_default:
      width: 500
      height: 500
      scope: [products]
    home_default:
      width: 250
      height: 250
      scope: [products]
    category_default:
      width: 960
      height: 350
      scope: [categories]
    stores_default:
      width: 170
      height: 115
      scope: [stores]
theme_settings:
  default_layout: layout-full-width
  layouts:
    category: layout-left-side-column
    best-sales: layout-left-side-column

Activez le thème dans Prestashop:

Par défaut le thème ne ressemble à rien:

Toujours dans votre console:

rendez vous dans le dossier _dev de votre thème

cd StarterTheme/_dev

lancez la commande:

npm install

Si vous avez des erreurs sous mac ou linux lancer la en sudo:

sudo npm install

ça mouline un petit moment:

Pour ma part tout semble s’être bien déroulé:

Maintenant, toujours dans la console, tapez la commande:

npm run build

Les fichiers se sont bien compilés

Du coup, le theme reste vide, car il n’y a rien, aucun composant ou autre.

Vous pouvez utiliser le StarterTheme si vous voulez faire un theme de A-Z, cela dit, ça vous prendra beaucoup plus de temps que de partir sur une base existante, je vous conseille de partir sur le thème classic, mais tout en utilisant les outils de développement du StarterTheme.

Voici comment faire:

je fais un copie du classic en et je le nomme classicdev

cp -R classic classicdev

puis je me place dans le classicdev/_dev

cd classicdev/_dev

je créé le fichier package.json et je place ce code la:

{
    "name": "prestashop-classic-dev-tools",
    "version": "1.0.0",
    "description": "Tools to help while developing the Classic theme",
    "main": "index.js",
    "scripts": {
        "watch": "webpack -w",
        "build": "webpack"
    },
    "author": "PrestaShop",
    "license": "AFL-3.0",
    "devDependencies": {
        "autoprefixer": "^6.7.7",
        "babel-loader": "^5.3.2",
        "bootstrap": "4.0.0-alpha.5",
        "bootstrap-touchspin": "^3.1.1",
        "bourbon": "^4.2.6",
        "css-loader": "^0.27.3",
        "expose-loader": "^0.7.3",
        "extract-text-webpack-plugin": "^2.1.0",
        "file-loader": "^0.10.1",
        "flexibility": "^1.0.5",
        "jquery": "^2.1.4",
        "material-design-icons": "^2.1.3",
        "node-sass": "^4.5.0",
        "notosans-fontface": "~1.0.1",
        "postcss-flexibility": "^1.0.2",
        "postcss-loader": "^1.3.3",
        "sass-loader": "^6.0.3",
        "style-loader": "^0.14.0",
        "tether": "^1.1.1",
        "velocity-animate": "^1.2.3",
        "webpack": "^2.2.1",
        "webpack-sources": "^0.1.0"
    }
}

J’ai pris le code du package.json du classic theme de la version prestashop de développement sur github

Je lance à nouveau la commande:

npm install

ou

sudo npm install

une fois que tout est installé, je peux lancer la commande

npm run watch

Si vous avez une erreur éditez le ficher webpack.config.js et passez le en mode strict:

Rajoutez:

"use strict";

au début du fichier après les commentaires:

Une fois la commande watch lancée, webpack attendra que je modifie un fichier pour compiler automatiquement.

Maintenant, je n’ai plus qu’a modifier un fichier .scss comme par exemple le theme.scss

je change la couleur du #header

webpack mouline et la compilation se lance:

Du coup sur le frontoffice:

Les couleurs sont changés automatiquement.

Une fois que vous avez fini faites en CTRL + C pour quitter webpack car ce dernier tourne en permanence.

Voila, vous savez comment modifiez votre theme avec les vrai outils,

ces technologies sont un peu compliquées à mettre en place, mais sont vraiment pratiques quand on les maitrise.

Je vous invite à vous renseigner sur la technologie Sass et Less, si vous voulez plus de détails, mais pour faire simple, c’est du css « programmé ».

Petite explication:

Dans le dossier _dev, il y a un sous dossier _partials, qui contient un fichier _variables.scss,

je vous invite à jetter un oeil et modifier un peu les variables présentes, vous verrez alors votre theme changer à allure grand V assez simplement.

Si je change la variable $gray_darker,

le system va recompiler automatiquement tous les fichiers ou cette variable est présente, et les transformer en css automatiquement dans le fichier (theme.css du thème), ce qui vous évite d’ouvrir tous vos fichiers css, rechercher la couleur, la remplacer etc…

En espèrent que cet article vous aidera à faire de belles modifications sur votre theme Prestashop

Enjoy 😉