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 fixtures
#
• Les plugins
$
• Les resources Sylius et leur ges-on en admin
• Les State Machines
&
• Le retour des fixtures
'

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 configura.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.
Makefiles

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 fixtures

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

25.
Créer sa suite de fixtures

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 fixture
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

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

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

42.
Lancer nos fixtures

43.
ou make sylius.fixtures.load

44.
Des filtres !

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.
Configura)on du plugin
RTFM
h"ps://github.com/BitBagCommerce/SyliusElas9csearchPlugin/blob/master/README.md

51.
Mise à jour du makefile

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.
Afficher 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.
Modifica(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.
Affichage 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.
Affichons 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 fixture

92.
Ajout de la fixture 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 fixture

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 fixture 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
!