Clever Institut

Magento 2 : Front End

Par Clever Institut

Objectifs

  • 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

Programme

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

Pédagogie

50 % Théorie / 50 % Pratique

Formations de la même catégories (5)

Dawan
Magento 2 : InitiationPar Dawan

Découvrir Magento - Savoir utiliser, comme gestionnaire de boutique, une installation prête de Magento

ENI SERVICE
Magento – Etendre et personnaliser un site e-commercePar ENI SERVICE

Dans cette formation vous apprendrez à étendre les fonctionnalités de Magento afin de personnaliser un site e-commerce. La formation est dispensée sur la dernière version de Magento version Open Source.

Clever Institut
Magento 2 : Back EndPar Clever Institut

La formation Magento 2 Back End est une formation technique qui permet d’acquérir les compétences nécessaires pour pouvoir comprendre et étendre les possibilités fonctionnelles de Magento 2. Orienté travaux pratiques, vous aborderez l’ensemble des aspects du développement sous Magento 2.

Clever Institut
Magento 2 MétierPar Clever Institut

Sur le marché depuis plus de 10 ans, Magento est une solution e-Commerce open source, flexible et évolutive, permettant de mettre en oeuvre des boutiques B2C ou B2B.

Durant cette formation nous vous présentons la plateforme et ses possibilités, notamment comment configurer vos produits, animer votre site et gérer vos commandes.

Nous utilisons les cookies afin de fournir les services et fonctionnalités proposés sur notre site et afin d’améliorer l’expérience de nos utilisateurs. En cliquant sur ”J’ai compris”, vous acceptez l’utilisation de ces cookies.