Surcharger le layout de la page d’accueil

Pré-requis

  • Disposer d’un serveur sous Linux Debian 8
  • Avoir une connexion au serveur par SSH ou par un Terminal
  • Avoir télécharger les fichiers Magento 2 nécessaires à l’installation
  • Avoir créer un thème personnalisé

Objectifs

Surcharger le layout de la page d’accueil dans un thème personnalisé

Tutoriel

Création de l’arborescence

Accéder au dossier dossier_magento/app/design/frontend/nom_du_vendor/nom_du_theme et créer les dossiers suivants :

  •   nom_du_theme
    •   Magento_Theme
      •   page_layout
      •   templates

Création des fichiers

Au sein du dossier Magento_Theme, créer le fichier suivant layouts.xml et intégrer le code XML suivant :

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
    <layout id="surcharge_home">
        <label translate="true">Surcharge - Home</label>
    </layout>
</page_layouts>

Ensuite, créer le fichier surcharge_home.xml dans le dossier page_layout et intégrer le contenu suivant :

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="empty"/>
    <referenceContainer name="page.wrapper">
        <container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-header" before="main.content"/>
        <container name="page.top" as="page_top" label="After Page Header" after="header.container"/>
        <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer"/>

        <referenceContainer name="main">
            <block class="Magento\Framework\View\Element\Template" name="customtext" template="Magento_Theme::home_content.phtml" after="-" />
        </referenceContainer>
    </referenceContainer>
</layout>

Création du fichier PHTML

Pour terminer, il est nécessaire de créer le fichier PHTML home_content.phtml dans le dossier templates

Le contenu du fichier home_content.phtml sera intégré après le contenu HTML de la page d’accueil.

Pour afficher un bloc CMS, vous devez utiliser la fonction PHP suivante :

<?php
    echo $this  ->getLayout()
                ->createBlock('Magento\Cms\Block\Block')
                ->setBlockId('cms_homepage')
                ->toHtml();
?>

Activation du layout dans le backoffice

Ouvrir, dans le backoffice, la page Home et sélectionner Surcharge – Home dans la partie layout.

Enregistrer et relancer la page d’accueil de la boutique.

Remplacer la favicon dans un thème personnalisé

Pré-requis

  • Disposer d’un serveur sous Linux Debian 8
  • Avoir une connexion au serveur par SSH ou par un Terminal
  • Avoir télécharger les fichiers Magento 2 nécessaires à l’installation
  • Avoir créer un thème personnalisé

Objectifs

Remplacer la favicon dans un thème personnalisé

Tutoriel

Création de l’arborescence

Accéder au dossier dossier_magento/app/design/frontend/nom_du_vendor/nom_du_theme et créer les dossiers du Magento_Theme/web. Le résultat obtenu doit être le suivant :

  •   nom_du_theme
    •   Magento_Theme
      •   web

Insertion du fichier favicon

Au sein du dossier web, insérer votre fichier favicon.ico.

Supprimer le cache :

