Développer sous Sylius en 40 minutes chrono

1. Développer sous Sylius en 40 minutes chrono

2. Maxime Huran Lead Developer chez Monsieur Biz @maximehuran

3. • L'infra ! • L'installa-on " • Les ﬁxtures # • Les plugins $ • Les resources Sylius et leur ges-on en admin • Les State Machines & • Le retour des ﬁxtures '

4. L'infra

5. Le binaire Symfony

6. Coucou Jolicode ❤ : h-ps://jolicode.com/blog/mon-serveur-local-avec-le-binaire-symfony

7. Composer symfony composer create-project sylius/sylius-standard sylius

8. Docker • La base de données • Mailcatcher • Node (pour le thème) • C'est tout pour le moment !

9. L'installa)on

10. Docker

11. Serveur Symfony

12. ~/.symfony/proxy.json

13. Un peu de conﬁgura.on

14. Composer composer install Et aller se faire un ☕

15. Installer Sylius

16. • sylius:install:database • sylius:fixtures:load • sylius:theme:assets:install

17. Builder le thème • yarn install • yarn run gulp ou yarn build

18. Makeﬁles

19. Globalement au setup on u.lise • make project.infra.update • make project.install

20. Au quo&dien • make up • make down

21. En ac&on !

22. Le résultat

23. Les ﬁxtures

24. Le Fixture Bundle • Suites : collec-on de ﬁxtures • Fixtures : nos en-tés • Listeners : exécuter du code à certains moment du chargement des ﬁxtures La doc : h)ps://docs.sylius.com/en/1.4/componentsandbundles/bundles/SyliusFixturesBundle/index.html

25. Créer sa suite de ﬁxtures

26. imports: - { resource: "fixtures.yaml" } apps/sylius/src/Resources/config/app/config.yaml

27. sylius_fixtures: suites: monsieurgeek: listeners: ~ fixtures: ~ apps/sylius/src/Resources/config/app/fixtures.yaml

28. La langue et la devise sylius_fixtures: suites: monsieurgeek: [...] fixtures: locale: ~ currency: options: currencies: ['EUR']

29. Les zones sylius_fixtures: suites: monsieurgeek: [...] fixtures: geographical: options: countries: - "FR" zones: FR: name: "France" countries: - "FR"

30. Le channel sylius_fixtures: suites: monsieurgeek: [...] fixtures: channel: options: custom: monsieurgeek: name: "Monsieur Geek" code: "monsieurgeek" locales: - "%locale%" currencies: - "EUR" enabled: true hostname: "monsieurgeek.wip" default_locale: "%locale%" account_verification_required: false

31. Le mode de paiment sylius_fixtures: suites: monsieurgeek: [...] fixtures: payment_method: options: custom: bank_transfer: code: "bank_transfer" name: "Virement" description: "Paiement par virement bancaire" instructions: "Envoyez votre virement sous 6 jours : FR7630004000031234567890143" channels: - "monsieurgeek" enabled: true

32. Le groupe de client sylius_fixtures: suites: monsieurgeek: [...] fixtures: customer_group: options: custom: retail: code: "retail" name: "Retail"

33. Les clients sylius_fixtures: suites: monsieurgeek: [...] fixtures: shop_user: name: "shop_user" options: random: 20 custom: - email: "mah@mbiz.io" first_name: "John" last_name: "Doe" password: "Qwerty123"

34. Les user admin sylius_fixtures: suites: monsieurgeek: [...] fixtures: admin_user: name: "admin_user" options: custom: - email: "sylius@example.com" username: "sylius" password: "sylius" enabled: true locale_code: "%locale%" first_name: "John" last_name: "Doe" - email: "api@example.com" username: "api" password: "sylius-api" enabled: true locale_code: "%locale%" first_name: "Luke" last_name: "Brushwood" api: true

35. Les taxons sylius_fixtures: suites: monsieurgeek: [...] fixtures: taxon: options: custom: category: name: 'Monsieur Geek' code: 'category' children: nes: name: 'Jeux NES' code: 'jeux-nes' slug: 'jeux-nes' snes: name: 'Jeux Super NES' code: 'jeux-snes' slug: 'jeux-snes' nintendo_sixty_fouuuuur: name: 'Jeux Nintendo 64' code: 'jeux-n64' slug: 'jeux-n64' game_cube: name: 'Jeux Game Cube' code: 'jeux-game-cube' slug: 'jeux-game-cube' wii: name: 'Jeux Wii' code: 'jeux-wii' slug: 'jeux-wii'

36. etc...

37. Créer une ﬁxture services: sylius.fixture.nintendo_product: class: AppFixtureNintendoProductFixture arguments: - "@sylius.fixture.product" tags: ['sylius_fixtures.fixture'] apps/sylius/src/Resources/config/services.yaml

