Magento 2, personnaliser le design de ses sites de e-commerce
Par OrsysObjectifs
- Comprendre l'architecture technique d'un thème Magento 2
- Connaître les paramètres Magento 2 qui ont une influence sur le rendu
- Personnaliser de nouveaux thèmes et créer des composants Front
- Mettre en œuvre les bonnes pratiques de développement Front
Programme
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.
Pédagogie
Création d'une plateforme e-commerce côté client.
Alternance entre présentation magistrale, illustrations de cas concrets et travaux pratiques.
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.
Imprimer
Envoyer
Envoyer la page à :
Formations de la même catégories (5)
Découvrir Magento - Savoir utiliser, comme gestionnaire de boutique, une installation prête de Magento
Maîtriser pleinement Magento et ses fonctionnalités
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.
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.
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.
