Magento 2 : Comment mettre en place Let’s Encrypt et Varnish

Pré-requis

  • Disposer d’un serveur sous Linux Debian 9 avec NGINX
  • Avoir installer Magento 2.2.x
  • Avoir une connexion au serveur par SSH ou par un Terminal

Objectifs

Mettre en place un certificat SSL Let’s Encrypt et mettre en place le cache Varnish

Tutoriel

Installation et obtention du certificat SSL

Pour obtenir un certificat SSL, il est nécessaire d’installer Certbot. Pour cela, il faut ajouter le dépôt dans le fichier /etc/apt/sources.list :

sudo nano /etc/apt/sources.list

Ajouter à la fin du fichier :

# Certbot
deb http://deb.debian.org/debian stretch-backports main contrib non-free
deb-src http://deb.debian.org/debian stretch-backports main contrib non-free

Procéder à l’installation de Certbot :

sudo apt-get update && sudo apt install python-certbot-nginx -t stretch-backports

Dès que l’installation est terminée, il faut obtenir le certificat :

sudo certbot --nginx -d nomdedomaine.com -d www.nomdedomaine.com

Il faut remplacer nomdedomaine.com et www.nomdedomaine.com par la valeur server_name présent dans le vhost NGINX de l’hébergement souhaité.

Lors de la récupération du certificat SSL, il vous sera demandé de faire votre choix entre No Redirect et Redirect :

Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access.
-------------------------------------------------------------------------------
1: No redirect - Make no further changes to the webserver configuration.
2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for
new sites, or if you're confident your site works on HTTPS. You can undo this
change by editing your web server's configuration.
-------------------------------------------------------------------------------
Select the appropriate number [1-2] then [enter] (press 'c' to cancel):

Sélectionner le choix qui vous convient pour finaliser la configuration.

Installation et paramétrage de Varnish

Tout d’abord, il est nécessaire d’installer Varnish :

sudo apt-get install varnish

Accéder ensuite à l’interface d’administraiton de votre site Magento 2, cliquer sur STORES > Configuration > ADVANCED > System > Full Page Cache.

Au lieu de choisir le système de cache Built-in Cache, sélectionner Varnish Cache (Recommended).

Cliquer sur Varnish Configuration et procéder au paramétrage suivant :

  • Access list : Renseigner l’adresse IP du serveur ayant Magento 2 installé
  • Backend host : Renseigner l’adresse IP du serveur ayant Magento 2 installé
  • Backend port : 8080
  • Grace period : 300

Cliquer sur Save Config et exporter le fichier de configuration Varnish en cliquant sur Export VCL for Varnish 4

La version 2.2 de Magento n’est pas compatible avec Varnish 5. Le fichier exporté pour Varnish 5 sera éxécuté avec le moteur Varnish 4.

Une fois le fichier default.vcl téléchargé. Ouvrir, sur le serveur Varnish, le fichier /etc/varnish/default.vcl et remplacer son contenu par le fichier téléchargé.

Avant cela, je vous invite à créer une copie du fichier de configuration par défaut :

sudo cp /etc/varnish/default.vcl /etc/varnish/default.vcl.origin && sudo nano /etc/varnish/default.vcl

Remplacer tout le contenu du fichier par le contenu du fichier de configuration généré par Magento.

Avant d’enregistrer et de fermer le fichier, il faut procéder à quelques modifications.

Remplacer dans backend default, la valeur de l’url probe : .url = "/pub/health_check.php"; par .url = "/health_check.php";

afin d’éviter d’obtenir l’erreur suivante 503 Backend fetch failed.

Rechercher la ligne # Static files caching et commenter l’instruction return (pass); et supprimer les commentaires sur les 3 instructions unset … afin de mettre en cache les fichiers statiques.

Enregistrer et fermer le fichier de configuration.

Sur le serveur NGINX, ouvrir le fichier nginx.conf.sample du site Magento 2 et vérifier la présence de health_check dans l’instruction située après le commentaire # PHP entry point for main application.

