La Formation Magento 2 permet aux développeurs Front-End, intégrateurs CSS et développeurs FullStack de comprendre et maîtriser l’architecture technique des thèmes Magento 2. Elle englobe la personnalisation de thèmes, l’élaboration de composants Front et l’amélioration de l’affichage visuel des sites e-commerce. Les apprenants seront formés à la gestion des mises en page, des modèles, du CSS et des widgets tout en suivant les normes de développement appropriées.
Intégrateurs CSS et développeurs souhaitant maîtriser le design Magento 2.
- Expérience en JavaScript et intégration CSS
- Connaissance de Magento 1 (un plus)
- Comprendre l’architecture technique des thèmes Magento 2
- Personnaliser et créer de nouveaux thèmes
- Maîtriser les layouts, templates et widgets
- Mettre en œuvre les bonnes pratiques de développement Front
Programme de la formation
Maîtriser le design et la personnalisation des sites Magento 2.
Formation Magento 2 – Design et Personnalisation E-commerce
Contenu
- Généralités et thèmes
- Objectif d’un site e-commerce. Fonctionnalités principales de Magento.
- Les différents modes de gestion.
- Vue d’ensemble des thèmes.
- Créer et modifier un thème Magento.
- Déclarer un logo dans votre gabarit.
- Configurer les tailles d’images du thème.
- Faire de son thème un package Composer.
Travaux pratiques :
- Créer un thème avec l’affectation d’un logo pour le décliner sur le site.
- Les layouts
- Vue d’ensemble des layouts.
- Les différents blocks et Containers.
- Les types de layout.
- Structurer une page layout.
- Comment déclarer une page layout ?.
- Page configuration.
Travaux pratiques
- Mettre en œuvre le layout.
- Templates pour boutique e-commerce
- Concept de boutique e-commerce.
- Vue d’ensemble des templates disponibles.
- Template Root.
- XSS et les templates.
- Templates : $this, $block, qui suis-je ?
Travaux pratiques
- Surcharger un template dans notre nouveau thème
- Cascading Style Sheets (CSS)
- Inclure des fichiers CSS.
- LESS (préprocesseur CSS).
- Grunt JavaScript task runner.
- Déclarer son thème dans la configuration Grunt.
- Grunt et LiveReload.
- Les widgets
- Où se trouvent les mixins ?
- Les variables prédéfinies
- Utiliser des mixins.
- Comprendre et utiliser les fonts custom.
- Présentation des solutions widgets.
Travaux pratiques
- Créer votre widget personnalisé.
- Le Responsive Design et Magento 2
- Les solutions Responsive Design dans Magento.
- Approche Mobile First.
- Présentation et utilisation des outils Responsive Design.
- Impact sur les performances Front End.
- JavaScript Responsive Web Design.
Travaux pratiques
- Créer un thème Responsive Design.
- Les tests Front-End
- Panorama des solutions de test.
- JsTestDriver et PhpStorm.
- Internationalisation et gestion des emails
- Dictionnaires de traductions.
- Packages de traductions.
- Emails transactionnels.
- Customisation d’email via le thème
Cette formation Magento 2 fournit toutes les aptitudes nécessaires pour améliorer le design et l’expérience utilisateur de vos sites sous Magento 2. Pour explorer d’autres formations connexes, consultez notre catégorie Développement web et CMS.
