Configurez les canaux de la boutique
Apprenez à configurer une boutique Sylius en vous appuyant sur les fixtures existantes pour personnaliser les canaux, pays, devises et d'autres réglages clés, tout en faisant le lien avec les écrans importants de l'administration.
< Code de départ >
Salut, maintenant que Sylius est installé sur ta machine, tu vas pouvoir configurer la boutique 🔧
Tu as raison ! Mais rien ne correspond réellement à notre client, "NewFashion", mis à part que la boutique par défaut est déjà dans le thème de la mode.
Commençons par les canaux... Si tu n'es pas encore familier avec ce terme, je t'invite à consulter la documentation sur les canaux et à en retenir l'information suivante :
Actuellement, ta boutique Sylius expose 2 canaux :
- Fashion Web Store : localhost
- Euro Web Store : WEB_EUR.localhost
Même si l'on est en environnement de développement, il faut être au plus proche du besoin du client.
En voici un extrait qui devrait te mettre sur la voie :
- Nous souhaitons une présence en ligne en France, Belgique et Suisse
- Un domaine web pour chaque pays
Je te propose donc de partir sur 3 canaux : fr.localhost, be.localhost et ch.localhost.
Pas si vite ! Si tu fais ça, ta configuration sera écrasée au prochain chargement de fixtures.
Je vois que tu as de bons réflexes Symfony, mais j'ai mieux à te proposer.
Tout à fait !
Nous allons nous inspirer des fixtures Sylius existantes, dont voici le fichier de configuration
Tu vas créer un jeu de fixtures app (vide pour le moment), je te propose d'ajouter les fichiers fixtures.yaml et shop_configuration.yaml selon l'architecture suivante :
-
config
-
packages
-
fixtures
-
shop_configuration.yaml
-
-
fixtures.yaml
-
-
# config/packages/fixtures/shop_configuration.yaml sylius_fixtures: suites: app: ~# config/packages/fixtures.yaml imports: - { resource: 'fixtures/shop_configuration.yaml' }Vérifions si ton jeu de fixtures app est bien reconnu.
Commence par mettre à jour le cache Symfony :
Puis vérifie les fixtures disponibles avec
Si tout va bien, tu dois trouver la suite app dans la liste.
Ok, alors c'est parti
Commence par ajouter les "listeners" prévus par les fixtures Sylius :
# config/packages/fixtures/shop_configuration.yaml sylius_fixtures: suites: app: listeners: orm_purger: ~ images_purger: ~ logger: ~Ces listeners se déclenchent au lancement de la suite de fixtures, et chacun a un rôle précis
- orm_purger : Vide les tables de la base de données concernées par les fixtures
- images_purger : Supprime les images créées par les fixtures précédentes
- logger : Uniquement chargé de l'affichage dans le terminal
Bien, plusieurs choses doivent être configurées avant de pouvoir ajouter un canal.
On va y aller par étapes...
Pour commencer, notre suite est vide, nous n'avons donc même plus de compte admin 😅
Autant commencer par l'ajouter, tout en le personnalisant à notre convenance.
# config/packages/fixtures/shop_configuration.yaml sylius_fixtures: suites: app: # ... fixtures: admin_user: name: 'admin_user' options: custom: - email: 'sylius@example.com' username: 'sylius' password: 'sylius' enabled: true locale_code: 'fr_FR' first_name: 'John' last_name: 'Doe' avatar: '@SyliusCoreBundle/Resources/fixtures/adminAvatars/john.webp'Je pourrais te lister tout ce qu'il faut configurer, mais ce serait rater une opportunité pour toi de comprendre le lien entre une fixture et son équivalence dans l'administration.
Alors c'est le moment de te lancer ! Lance ta suite de fixtures avec
Puis rends-toi sur la
page de création de canal
(identifiant sylius et mot de passe sylius)
Parfait, commence par le plus simple, et ajoute la configuration des langues dont nous aurons besoin, toujours dans le même fichier :
# config/packages/fixtures/shop_configuration.yaml sylius_fixtures: suites: app: # ... fixtures: # ... locale: options: locales: - 'fr_FR' - 'fr_BE' - 'fr_CH'Change également la locale par défaut du projet (en_US), dans le fichier config/parameters.yaml :
# config/parameters.yaml parameters: locale: 'fr_FR'Désormais, chaque fois que tu voudras vérifier les changements dans ta suite de fixtures, lance la commande
Ok, vérifie bien que les langues (appelées locales) sont apparues dans l'admin : Paramètres régionaux
Bien, passons aux devises possibles, ajoute l'euro (EUR) et le franc Suisse (CHF) :
# config/packages/fixtures/shop_configuration.yaml sylius_fixtures: suites: app: # ... fixtures: # ... currency: options: currencies: - 'EUR' - 'CHF'Relance la suite de fixtures, et vérifie les devises disponibles
Au tour des pays, ajoute la France, la Belgique et la Suisse :
# config/packages/fixtures/shop_configuration.yaml sylius_fixtures: suites: app: # ... fixtures: # ... geographical: options: countries: - 'FR' - 'BE' - 'CH'Relance la suite de fixtures, et vérifie la liste des pays
Maintenant, définissons des zones. Tout comme les canaux, ce concept est à bien comprendre. Je t'invite donc à consulter la documentation sur les zones et à en retenir l'information suivante :
Définissons pour le moment une zone pour chaque pays, puisque chacun aura sa propre TVA :
# config/packages/fixtures/shop_configuration.yaml sylius_fixtures: suites: app: # ... fixtures: # ... geographical: options: # ... zones: FR: name: 'France' countries: - 'FR' BE: name: 'Belgique' countries: - 'BE' CH: name: 'Suisse' countries: - 'CH'Relance la suite de fixtures, et vérifie la liste des zones
Dernier prérequis pour pouvoir configurer nos canaux, une "catégorie mère" afin de servir de base au menu principal.
Dans le contexte de Sylius, on parle de Taxon pour désigner une catégorie. Si tu veux en savoir plus, voici le lien vers la documentation
Le nom du taxon principal n'a pas d'importance capitale, car seuls ses sous-taxons seront affichés. Partons donc sur un nom assez générique :
# config/packages/fixtures/shop_configuration.yaml sylius_fixtures: suites: app: # ... fixtures: # ... menu_taxon: name: taxon options: custom: category: code: 'ROOT' name: 'Menu principal' slug: 'category' description: 'Racine du menu principal'Relance la suite de fixtures, et vérifie la catégorie mère sur la page des taxons
Parfait ! Tout est prêt pour configurer les canaux 🎉
Voici une configuration complète pour le canal français :
# config/packages/fixtures/shop_configuration.yaml sylius_fixtures: suites: app: # ... fixtures: # ... channel: options: custom: new_fashion_fr: name: 'NewFashion France' code: 'FR_SHOP' color: '#318ce7' default_locale: 'fr_FR' base_currency: 'EUR' default_tax_zone: 'FR' tax_calculation_strategy: 'order_items_based' locales: - 'fr_FR' currencies: - 'EUR' enabled: true hostname: 'fr.%env(resolve:SYLIUS_FIXTURES_HOSTNAME)%' theme_name: '%env(resolve:SYLIUS_FIXTURES_THEME_NAME)%' shop_billing_data: company: 'NewFashion' tax_id: '0001112222' country_code: 'FR' street: '123 rue du commerce' city: 'Paris' postcode: '75000' menu_taxon: 'ROOT' contact_phone_number: '+33 1 23 45 67 89' contact_email: 'contact@new-fashion.fr'Bien ! J'attire ton attention sur une subtilité : j'ai préfixé la valeur hostname avec fr.
De cette façon, le canal FR a sa propre URL : fr.localhost
Je te laisse t'occuper des canaux belge et suisse. Bien entendu, les informations de facturation et de contact sont arbitraires, je te fais confiance.
À quelques écarts près, tu devrais avoir ces configurations :
# config/packages/fixtures/shop_configuration.yaml sylius_fixtures: suites: app: # ... fixtures: # ... channel: options: custom: new_fashion_be: name: 'NewFashion Belgique' code: 'BE_SHOP' color: '#fcd465' default_locale: 'fr_BE' base_currency: 'EUR' default_tax_zone: 'BE' tax_calculation_strategy: 'order_items_based' locales: - 'fr_BE' currencies: - 'EUR' enabled: true hostname: 'be.%env(resolve:SYLIUS_FIXTURES_HOSTNAME)%' theme_name: '%env(resolve:SYLIUS_FIXTURES_THEME_NAME)%' shop_billing_data: company: 'NewFashion' tax_id: '3334445555' country_code: 'BE' street: '123 rue du commerce' city: 'Bruxelles' postcode: '1000' menu_taxon: 'ROOT' contact_phone_number: '+32 1 23 45 67 89' contact_email: 'contact@new-fashion.be' new_fashion_ch: name: 'NewFashion Suisse' code: 'CH_SHOP' color: '#da291c' default_locale: 'fr_CH' base_currency: 'CHF' default_tax_zone: 'CH' tax_calculation_strategy: 'order_items_based' locales: - 'fr_CH' currencies: - 'CHF' enabled: true hostname: 'ch.%env(resolve:SYLIUS_FIXTURES_HOSTNAME)%' theme_name: '%env(resolve:SYLIUS_FIXTURES_THEME_NAME)%' shop_billing_data: company: 'NewFashion' tax_id: '6667778888' country_code: 'CH' street: '123 rue du commerce' city: 'Berne' postcode: '3000' menu_taxon: 'ROOT' contact_phone_number: '+41 1 23 45 67 89' contact_email: 'contact@new-fashion.ch'Dans ce cas, tu devrais pouvoir accéder à chaque canal par son URL dédiée :
- 🇫🇷 France : fr.localhost
- 🇧🇪 Belgique : be.localhost
- 🇨🇭 Suisse : ch.localhost
C'est une très bonne chose de faite !
Je te propose que nous en restions là pour aujourd'hui, le temps que tu assimiles bien tout ce que nous avons vu 😉
Lors de notre prochain échange, nous pourrons terminer la configuration des taxes, livraisons, et moyens de paiement.
En tout cas, je te remercie pour ton attention et je te souhaite une bonne journée 👋