Magento 2, personnaliser le design de ses sites de e-commerce

- Avoir une bonne connaissance sur Magento 1
- Avoir une expérience en JavaScript/intégration CSS

- Comprendre la structure technique d'un thème Magento 2
- Connaître le paramètrage Magento 2 qui a une influence sur le rendu
- Etre capable de personnaliser de nouveaux thèmes et de créer des constituants Front
- Elaborer des bonnes pratiques du développement Front

Public :

Pour les intégrateurs CSS, les développeurs Front et FullStack

Généralités et thèmes

- Objectif d'un site e-commerce
- Fonctionnalités principales de Magento
- Les différents modes de gestion
- Panorama 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 du thème un package Composer

Les layouts

- Panorama des layouts
- Les différents blocks et Containers
- Les types de layout
- Structurer une page layout
- Déclarer une page layout
- Page configuration

Templates pour boutique e-commerce

- La notion de boutique e-commerce
- Panorama des templates disponibles
- Template Root
- XSS et les templates
- Les emplates $this, $block

Cascading Style Sheets (CSS)

- Inclure des fichiers CSS
- Le préprocesseur CSS
- Grunt JavaScript task runner
- Déclarer son thème dans le paramétrage de Grunt
- Grunt et LiveReload

Les widgets

- Les mixins
- Les variables prédéfinies
- Utiliser des mixins
- Comprendre et exploiter les fonts custom
- Présentation des solutions widgets

Le Responsive Design et Magento 2

- Les solutions Responsive Design dans Magento
- Approche Mobile First
- Présentation et exploitation des outils Responsive Design
- Impact sur les performances Front End
- JavaScript Responsive Web 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 par le thème