Formation Magento 2 Front End Concepts et bonnes pratiques de développement Front Office avec Magento 2

Magento est l'un des cinq premiers CMS d'e-commerce utilisés en France et le premier reposantsur une technologie open source.

À l'issue de cette formation, les participants auront acquis les connaissances et les compétences nécessaires pour :

• Comprendre comment fonctionne un thème Magento 2
• Savoir quels paramètres activer pour modifier le rendu dans Magento 2
• Modifier un thème, agrémenter un thème
• Créer un nouveau composant front
• Utiliser les bonnes pratiques de développement front dans Magento 2.

Public :

Cette formation s'adresse aux développeurs Front End, aux intégrateurs CSS et aux développeurs FullStack voulant maîtriser le design et le rendu d’un site en Magento 2.

Prérequis :

Pour suivre cette formation Magento 2, il est demandé d'avoir de l'expérience en programmation avec JavaScript et dans l'intégration CSS. Il est préférable de connaître Magento 1.

Généralités

Les prérequis techniques
Les différents modes
Les lignes de commandes utiles

Les thèmes

Introduction
Création d’un thème
Déclarer un logo
Configurer les tailles d’images du thème
L’arborescence d’un thème

Le layout

Introduction
Containers & blocks
Les types de layout
Page layout
Déclaration de page layout
Page configuration
Generic layout
Étendre un fichier de layout
Surcharger un fichier de layout

Les templates

Introduction
Initialisation des templates via le layout

Le back-office de Magento

Les widgets
Les blocs CMS
Les principaux paramètres de configuration impactant le front

Le process de build

Préprocesseur CSS
Installation de Grunt
Configuration de grunt
Les principales lignes de commande

Le Cascading Style Sheets (CSS)

Introduction
Inclure des fichiers CSS
Surcharger ou étendre le CSS
Créer un fichier less
@magento_import
Les typographies
Les pictogrammes

La librairie graphique Magento 2

Introduction
Où se trouvent les mixins ?
Les variables prédéfinies
Utiliser des mixins
Les UI components

Le responsive web design

Mobile first
Présentation du mixin CSS .media-width()
Utilisation du mixin CSS .media-width()
Javascript RWD

Le Javascript

Présentation de RequireJS :
- Créer un fichier JS
- Surcharger un fichier JS
- Les mixins
- Les widgets jQuery
- Initialiser un widget jQuery
- Étendre un widget jQuery
Présentation de KnockoutJS :
- Qu’est-ce que le data-binding ?
- Le view-model
- Les bindings
- Les observables
- Les components
- Le templating
- Les scopes dans Magento 2

Les traductions

Introduction
L’ordre de lecture
Les dictionnaires de traduction
Les clés de traduction et leur syntaxe
Les packages de traduction

Les emails transactionnels

Introduction
Customisation d’email via le thème
Customisation d’email via l’interface d’administration

Quelques astuces pour aller plus loin

Le statut des caches
Trouver le bon fichier
Les problèmes de compilation
Les problèmes de permissions
La maintenance
La confirmation de commande
Les fonctionnalités EE
Quelques modules tiers utiles

À la fin de chaque module théorique, les participants mettront en œuvre les différents concepts abordés en réalisant un TP qui sera le fil rouge durant les deux jours de formation. Ce TP repose sur l’intégration de maquettes graphiques et cible les interfaces majeures d’un site e-commerce, à savoir la catégorie (grille de produits), la fiche produit et le panier.