Développer sous Sylius en 40 minutes chrono

Développer sous Sylius en 40
minutes chrono

Maxime Huran
Lead Developer chez Monsieur Biz
@maximehuran

• 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
'

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

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

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

Composer
composer install
Et aller se faire un
☕

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

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

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

Au quo&dien
• make up
• make down

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

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

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

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

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

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

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

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

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"

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

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'

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

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

apps/sylius/src/Fixture/NintendoProductFixture.php

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

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

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

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

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

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

<?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;
/**
*/
private $code;
/**
*/
private $email;
apps/sylius/src/Entity/Editor/Editor.php

Déclara'on d'une ressource Sylius

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

<?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())
;
}
}

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

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

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

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

[...]
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

services:
[...]
app.listener.admin.menu_builder:
class: AppMenuAdminMenuListener
tags:
- { name: kernel.event_listener, event: sylius.menu.admin.main, method: addAdminMenuItems }

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

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

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

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

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

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 }

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

Aﬃchage dans la page admin produit

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

Déclara'on de notre state machine

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

Changeons notre en,té (encore)

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

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

Ajouter un callback dans une transi2on

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

Ajout de la ﬁxture sur notre en0té

services:
[...]
AppFixtureFactoryEditorExampleFactory:
arguments:
- '@app.factory.editor'
AppFixtureEditorFixture:
arguments:
- '@app.manager.editor'
- '@AppFixtureFactoryEditorExampleFactory'
tags:
- { name: sylius_fixtures.fixture }

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

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;
})
;
}
[...]
}

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;
}

Ges$on des State Machine dans une ﬁxture

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
!

Ce n'est qu'une mise en bouche !

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

Développer sous Sylius en 40 minutes chrono

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Développer sous Sylius en 40 minutes chrono

Similar a Développer sous Sylius en 40 minutes chrono (20)

Último

Último (20)

Développer sous Sylius en 40 minutes chrono