38. apps/sylius/src/Resources/config/app/fixtures.yaml

39. apps/sylius/src/Fixture/NintendoProductFixture.php

42. Lancer nos ﬁxtures

43. ou make sylius.fixtures.load

44. Des ﬁltres !

45. L'u$lité des plugins • Ne pas réinventer la roue • Réu2liser ses devs sur d'autres projets • Plugin !== Bundle

46. Mise à jour de l'infra

47. Docker compose

48. services: [...] elasticsearch: build: context: ./elasticsearch/ args: USER_UID: ${USER_UID} volumes: - esdata:/usr/share/elasticsearch/data:rw environment: - "xpack.security.enabled=false" ports: - "9200:9200" - "9300:9300" elasticsearch-hq: image: elastichq/elasticsearch-hq ports: - "5000:5000" environment: - HQ_DEFAULT_URL=http://elasticsearch:9200 links: - elasticsearch

49. Installa'on du plugin BitBag Elas'cSearch composer require bitbag/elasticsearch-plugin

50. Conﬁgura)on du plugin RTFM h"ps://github.com/BitBagCommerce/SyliusElas9csearchPlugin/blob/master/README.md

51. Mise à jour du makeﬁle

52. Des plugins intéressants

53. Fini la rigolade ! Passons aux choses sérieuses ! Et ceux qui se sont endormi, réveillez-vous !

54. Crea%on d'une en%té

55. <?php namespace AppEntityCustomer; use [...] use SyliusComponentCoreModelCustomer as BaseCustomer; /** * @Entity * @Table(name="sylius_customer") */ class Customer extends BaseCustomer { } apps/sylius/src/Entity/Customer/Customer.php

