Votre partenaire formation 100% digital

Magento 2 : Front End

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

  • Formateur(s)

    Claude LECOMTE
  • Référence

    MAGF01

  • Durée

    2 jours (14h)

  • Prix unitaire HT

    1390 €

Prochaines sessions

Prochaines sessions - Magento 2 : Front End
Date de début Ville Prix unitaire HT
3 décembre 2018 Paris 1390 € Réserver

Description

La formation Magento 2 Front End est une formation technique qui permet d’acquérir les compétences nécessaires pour pouvoir comprendre, paramétrer et spécialiser le rendu graphique d’une plate-forme Magento 2. Orienté travaux pratiques, vous aborderez l’ensemble des aspects de la customisation du theming Magento 2.

Objectifs pédagogiques

  • Comprendre l’architecture technique d’un theme Magento 2
  • Connaître les paramètres Magento 2 qui ont une influence sur le rendu
  • Modifier/Surcharger un thème, Créer un nouveau composant front
  • Mettre en oeuvre les bonnes pratiques de développement front

Public cible

Intégrateur CSS, Développeur Front, Développeur FullStack souhaitant maîtriser les aspects techniques du design et rendu d’un site en Magento 2

Pré-requis

Expérience en javascript/intégration CSS et de préférence connaissant Magento 1.

Modalités d’évaluation

L’évaluation des acquis se fait tout au long de la session au travers d’ateliers de mise en pratique des notions et concepts abordés pendant la formation.

Méthodes pédagogiques

50 % Théorie / 50 % Pratique

Programme de la formation

Généralités

  • Prérequis
  • Mode dev/prod

Thèmes

  • Présentation
  • Création d’un thème
  • Déclarer un logo
  • Configurer les tailles d’images du thèmes
  • Faire de son thème un package Composer (optionel)
  • Les fichiers statiques d’un thème
  • TP 1 : Créer un thème et lui affecter le logo x2i et l’appliquer au site

Layout

  • Introduction
  • Containers & blocks
  • Les types de layout
  • Page layout
  • Déclaration de page layout
  • Page configuration
  • Generic layout
  • Etendre un fichier de layout
  • Surcharger un fichier de layout
  • TP 2 : Manipulation du layout

Templates

  • Introduction
  • Initialisation des templates
  • Template Root
  • XSS et les templates
  • Templates : $this, $block, qui suis-je ?
  • TP 3 : Surcharger un template dans notre nouveau thème

Cascading Style Sheets (CSS)

  • Inclure des fichiers CSS
  • Préprocesseur CSS (less)
  • Grunt Javascript task runner
  • Déclarer son thème dans la config Grunt
  • Grunt et LiveReload

Magento UI library

  • Où se trouvent les mixins ?
  • Les variables prédéfinies
  • Utiliser des mixins
  • Les fonts custom
  • TP 4 : Ajouter une police de caractère à notre thème

Le responsive design et Magento 2

  • Introduction
  • Présentation du mixin .media-width()
  • Utiliser le mixin .media-width()
  • Mobile first
  • Javascript RWD
  • TP 5 : Créer un thème mobile dédié

Traductions

  • Introduction
  • Dictionnaires de traductions
  • Packages de traductions

Javascript Unit Tests

  • Présentation
  • JsTestDriver et PhpStorm

Emails transactionnels

  • Introduction
  • Customisation d’email via le thème
  • Csutomisation d’email via l’interface backend

Widgets

  • Introduction
  • Widget.xml
  • Class et templates de widgets
  • TP 6 : Créer un widget simple

Performances frontend

  • Présentation/Introduction