Début d'un projet de hack de Sylius

Le projet

Après avoir lu un article sur la bonne utilisation des thèmes dans Sylius d'Alexandre Balmes sur la gestion des thèmes dans Sylius, je me suis lancé un petit défi : détourner certains Bundles de Sylius pour en faire un site. Cela changera des tests logiciels et des conseils sur la sécurité.

La première étape du défi a pris la forme d'un live coding sur Twitter.

Sylius

Sylius est un framework basé sur le framework Symfony pour réaliser un site de e-commerce. L'un des principaux intérêts que je lui trouve c'est la rapidité de mise à jour. Contrairement à beaucoup d'autres outils se basant sur Symfony, Sylius reste toujours sur la dernière version de Symfony. Il y a toujours un peu plus de temps de développement lors du passage à une version majeure de Symfony.

Dans le cadre du projet de hack, je veux utiliser que certaines parties de Sylius. Voici les premiers éléments utilisés:

• Le SyliusThemeBundle: pour gérer plusieurs apparences sur le site. Potentiellement, plusieurs sites avec la même base de code.
• Le SyliusUiBundle : pour avoir l'apparence de l'admin Sylius.

D'autres éléments utiles sont dans le SyliusAdminBundle, mais comme il contient les éléments liés à l'e-commerce, je ne veux pas l'ajouter dans le projet.

Environnement de développement du projet

Pour la réalisation de ce projet, j'ai besoin d'un projet Symfony fraichement installé et d'une installation fraiche de la dernière version de Sylius.

Les deux projets seront donc utilisés : l'un pour coder ; l'autre pour décortiquer le fonctionnement de ce que je souhaite reproduire.

Avertissement

Ce projet est une preuve de concept sans aucun but d'en faire un projet à distribuer. Vous pouvez en faire ce que vous souhaitez, car il reste libre sous licence MIT.
Il existe sûrement d'autre façon de faire pour obtenir une application ressemblant à Sylius. Le but ici est démonstratif et éducatif.

Lors des Lives Twitter, dans les vidéos et dans les articles, je vous montre que les succès pour vous éviter les fausses pistes.

Outils utilisés

• Symfony Cli (Linux, Windows, Mac) https://symfony.com/download
• PHP 7.4
• PHP SQLite (base de données pour le projet Symfony)
• Composer https://getcomposer.org/download/
• Symfony 5 https://symfony.com
• Sylius 1.10 https://sylius.com/fr

Le déroulé de la première étape pas à pas.

Installation des deux projets

Je commence par initialiser un projet Sylius 1.10 avec la commande suivante :

composer create-project sylius/sylius-standard test_sylius_110

Et le nouveau projet avec le client Symfony :

symfony new --full test_bundle_sylius

Les commandes initialisent un nouveau projet et téléchargent les dépendances PHP avec Composer.

Pour le projet Sylius, je n'ai pas besoin d'installer les dépendances JS pour l'instant.

Ajout d'une page dans le projet Symfony

Pour ajouter une page rapidement dans le projet, rien de tel que le MakerBundle (je l'utilise que pendant les formations Symfony en temps normal).

En exécutant la commande bin/console make:controller HomeController, j'ai une page par défaut qui est généré (contrôleur PHP et template Twig).

Par défaut l'URL de la page est donc /home. Pour pouvoir y accéder, j'ai besoin d'un serveur Web sur ma machine.

J'utilise pour cela le client Symfony en exécutant cette commande symfony serve -d dans le terminal après m'être placé dans le dossier du projet Symfony.

La commande donne l'URL de la page d'accueil. En cliquant dessus vous obtenez la page d'accueil.

Pour ma part, j'ai eu une erreur de driver SQL introuvable.

Cette erreur est liée à la configuration par défaut de Symfony pour la base de données. Symfony est configuré pour utiliser une base de données Postgres. Ne l'ayant pas utilisé sur cet ordinateur, PHP n'a pas le pilote.

Pour corriger l'erreur, je modifie la configuration par défaut de la base de données en activant SQLite et en désactivant Postgres.

Maintenant, j'ai bien les pages par défaut de Symfony et ma page /home.

Ajout du thème bundle

Comme indiqué plus haut ce bundle permet d'avoir pour une même application plusieurs thèmes. Ces thèmes surchargent les fichiers présents dans le dossier templates présent à la racine du projet, mais également ce qui est présent dans les bundles tiers.

Pour l'ajouter au projet, j'utilise Composer en exécutant la commande suivante : composer require sylius/theme-bundle.

J'ajoute en suite la configuration pour le Bundle (il ne dispose pas de recette Flex) dans le fichier config/packages/sylius_theme.yaml avec le contenu suivant:

sylius_theme:
  sources:
    filesystem: ~
  context: App\Context\ThemeContext

Dans la dernière ligne, je définis un service qui permet d'indiquer au ThemeBundle quel thème utiliser pour la requête en cours.

Ce service n'existe pas, il faut donc ajouter le fichier src/Context/ThemeContext.php avec le contenu suivant :

<?php
declare(strict_types=1);

namespace App\Context;

use Sylius\Bundle\ThemeBundle\Context\ThemeContextInterface;
use Sylius\Bundle\ThemeBundle\Model\ThemeInterface;
use Sylius\Bundle\ThemeBundle\Repository\ThemeRepositoryInterface;

final class ThemeContext implements ThemeContextInterface
{

    /**
     * @var ThemeRepositoryInterface
     */
    private $themeRepository;

    public function __construct(ThemeRepositoryInterface $themeRepository)
    {
        $this->themeRepository = $themeRepository;
    }

    /**
     * @inheritDoc
     */
    public function getTheme(): ?ThemeInterface
    {
        return $this->themeRepository->findOneByName('my/theme');
    }
}

C'est dans ce fichier qu'est déterminé le thème à utiliser. C'est très pratique pour les migrations de thèmes ou les A/B testing.

J'ajoute maintenant le thème dans le dossier themes que j'ai ajouté à la racine du projet. Pour cela je copie le contenu du dossier templates dans le dossier themes/MyTheme/templates.

J'ajoute le fichier themes/MyTheme/composer.json (qui permet de configurer le thème en définissant son nom) avec le contenu suivant:

{
  "name": "my/theme"
}

Je modifie quelques petites choses pour m'assurer que ce qui est affiché provient bien du thème.

Conclusion

L'ajout de plusieurs thèmes est vraiment très facile dans une application Symfony avec le SyliusThemeBundle.

La documentation du bundle est suffisante pour pouvoir l'utiliser sans trop de problèmes et pouvoir entrevoir le potentiel qu'il offre.

Pour ceux qui ont suivi le live sur Twitter, vous savez qu'il contenait plus de choses. La suite fera l'objet d'un autre article sur l'utilisation de l'UIBundle avec les assets.

Le projet de Hack de Sylius sur GitHub

Jean-Baptiste Nahan

Consultant Expert Web, j'aide les entreprises ayant des difficultés avec leur projet Web (PHP, Symfony, Sylius).

@jbnahan69 | Macintoshplus | Linkedin | JB Dev Labs