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

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.