Votre partenaire formation 100% digital

Magento 2 : Front End

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

  • Formateur(s)

    Marie DELABRE
  • Référence

    MAGF01

  • Durée

    2 jours (14h)

  • Prix unitaire HT

    1390 €

pictogramme calendrier Prochaines sessions

Prochaines sessions - Magento 2 : Front End
Date de début Ville Prix unitaire HT
29 juin 2021 Paris 1390 € Réserver
20 septembre 2021 Paris 1390 € Réserver
16 décembre 2021 Paris 1390 € Réserver

pictogramme information 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.

pictogramme progamme 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

pictogramme cible 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

pictogramme check liste 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

Dernière mise à jour : 01/03/2021

pictogramme information Programme de la formation

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
  • Etendre 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

Concernant la mise en pratique
A 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