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.

Magento 2 : Les extensions utiles

Tutoriel publié le 02/06/2019.

 

MagePal Reindex

Très utile pour ré-indexer depuis l’interface d’administration.

Pour terminer, lancer la commande :

MagePal Gmail SMTP

Pour mieux paramétrer l’envoi des emails.

Pour terminer, lancer la commande :

Experius Email Catcher

Permet d’avoir un suivi des emails envoyés. Attention, le module n’est pas compatible avec Magento 2.1.x

Pour terminer, lancer la commande :

MagePlaza : French Language Pack

Permet d’obtenir une version française de l’interface consommateur et de l’administration.

Pour terminer, lancer la commande :

Magehost : Performance Dashboard

Vous indique quelles sont les paramètres de performances à ajuster.

Pour terminer, lancer la commande :

Pour installer en 1 seule fois les modules ci-dessus, lancer la commande :