Pour finaliser la configuration de Varnish, il est nécessaire de modifier le fichier /lib/systemd/system/varnish.service :

sudo nano /lib/systemd/system/varnish.service

Remplacer la ligne :

ExecStart=/usr/sbin/varnishd -a :6081 -T localhost:6082 -f /etc/varnish/default.vcl -S /etc/varnish/secret -s malloc,256m

par le contenu ci-dessous :

ExecStart=/usr/sbin/varnishd -a :8080 \
    -T localhost:6082 \
    -f /etc/varnish/default.vcl \
    -p thread_pools=4 \
    -p thread_pool_max=1000 \
    -p connect_timeout=300 \
    -p http_resp_hdr_len=65536 \
    -p http_resp_size=98304 \
    -S /etc/varnish/secret \
    -s malloc,1024m

Enregister, et fermer le fic et relancer Varnish :

sudo systemctl daemon-reload && sudo service varnish restart

Vérifier que Varnish est actif avec les paramètres renseignés :

sudo service varnish status

Configuration de Varnish avec Let’s Encrypt

Pour faire fonctionner une boutique en HTTPS avec Varnish, il est faut que NGINX écoute les ports 443, pour cela, il faut modifier le fichier de vhost

sudo nano /etc/nginx/sites-available/votre_fichier_vhost

Remplacer l’instruction listen 80 par listen 8080 et ajouter un bloc server pour le HTTPS, voici le résultat final :

upstream fastcgi_backend {
    server unix:/run/php/php7.0-fpm.sock;
}

server {
    listen 8080;
    server_name nom_de_domaine;
    set $MAGE_ROOT /var/www/dossier_du_site_magento_2;
    include /var/www/dossier_du_site_magento_2/nginx.conf.sample;
}

server {
    listen 443 ssl http2;
    server_name nom_de_domaine;

    fastcgi_param HTTPS on;

    ssl on;
    ssl_certificate /etc/letsencrypt/live/nom_de_domaine/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/nom_de_domaine/privkey.pem;

    if ($scheme = https) {
        set $ssl_offloaded on;
    }

    location / {
        # Renvoi sur le serveur Varnish
        proxy_pass http://adresse_ip_du_serveur_varnish:8080;
        proxy_set_header Host $http_host;
        proxy_set_header X-Forwarded-Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Ssl-Offloaded "1";
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header X-Forwarded-Port 443;
        proxy_hide_header X-Varnish;
        proxy_hide_header Via;
        proxy_set_header HTTPS "on";
    }
}

Enregister et fermer le fichier. Tester ensuite la configuration en utilisant la commande sudo nginx -t et redémarrer si il n’y a aucune erreur :

sudo service nginx restart

Avant de terminer, il faut lancer la commande :

sudo php /var/www/dossier_du_site_magento_2/bin/magento setup:config:set --http-cache-hosts=adresse_ip_du_serveur_varnish:8080

Vider le cache de Magento :

sudo php /var/www/dossier_du_site_magento_2/bin/magento cache:flush

L’installation et le paramétrage de Varnish avec SSL et terminer.

Debian 9 : Installation de Magento 2 via Composer

Pour le tutoriel, j’utilise une machine virtuelle composée de 4 processeurs et de 4 Go de mémoire vive sous Virtualbox.

Pré-requis

  • Disposer d’un serveur sous Linux Debian 9
  • Avoir une connexion au serveur par SSH ou par un Terminal

Objectifs

Installer Magento 2 depuis Composer.

Tutoriel

Installation des composants indispensables

Pour installer Magento 2, il est nécessaire d’avoir les composants suivants :

  • Curl
  • Nginx
  • MariaDB
  • PHP 7 FPM
  • Exim 4

Lancer un Terminal ou une connexion SSH et installer les composants suivants :

