Étiquette : font-end

• Les commandes Magento 2 du développeur Front-End
• Installation des sample datas: comment se logger sur repo.magento.com pour Composer ?
• Ajouter un nouveau module à votre projet Magento 2
• Ajouter un nouveau thème à votre projet Magento 2
• Styles et héritage
• Aliases

Les commandes Magento 2 du développeur Front-End

Disponibles ici: Commandes Magento 2 Magerun développeur front-end.

Installation des sample datas: comment se logger sur repo.magento.com pour Composer ?

Problème: j’essaye d’installer les sample datas de Magento 2 via Composer, mais lorsque je tape la commande $ bin/magento sampledata:deploy, j’obtiens un message Authentication required (repo.magento.com): Username Password.

Solution: Il faudra créer un compte sur marketplace.magento.com et récupérer le login (clé publique) et le mot de passe (clé privée) sous My Profile > My Products > Access Keys. Il sera peut-être nécessaire de générer une paire de clé.

Le Username demandé correspond à la clé publique. Le Password demandé correspond à la clé privée. Et PAS aux username et password de votre compte marketplace.magento.com!

Ajouter un nouveau module à votre projet Magento 2

En ligne de commande: $ n98-magerun2 dev:module:create

Ajouter un nouveau thème à votre projet Magento 2

Fichiers à préparer

Partir d’un thème Luma Child

Tips: les sources d’un starter-theme Luma Child sont disponibles en suivant ce lien.

Partie conf à ajouter dans <project_root>\dev\tools\grunt\configs\local-themes.js:

Partir from-scratch

Sinon, si vous souhaitez débuter +/- from-scratch, vous pouvez suivre la documentation officielle de Magento 2 pour créer un nouveau thème.

Différentes manipulations à effectuer et commandes à exécuter

Dans cet ordre (et PAS dans un autre ordre, sinon ça ne fonctionne pas) :

1. Ajouter le dossier du nouveau thème dans: app/design/frontend/<Vendor_name>/<theme_name>
2. Mettre à jour le nouveau thème dans l’interface admin: Content > Design > Configuration > (Select Edit on your Store View) > Default Theme > Applied Theme > "<your_new_theme_name>"
3. Flusher les caches avec la commande: $ n98-magerun2 cache:flush
4. Lancer les commandes Grunt: $ grunt clean && grunt exec && grunt less && grunt watch
5. Vider les caches statiques des thèmes: $ rm -rf pub/static/*; rm -rf var/view_preprocessed/
6. Vous pouvez rafraîchir votre navigateur: ctrl + F5

Styles et héritage

Deux notions bien distinctes à intégrer: l’extension et la surcharge de styles.

Extension (extend) des styles

L’extension permet de conserver, pour le fichier qui est étendu, les styles déclarés dans le(s) thème(s) parent(s) et d’en écrire des supplémentaires. Cette méthode est pratique lorsque votre thème hérite d’un thème parent dont les styles vous conviennent déjà. Elle s’utilise pour apporter des modifications mineures à l’existant.

Surcharge (override) des styles

La surcharge écrase, pour le fichier qui est surchargé, l’intégralité des styles déclarés dans le(s) thème(s) parent(s) pour repartir d’une base neutre. Cette dernière demande beaucoup plus de travail côté front-end.

Override et déclaration de nouvelles variables less

Tips: Magento naming convention for the Less variables et Modifier les valeurs des variables par défaut d’un thème parent (blank/luma).

Ce qu’il faut retenir:

• Pour surcharger les valeurs de variables existantes et déclarées dans un thème parent, il faut surcharger le fichier _theme.less. Ce fichier doit contenir uniquement des déclarations concernant des variables déjà existantes dans des thèmes parents.
• Pour déclarer de nouvelles variables propres à votre thème enfant, il faut créer un nouveau fichier. Vous avez le choix entre:
  • Créer un fichier _variables_extend.less qu’il faudra importer depuis le fichier _extend.less
  • ou créer un fichier qui peut s’appeler comme vous voulez (à part _variables.less qui va faire exploser votre affichage!) et dans lequel vous consignerez vos nouvelles variables

Héritage des thèmes dans Magento 2: Luma < (hérite de) Blank < (hérite de) Core.

• vendor/magento/theme-frontend-luma/web/css/source/_theme.less
  • Contient uniquement des surcharges de variables ayant déjà été déclarées dans les fichiers .less du Core (cf. lib/web/css/source/lib/_variables.less).
• vendor/magento/theme-frontend-luma/web/css/source/_variables.less
  • Contient des surcharges de variables ayant déjà été déclarées dans le/les thème(s) parent(s) (Blank < Core), ainsi que de nouvelles variables qui seront exploitées dans plusieurs fichiers du thème Luma.
  • Ce fichier n’a pas l’air surchargeable dans un theme qui serait enfant de Luma (héritage: Luma Child < Luma < Blank < Core). Il faut obligatoirement l'étendre en créant un nouveau ficher app/design/frontend/<Vendor_name>/<Luma_child_theme_name>/css/source/_variables_extend.less, lui-même importé via @import '_variables_extend.less'; depuis app/design/frontend/<Vendor_name>/<Luma_child_theme_name>/css/source/_extend.less.
  • Ce fichier n’a pas l’air d’avatage surchargeable dans un theme qui serait simplement enfant de Blank (héritage: Blank Child < Blank < Core). Il faut obligatoirement l'étendre en créant un nouveau ficher app/design/frontend/<Vendor_name>/<Blank_child_theme_name>/css/source/_variables_extend.less, lui-même importé via @import '_variables_extend.less'; depuis app/design/frontend/<Vendor_name>/<Blank_child_theme_name>/css/source/_extend.less.
• vendor/magento/theme-frontend-luma/web/css/source/_forms.less contient de nouvelles variables qui seront exploitées uniquement dans ce fichier.

vendor/magento/theme-frontend-luma/web/css/source/_variables.less

Luma nous donne un bon exemple de comment doit être organisée cette feuille de styles. Les grandes parties (Typography, Icons, …) contiennent des surcharges des valeurs de variables existantes déclarées respectivement au minimum dans lib/web/css/source/lib/variables/_typography.less et dans lib/web/css/source/lib/variables/_icons.less.