Orsys

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

Par Orsys

Objectifs

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

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.

Nous utilisons les cookies afin de fournir les services et fonctionnalités proposés sur notre site et afin d’améliorer l’expérience de nos utilisateurs. En cliquant sur ”J’ai compris”, vous acceptez l’utilisation de ces cookies.