rm -R pub/static/* && rm -Rf var/*

Relancer le site pour contrôler le remplacement du fichier favicon.

Configurer Gulp pour Magento 2

Pré-requis

  • Disposer d’un serveur sous Linux Debian 8
  • Avoir une connexion au serveur par SSH ou par un Terminal
  • Avoir installer Node.js
  • Avoir télécharger les fichiers Magento 2 nécessaires à l’installation

Objectifs

Utiliser Gulp pour Magento 2.

Tutoriel

Création de l’arborescence

Créer l’arborescence suivante dans le dossier /app :

  •   app
    •   local
      •   theme

Création des fichiers contenant les scripts d’éxécution

Dans le dossier local, créer les fichiers gulpfile.js et package.json.

Editer le fichier package.json et insérer le contenu suivant :

{
  "name": "local",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "chalk": "^2.0.1",
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.2",
    "gulp-cli": "^1.3.0",
    "gulp-exec": "^2.1.3",
    "gulp-less": "^3.3.2",
    "gulp-run": "^1.7.1"
  }
}

Editer le fichier gulpfile.js et insérer le contenu suivant :

'use strict';

var gulp  = require('gulp'),
    less  = require('gulp-less'),
    gutil = require('gulp-util'),
    chalk = require('chalk'),
    clean = require('gulp-clean'),
    run   = require('gulp-run'),
    exec  = require('gulp-exec'),
    /** Chargement du fichier de configuration des thèmes */
    themesConfig = require('./theme/themes'),
    /** Récupèration du nom du thème */
    options = ((process.argv.slice(process.argv.length-1))[0]).substring(2),
    /** Récupération de la configuration du thème en fonction de l'option d'éxécution du Gulp */
    theme = themesConfig[options],
    /** Définition de la racine du site Magento 2 */
    magentoRootFolder = './../../',
    /** Création du chemin du thème */
    themeSrc = theme.area + "/" + theme.vendor + "/" + theme.name,
    /** Création du dossier surveillé en fonction du thème */
    themeWatched = magentoRootFolder + "app/design/" + themeSrc,
    /** Définition du chemin de destination des fichiers compilés */
    themeDest = magentoRootFolder + "pub/static/" + themeSrc + '/' + theme.locale,
    execOptions = {
        continueOnError: false, // default = false, true means don't emit error event
        pipeStdout: false, // default = false, true means stdout is written to file.contents
        customTemplatingThing: "test" // content passed to gutil.template()
    },
    execReportOptions = {
        err: true, // default = true, false means don't write err
        stderr: true, // default = true, false means don't write stderr
        stdout: true // default = true, false means don't write stdout
    };

gulp.task('launchWatcher', function() {
    gutil.log(chalk.blue('Watcher lancé pour le thème : ' + themeSrc));
    gulp.watch([ themeWatched + '/**/*.less'], ['compileLess']);
});

gulp.task('compileLess', function() {
    var filesToCompile = [],
        magentoDevSourceDeploy = 'bin/magento dev:source-theme:deploy',
        cmd = magentoRootFolder + magentoDevSourceDeploy + ' --type="less" --area="' + theme.area + '" --theme="' + theme.vendor + '/'+ theme.name + '" --locale="' + theme.locale + '"';

    gutil.log(chalk.blue('Exécution de la commande : ' + cmd));
    gulp.src('')
        .pipe(exec(cmd), execOptions)
        .pipe(exec.reporter(execReportOptions));

    gutil.log(chalk.blue('Préparation des fichiers LESS en cours...'));
    theme.files.forEach(function(file) {
        filesToCompile.push(
            themeDest + '/' + file + '.less'
        );
    });

    return gulp
        .src(filesToCompile)
        .pipe(less().on('error', function (error) {
            gutil.log(chalk.red('Erreur lors de la compilation LESS : ' + error.message));
        }))
        .pipe(gulp.dest(themeDest + '/css'))
        .pipe(gutil.buffer(function() {
            gutil.log(chalk.green('Compilation LESS réalisée avec succès'));
        }));
});

/** Permet de lancer par défaut le watcher */
gulp.task('default', ['launchWatcher']);

Création du fichier de paramétrages

Créer un fichier theme.js au sein du sous-dossier theme et intégrer le contenu suivant :

module.exports = {
    nom_du_theme: {
        "locale": "code_de_langue",
        "area": "code_de_l_area",
        "vendor": "nom_du_vendor",
        "name": "nom_du_theme",
        "files": [
            "css/styles-m",
            "css/styles-l"
        ]
    }
};

Lancer le watcher

Exécuter la commande suivante pour lancer le watcher :

gulp watch --nom_du_theme

Désactiver la comparaison de produits

Pré-requis

  • Disposer d’un site Magento 2
  • Avoir accès aux fichiers et dossiers du site Magento 2
  • Avoir créer un thème personnalisé

Objectifs

Désactiver la comparaison de produits dans une boutique Magento 2.

Tutoriel

Création de l’arborescence

Accéder au dossier du thème ciblé :

  •   dossier_magento
    •   app
      •   design
        •   frontend
          •   nom_du_vendor
            •   nom_du_theme

Au sein du dossier nom_du_theme, créer les dossiers Magento_Catalog et Magento_CatalogWidget ainsi que leurs sous-dossiers, le résultat final doit être celui-ci :

  •    nom_du_theme
    •   Magento_Catalog
      •   layout
      •   product
        •   widget
          •   new
            •   content
    •   Magento_CatalogWidget
      •   templates
        •   product
          •   widget
            •   content