sudo apt-get install -y zip unzip curl nginx mariadb-server mariadb-client php7.0-fpm php-common php7.0-cli php7.0-common php7.0-json php7.0-opcache php7.0-readline php7.0-gd php7.0-mysql php7.0-mcrypt php7.0-curl php7.0-intl php7.0-xsl php7.0-mbstring php7.0-zip php7.0-bcmath php7.0-iconv php7.0-soap

Installer Composer :

curl -sS https://getcomposer.org/installer | php

Copier le fichier composer.phar dans le dossier bin et modifier les droits pour l’éxécution :

sudo mv composer.phar /usr/local/bin/composer && sudo chmod +x /usr/local/bin/composer

Configuration des composants installés

Configurer MariaDB :

sudo mysql_secure_installation

Ne pas oublier de créer un utilisateur ainsi que la base de données MySQL, voici la commande de création d’un utilisateur et d’une base de données :

CREATE USER 'nom_de_l'utilisateur'@'%' IDENTIFIED BY '***';GRANT USAGE ON *.* TO 'nom_de_l'utilisateur'@'%' IDENTIFIED BY '***' WITH MAX_QUERIES_PER_HOUR 0 MAX_CONNECTIONS_PER_HOUR 0 MAX_UPDATES_PER_HOUR 0 MAX_USER_CONNECTIONS 0;CREATE DATABASE IF NOT EXISTS `nom_de_la_bdd`;GRANT ALL PRIVILEGES ON `nom_de_la_bdd`.* TO 'nom_de_l'utilisateur'@'%';

Configurer PHP :

Utiliser la commande suivante pour connaître l’emplacement du fichier de configuration :

php --ini

Ouvrir le fichier de configuration dans un éditeur :

sudo nano /etc/php/7.0/cli/php.ini

Rechercher date.timezone, supprimer le commentaire et insérer le timezone suivante Europe/Paris

Rechercher memory_limit et modifier la valeur par 2G

Rechercher max_execution_time et modifier la valeur par 1800

Rechercher zlib.output_compression et modifier la valeur par On

Rechercher opcache.save_comments et supprimer le commentaire

Relancer PHP et Nginx en utilisant la commande :

sudo service php7.0-fpm restart && sudo service nginx restart

Installation de Magento 2

Créer le vhost pour Nginx :

sudo nano /etc/nginx/sites-available/nom_du_fichier.conf

Insérer le contenu ci-dessous en remplaçant les valeurs nom_de_domaine.ext et nom_du_dossier :

upstream fastcgi_backend {
     server unix:/run/php/php7.0-fpm.sock;
 }

 server {

     listen 80;
     server_name nom_de_domaine.ext;
     set $MAGE_ROOT /var/www/html/nom_du_dossier;
     include /var/www/html/nom_du_dossier/nginx.conf.sample;
 }

Enregistrer et quittez, puis activer le vhost :

sudo ln -s /etc/nginx/sites-available/nom_du_fichier /etc/nginx/sites-enabled

Vérifier qu’il n’y a aucune erreur en éxécutant la commande :

sudo nginx -t

Puis, relancer Nginx :

sudo systemctl restart nginx

Installer Magento 2 depuis Composer :

cd /var/www/nom_du_dossier/ && composer create-project --repository=https://repo.magento.com/ magento/project-community-edition  .

Ajuster les droits via les commandes suivantes :

find var generated vendor pub/static pub/media app/etc -type f -exec chmod g+w {} \; && find var generated vendor pub/static pub/media app/etc -type d -exec chmod g+ws {} \; && chmod u+x bin/magento

Installer Magento en suivant le tutoriel : Créer une boutique Magento 2 en ligne de commande

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

Créer une boutique Magento 2 en ligne de commande

Pré-requis

  • Disposer d’un serveur sous Linux Debian 8
  • Avoir une connexion au serveur par SSH ou par un Terminal
  • Avoir créer une base de données MySQL ou autre compatible avec Magento 2
  • Avoir créer un vhost pour Apache 2 ou Ngnix
  • Avoir télécharger les fichiers Magento 2 nécessaires à l’installation