56. <?php namespace AppEntityEditor; use [...] /** * @ORMEntity * @ORMTable(name="app_editor") * @package AppBundleEntity */ class Editor implements ResourceInterface { /** * @ORMId * @ORMGeneratedValue * @ORMColumn(type="integer") */ private $id; /** * @ORMColumn(type="string", length=255) */ private $name; /** * @ORMColumn(type="string", length=255) */ private $code; /** * @ORMColumn(type="string", length=255) */ private $email; apps/sylius/src/Entity/Editor/Editor.php

57. Déclara'on d'une ressource Sylius

58. sylius_resource: resources: app.editor: driver: doctrine/orm classes: model: AppEntityEditorEditor form: AppFormTypeEditorType apps/sylius/src/Resources/config/resources.yaml

59. <?php namespace AppFormType; use [...] final class EditorType extends AbstractResourceType { public function buildForm(FormBuilderInterface $builder, array $options) { $builder ->add('name', TextType::class) ->add('email', TextType::class) ->addEventSubscriber(new AddCodeFormSubscriber()) ; } }

60. apps/sylius/src/Form/Type/EditorType.php

61. Aﬃcher les CRUD en admin ?

62. SyliusGridBundle !

63. app_admin: resource: 'routing/admin.yaml' prefix: /admin apps/sylius/src/Resources/config/routes.yaml

64. app_admin_editor: resource: 'admin/editor.yaml' apps/sylius/src/Resources/config/routing/admin.yaml

65. app_admin_editor: resource: | alias: app.editor section: admin templates: SyliusAdminBundle:Crud redirect: update grid: app_admin_editor vars: all: subheader: app.ui.editor index: icon: 'file image outline' type: sylius.resource apps/sylius/src/Resources/config/routing/admin/editor.yaml

66. [...] sylius_grid: grids: app_admin_editor: driver: name: doctrine/orm options: class: AppEntityEditorEditor fields: name: type: string label: sylius.ui.name code: type: string label: sylius.ui.code actions: main: create: type: create item: update: type: update delete: type: delete apps/sylius/config/packages/_sylius.yaml

67. URL = /admin/editors/

68. Y accéder depuis l'admin ?

69. services: [...] app.listener.admin.menu_builder: class: AppMenuAdminMenuListener tags: - { name: kernel.event_listener, event: sylius.menu.admin.main, method: addAdminMenuItems } apps/sylius/src/Resources/config/services.yaml

70. <?php namespace AppMenu; use SyliusBundleUiBundleMenuEventMenuBuilderEvent; final class AdminMenuListener { public function addAdminMenuItems(MenuBuilderEvent $event): void { $menu = $event->getMenu(); $newSubmenu = $menu ->addChild('monsieur-geek') ->setLabel('app.ui.monsieur_geek') ; $newSubmenu ->addChild('editors', ['route' => 'app_admin_editor_index']) ->setLabelAttribute('icon', 'id badge') ->setLabel('app.ui.editors') ; } } apps/sylius/src/Menu/AdminMenuListener.php

71. Les traduc+ons Mais ça vous savez sûrement faire !

72. app: ui: new_editor: 'Création d''un éditeur' edit_editor: 'Modification d''un éditeur' monsieur_geek: 'Monsieur Geek' editors: 'Éditeurs' editor: 'Éditeur' apps/sylius/translations/messages.fr.yml

73. Aller plus loin : Rendre le champ code non éditable dispo sur le repository Github

74. Rela%on avec une en%té

75. Modiﬁca(on de l'en(té Editor

76. Créa%on d'une Form Extension

77. services: [...] app.form.extension.type.product: class: AppFormExtensionProductTypeExtension arguments: - "%sylius.model.product.class%" - "%sylius.form.type.product.validation_groups%" - "@sylius.product_variant_resolver.default" - "@sylius.factory.product_attribute_value" - "@sylius.translation_locale_provider" tags: - { name: form.type_extension, extended_type: SyliusBundleProductBundleFormTypeProductType } apps/sylius/src/Resources/config/services.yaml

78. <?php namespace AppFormExtension; use [...] class ProductTypeExtension extends AbstractResourceType implements FormTypeExtensionInterface { public function buildForm(FormBuilderInterface $builder, array $options) { $builder->add('editor', EntityType::class, [ 'class' => Editor::class, 'choice_label' => 'name', 'choice_value' => 'code', 'label' => 'app.ui.editor', 'required' => false, ]); } public function getExtendedType(): string { return ProductType::class; } } apps/sylius/src/Form/Extension/ProductTypeExtension.php

79. Aﬃchage dans la page admin produit

80. Aller plus loin : Ajouter le champ sans surcharger le template avec un événement ! dispo sur le repository Github

81. State machine

82. Déclara'on de notre state machine

83. winzou_state_machine: app_editor: class: "%app.model.editor.class%" property_path: status graph: app_editor state_machine_class: "%sylius.state_machine.class%" states: new: ~ approved: ~ transitions: approve: from: ['new'] # Can be many to: 'approved' # Always one of course apps/sylius/src/Resources/config/app/config.yaml

84. Changeons notre en,té (encore)

85. Aﬃchons le dans la grid Mais pas dans le form car non éditable

86. Créa%on de la route

87. app_admin_editor_approve: path: admin/editor/{id}/approve methods: ['PUT'] defaults: _controller: app.controller.editor:applyStateMachineTransitionAction _sylius: state_machine: graph: app_editor transition: approve redirect: referer apps/sylius/src/Resources/config/routing/admin/editor.yaml

88. Appliquons ce-e transi1on !

89. Ajouter un callback dans une transi2on

90. Le code complet pour l'envoi de mail sur le dépôt Github

91. Le retour de la ﬁxture

92. Ajout de la ﬁxture sur notre en0té

93. services: [...] AppFixtureFactoryEditorExampleFactory: arguments: - '@app.factory.editor' AppFixtureEditorFixture: arguments: - '@app.manager.editor' - '@AppFixtureFactoryEditorExampleFactory' tags: - { name: sylius_fixtures.fixture } apps/sylius/src/Resources/config/services.yaml

94. <?php namespace AppFixture; use [...] final class EditorFixture extends AbstractResourceFixture { public function getName(): string { return 'editor'; } protected function configureResourceNode(ArrayNodeDefinition $resourceNode): void { $resourceNode ->children() ->scalarNode('name')->cannotBeEmpty()->end() ->scalarNode('email')->cannotBeEmpty()->end() ->scalarNode('code')->cannotBeEmpty()->end() ; } } apps/sylius/src/Fixture/EditorFixture.php

95. final class EditorExampleFactory extends AbstractExampleFactory { protected function configureOptions(OptionsResolver $resolver): void { $resolver ->setDefault('name', function(Options $options): string { return $this->faker->company; }) ->setDefault('code', function(Options $options): string { return $this->faker->uuid; }) ->setDefault('email', function(Options $options): string { return $this->faker->email; }) ; } [...] }

96. public function create(array $options = []) { $options = $this->optionResolver->resolve($options); /** @var EditorInterface $editor */ $editor = $this->factory->createNew(); $editor->setCode($options['code']); $editor->setName($options['name']); $editor->setEmail($options['email']); return $editor; }

97. Ges$on des State Machine dans une ﬁxture

98. Ce que l'on a appris ! • L'infra et l'installa.on • SyliusFixtureBundle • Créer un en.té et u.liser le SyliusGridBundle • Personnalisa.on de l'admin (Menu et formulaire) • State Machine • Créer une ﬁxture pour son en.té h"ps://github.com/monsieurbiz/sylius- Les slides seront également mis à votre disposi3on !

99. Ce n'est qu'une mise en bouche !

100. Merci ! Vos ques(ons Sylius 1.5 est sor/ ce midi !

Développer sous Sylius en 40 minutes chrono

Maxime Huran 🌈

Développer sous Sylius en 40 minutes chrono