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

Vous connaitrez les différentes techniques permettant de concevoir et mettre en œuvre un CMS d'e-commerce Open Source Magento 2. Vous verrez les aspects d'installation, de customisation du theming Magento, du responsive design, des widgets ainsi que la mise en place de tests front-end et l'internationalisation.

Inter

Intra

Sur mesure

Cours pratique en présentiel ou en classe à distance

Réf. MFE

Prix : 1510 € H.T.

2j - 14h

Pauses-café et
déjeuners offerts

Dates, lieux et Inscription

Nous contacter

Objectifs pédagogiques

À l’issue de la formation, le participant sera en mesure de :

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

Public concerné

Intégrateurs CSS, développeurs front, développeurs full stack souhaitant maîtriser les aspects techniques du design et du rendu d'un site en Magento 2.

Prérequis

Expérience en JavaScript/intégration CSS. La connaissance de Magento 1 est un plus.

Vérifiez que vous avez les prérequis nécessaires pour profiter pleinement de cette formation en faisant ce test.

Programme de la formation

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éation d'un thème front-office.
Déclarer un logo dans votre gabarit.
Configurer les tailles d'images du thème.
Création d'un thème back office.

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 types de layout.
Structurer une page layout.
Comment déclarer une page layout ?
Structurer un thème layout.
Les différents blocks et containers.
Étendre un layout.
Surcharger un layout.

Travaux pratiques

Modifier l'apparence graphique du site en manipulant les layouts.

Templates pour boutique e-commerce

Les concepts de base.
Vue d'ensemble des templates disponibles.
Initialiser un template.
Surcharger un template.

Travaux pratiques

Surcharger un template dans notre nouveau thème.

Cascading style sheets (CSS)

Less et Grunt
Déclarer son thème dans la configuration Grunt.
Grunt et LiveReload.
Inclure des fichiers CSS.
Surcharger et étendre le CSS.
Les fonts custom et les variables.
Les mixins et Les UI components.

Les widgets, les blocs CMS et le Javascript

Comprendre et utiliser RequireJS.
Les widgets jQuery.
Comprendre et utiliser KnockoutJS.
Création d'un widget et d'un bloc CMS en back office.
Création d'un widget dans le thème.
Déclaration dans un contenu CMS.
Déclaration dans un template.
Déclaration en layout.

Travaux pratiques

Créer un custom component et un 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 e-mails

Dictionnaires de traductions.
Packages de traductions.
Ordre de lecture par Magento.
Les clés de traduction selon le contexte.
Concepts de base des e-mails.
Surcharge en back office.
Surcharge dans le thème.

Modalités pratiques

Travaux pratiques

Création d'une plateforme e-commerce côté client.

Méthodes pédagogiques;

Alternance entre présentation magistrale, illustrations de cas concrets et travaux pratiques.

Modalités d'évaluation

Le formateur évalue la progression pédagogique du participant tout au long de la formation au moyen de QCM, mises en situation, travaux pratiques…

Le participant complète également un test de positionnement en amont et en aval pour valider les compétences acquises.

Solutions de financement

Pour trouver la meilleure solution de financement adaptée à votre situation : contactez votre conseiller formation.

Il vous aidera à choisir parmi les solutions suivantes :

Le plan de développement des compétences de votre entreprise : rapprochez-vous de votre service RH.
Le dispositif FNE-Formation.
L’OPCO (opérateurs de compétences) de votre entreprise.
Pôle Emploi sous réserve de l’acceptation de votre dossier par votre conseiller Pôle Emploi.

Le plan de développement des compétences de votre entreprise : rapprochez-vous de votre service RH.
Le dispositif FNE-Formation.
L’OPCO (opérateurs de compétences) de votre entreprise.
Pôle Emploi sous réserve de l’acceptation de votre dossier par votre conseiller Pôle Emploi.

Horaires

En présentiel, les cours ont lieu de 9h à 12h30 et de 14h à 17h30.
Les participants sont accueillis à partir de 8h45. Les pauses et déjeuners sont offerts.

En classe à distance, la formation démarre à partir de 9h.

Pour les stages pratiques de 4 ou 5 jours, quelle que soit la modalité, les sessions se terminent à 15h30 le dernier jour.

Dates et lieux