Modification des fichiers

Créer un fichier default.xml au sein du sous-dossier layout du dossier Magento_Catalog et intégrer le contenu suivant :

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="catalog.compare.sidebar" remove="true"/>
        <referenceBlock name="view.addto.compare" remove="true" />
        <referenceBlock name="view.addto.compare.bundle" remove="true" />
        <referenceBlock name="related.product.addto.compare" remove="true" />
        <referenceBlock name="upsell.product.addto.compare" remove="true" />
        <referenceBlock name="category.product.addto.compare" remove="true" />
        <referenceBlock name="catalogsearch.product.addto.compare" remove="true" />
        <referenceBlock name="crosssell.product.addto.compare" remove="true" />
    </body>
</page>

Accéder au dossier app/code/Magento/Catalog/view/frontend/templates/product/widget/new/content et copier-coller les fichiers new_grid.phtml et new_list.phtml dans le sous-dossier correspond du dossier Magento_Catalog.

Remplacer par false la valeur de la variable $showCompare située à la ligne 26 du fichier new_grid.phml et à la ligne 27 du fichier new_list.phtml.

Terminer la désactivation du module en réalisant un copier-coller du fichier grid.phtml situé dans le dossier app/code/Magento/CatalogWidget/view/frontend/templates/product/widget/content vers le sous-dossier content du dossier Magento_CatalogWidget.

Remplacer par false la valeur de la variable $showCompare située à la ligne 28 du fichier.

Création d’un thème personnalisé sous Magento 2

Pré-requis

  • Disposer d’un site Magento 2
  • Avoir accès aux fichiers et dossiers du site Magento 2

Objectifs

Créer et activer un thème personnalisé dans Magento 2 basé sur le thème Magento/Luma

Tutoriel

Création de l’arborescence

Accéder au dossier dossier_magento/app/design/frontend et créer les dossiers du vendor et du thème. Le résultat obtenu doit être le suivant :

  •   dossier_magento
    •   app
      •   design
        •   frontend
          •   nom_du_vendor
            •   nom_du_theme

Au sein de l’arborescence, créer les fichiers suivants :

  •   nom_du_vendor
    •   nom_du_theme
      •   etc
      •   Magento_Theme
        •   layout
      •   media
      •   web
        •   css
          •   source
        •   fonts
        •   images
        •   js

Chaque dossier à un rôle qui lui est propre :

  • etc : Contient le fichier de configuration view.xml
  • Magento_Theme : Contient le fichier de configuration view.xml
  • media : Contient le fichier image de prévisualisation du thème
  • web : Contient les dossiers et fichiers statiques du thème

Création des fichiers

Au sein de l’arborescence du thème, créer les fichiers preview.jpg, registration.php et theme.xml suivant l’exemple ci-dessous :

  •   nom_du_vendor
    •   nom_du_theme
      •   media
        •   preview.jpg
      •   registration.php
      •   theme.xml

Le fichier de prévisualisation du thème, preview.jpg, est un fichier image de 588 pixels de largeur et de hauteur.

Intégrer le code suivant dans le fichier registration.php pour permettre de déclarer le thème dans Magento :

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/nom_du_vendor/nom_du_theme',
__DIR__
);

Ensuite, éditer theme.xml. Le fichier comporte :

  • le titre du thème
  • la dépendance à un thème parent
  • le chemin d’accès au fichier image de prévisualisation

Dans le cas du tutoriel, le thème héritera du thème Magento/luma. Hériter d’un thème permet de modifier uniquement les fichiers nécessaires lors de la phase d’intégration.

Intégrer le code suivant dans le fichier theme.xml :

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>nom_du_vendor nom_du_theme</title>
<parent>Magento/luma</parent>
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>

La balise parent permet à Magento de l’informer que nous hériterons du thème de base Magento/luma.

Déclaration du thème dans l’interface d’administration

Ouvrir la page Content/Themes de l’administration de la boutique pour vérifier que le thème précédemment créé est bien pris en compte.

Ouvrir ensuite la page Content/Design, éditer le Default Store View et sélectionner le thème.

Enregistrer la configuration afin qu’il soit pris en compte.