> Formations > Compétences métiers > Marketing > E-commerce > Formation Magento 2, personnaliser le design de vos sites de e-commerce > Formations > Compétences métiers > Formation Magento 2, personnaliser le design de vos sites de e-commerce

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

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

Télécharger au format pdf Partager cette formation par e-mail 2

Télécharger au format pdf Partager cette formation par e-mail 2

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




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.

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
Du 17 au 18 novembre 2022
FR
Classe à distance
S’inscrire