Objectifs

Créer une boutique Magento 2 en utilisant une ligne de commande

Tutoriel

Lancer la ligne de commande

La ligne de commande est très simple, elle nécessite quelques paramètres obligatoires :

  • –admin-firstname
  • –admin-lastname
  • –admin-email
  • –admin-user
  • –admin-password

Afin de faciliter l’accès à la boutique, il est recommandé d’intégrer les paramètres suivants dans la ligne de commande :

  • –base-url
  • –backend-frontname
  • –db-host
  • –db-name
  • –db-user
  • –db-password

Si vous le souhaitez, d’autres paramètres sont également disponibles, tels que :

  • –language
  • –currency
  • –timezone

La ligne de commande peut maintenant être lancée :

php bin/magento setup:install --base-url=http://url_de_la_boutique/ --backend-frontname=admin --db-host=localhost --db-name=nom_de_la_base_de_données --db-user=utilisateur_de_la_base_de_données --db-password=mot_de_passe_de_la_base_de_données --admin-firstname=prénom_de_l_administrateur --admin-lastname=nom_de_l_administrateur --admin-email=adresse_email_de_l_administrateur --admin-user=identifiant_de_l_administrateur --admin-password=mot_de_passe_de_l_administrateur --language=code_de_langue --currency=devise --timezone=fuseau_horaire

Pour connaître la liste des codes de langue disponibles, la commande est la suivante :

php bin/magento info:language:list

Pour connaître la liste des différentes devises disponibles, la commande est la suivante :

php bin/magento info:currency:list

Pour connaître la liste des fuseaux horaires disponibles, la commande est la suivante :

php bin/magento info:timezone:list

Ressources

http://devdocs.magento.com/guides/v2.1/install-gde/install/cli/install-cli-install.html

Installer le module sample data depuis Git

Pré-requis

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

Objectifs

Installer le module sample data dans Magento 2 depuis GitHub.

Tutoriel

Cloner le dépôt Git

Créer un dossier sample-data dans /var/www et y accéder :

mkdir /var/www/sample-data && cd /var/www/sample-data

Cloner le dépôt Git au sein du dossier :

git clone -b 2.1 https://github.com/magento/magento2-sample-data.git .

Installer les samples datas

Créer les liens symboliques dans le dossier d’installation de Magento 2:

php -f dev/tools/build-sample-data.php -- --ce-source="/var/www/dossier_magento_2/"

Attribuer les droits :

sudo find . -type d -exec chmod g+ws {} \;

Mettre à jour le site Magento 2

Finaliser l’installation en supprimant les dossiers suivants :

