Orsys

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

Par Orsys

Objectifs

À 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

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é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.

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é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.

PDF

Imprimer

Envoyer

Envoyer la page à :

Formations de la même catégories (5)

Dawan
Magento 2 : InitiationPar Dawan

Découvrir Magento - Savoir utiliser, comme gestionnaire de boutique, une installation prête de Magento

ENI SERVICE
Magento – Etendre et personnaliser un site e-commercePar ENI SERVICE

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.

Clever Institut
Magento 2 : Back EndPar Clever Institut

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.

Clever Institut
Magento 2 MétierPar Clever Institut

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.