cd /var/www/dossier_magento_2/ && rm -rf var/cache/* var/page_cache/* var/generation/*

Lancer les dernières commandes pour mettre à jour votre boutique :

php bin/magento setup:upgrade && php bin/magento setup:di:compile && php bin/magento indexer:reindex

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.

Installation de Magento 2 sur une distribution Linux Debian 8

Pour le tutoriel, j’utilise une machine virtuelle composée de 4 processeurs et de 4 Go de mémoire vive sous Virtualbox.

Pré-requis

  • Disposer d’un serveur sous Linux Debian 8
  • Avoir une connexion au serveur par SSH ou par un Terminal

Objectifs

Installer Magento 2 depuis le dépôt GIT officiel.

Tutoriel

Installation des composants indispensables

Pour installer Magento 2, il est nécessaire d’avoir les composants suivants :

  • Curl
  • Apache 2
  • MariaDB
  • PHP 7
  • Git
  • Node.js
  • Grunt

Lancer un Terminal ou une connexion SSH, se connecter avec l’utilisateur « root ».

PHP 7 n’étant pas dans les dépôts officiels de Debian, il est nécessaire d’ajouter le dépôt maintenu par dotdeb.org. Pour cela, lancer les commandes suivantes :

echo "deb http://packages.dotdeb.org jessie all" > /etc/apt/sources.list.d/dotdeb.list
wget -O- https://www.dotdeb.org/dotdeb.gpg | apt-key add -
apt update

S’authentifier en tant qu’administrateur du serveur :

su nom_de_l'administrateur

Installer les composants :

sudo apt-get install -y curl git apache2 mariadb-server mariadb-client php7.0 php-curl php7.0-gd imagemagick php7.0-intl php7.0-intl php7.0-xsl php7.0-mbstring libapache2-mod-php7.0 mcrypt php7.0-mcrypt php-xml php-soap php7.0-zip php7.0-mysql

Installer Node.js :

curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
sudo apt-get install -y nodejs

Finisser par l’installation de Grunt :

sudo npm install -g grunt-cli

Installer Composer :

php -r "copy('https://getcomposer.org/installer', '/tmp/composer-setup.php');"

Visiter le site (Composer Public Keys / Signatures) suivant et copier la clé SHA-384.

Coller la clé SHA-384 à la place de sha_384_string dans la commande ci-dessous :

php -r "if (hash_file('SHA384', '/tmp/composer-setup.php') === 'sha_384_string') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('/tmp/composer-setup.php'); } echo PHP_EOL;"

Lancer la commande pour terminer l’installation :

sudo php /tmp/composer-setup.php --install-dir=/usr/local/bin --filename=composer

Configuration des composants installés

Activer le mode rewrite d’Apache et redémarrer le service :

sudo a2enmod rewrite && sudo service apache2 restart

Configurer MariaDB :

sudo mysql_secure_installation

Ne pas oublier de créer un utilisateur et une base de données dans MySQL, voici la commande de création d’un utilisateur et d’une base de données :

CREATE USER 'nom_de_l'utilisateur'@'%' IDENTIFIED BY '***';GRANT USAGE ON *.* TO 'nom_de_l'utilisateur'@'%' IDENTIFIED BY '***' WITH MAX_QUERIES_PER_HOUR 0 MAX_CONNECTIONS_PER_HOUR 0 MAX_UPDATES_PER_HOUR 0 MAX_USER_CONNECTIONS 0;CREATE DATABASE IF NOT EXISTS `nom_de_la_bdd`;GRANT ALL PRIVILEGES ON `nom_de_la_bdd`.* TO 'nom_de_l'utilisateur'@'%';

Changer le propriétaire du dossier /var/www/ et modifier les droits :

sudo chown -R www-data:www-data /var/www/
sudo chmod -R 775 /var/www/

Installation de Magento 2

Au préalable, créer un nouvel utilisateur

sudo adduser nom_de_l'utilisateur

Ajouter l’utilisateur précédemment créé dans le groupe www-data :

sudo usermod -g www-data nom_de_l'utilisateur

Changer d’utilisateur :

su nom_de_l'utilisateur

Créer un dossier boutique dans /var/www/ :

mkdir /var/www/nom_du_dossier && cd /var/www/nom_du_dossier/

Créer le vhost pour Apache :

sudo nano /etc/apache2/sites-available/nom_du_fichier.conf
sudo a2ensite nom_du_fichier.conf && sudo service apache2 restart

Installer Magento 2 depuis Git :

cd /var/www/nom_du_dossier/ && git clone -b 2.1 https://github.com/magento/magento2.git .

Modifier le fichier composer.json et remplacer la ligne :

"fabpot/php-cs-fixer": "~1.2"

par :

"friendsofphp/php-cs-fixer": "~2.0"

Lancer la commande :

composer update

Attribuer les droits aux différents dossiers :

sudo find . -type d -exec chmod 755 {} \; && sudo find . -type f -exec chmod 644 {} \; && sudo chmod u+x bin/magento; sudo chmod -R g+w ./{pub,var}; sudo chmod -R g+s ./{pub,var} && chmod -R 775 app/etc/

Ouvrir le site dans un navigateur pour finaliser l’installation.