1. Installation¶

1.1. Adding required bundles to the kernel¶

First, you need to enable the bundle inside the kernel. If you’re not using any other Sylius bundles, you will also need to add SyliusResourceBundle and its dependencies to the kernel. Don’t worry, everything was automatically installed via Composer.

<?php

// app/AppKernel.php

public function registerBundles()
{
    $bundles = array(
        new Sylius\Bundle\FlowBundle\SyliusFlowBundle(),

        // Other bundles...
    );
}

1.2. Creating your steps¶

We will create a very simple wizard now, without forms, storage, to keep things simple and get started fast.

Lets create a few simple steps:

<?php

namespace Acme\DemoBundle\Process\Step;

use Sylius\Bundle\FlowBundle\Process\Context\ProcessContextInterface;
use Sylius\Bundle\FlowBundle\Process\Step\ControllerStep;

class FirstStep extends ControllerStep
{
    public function displayAction(ProcessContextInterface $context)
    {
        return $this->render('AcmeDemoBundle:Process/Step:first.html.twig');
    }

    public function forwardAction(ProcessContextInterface $context)
    {
        return $this->complete();
    }
}

<?php

namespace Acme\DemoBundle\Process\Step;

use Sylius\Bundle\FlowBundle\Process\Context\ProcessContextInterface;
use Sylius\Bundle\FlowBundle\Process\Step\ControllerStep;

class SecondStep extends ControllerStep
{
    public function displayAction(ProcessContextInterface $context)
    {
        return $this->render('AcmeDemoBundle:Process/Step:second.html.twig');
    }

    public function forwardAction(ProcessContextInterface $context)
    {
        return $this->complete();
    }
}

And so on, one class for each step in the wizard.

As you can see, there are two actions in each step, display and forward. Usually, there is a form in a forward action where you can pick some data. When you do return $this->complete() the wizard will take you to the next step.

1.3. Creating scenario¶

To group steps into the wizard, we will implement ProcessScenarioInterface:

<?php

namespace Acme\DemoBundle\Process;

use Sylius\Bundle\FlowBundle\Process\Builder\ProcessBuilderInterface;
use Sylius\Bundle\FlowBundle\Process\Scenario\ProcessScenarioInterface;
use Symfony\Component\DependencyInjection\ContainerAware;
use Acme\DemoBundle\Process\Step;

class SyliusScenario extends ContainerAware implements ProcessScenarioInterface
{
    public function build(ProcessBuilderInterface $builder)
    {
        $builder
            ->add('first', new Step\FirstStep())
            ->add('second', new Step\SecondStep())
            // ...
        ;
    }
}

As you can see, we just add each step to process builder with a desired name. The name will be used in the routes to navigate to particular step.

1.4. Registering scenario¶

In order for this to work, we need to register SyliusScenario and tag it as sylius.process.scenario:

<service id="sylius.scenario.flow" class="Acme\DemoBundle\Process\SyliusScenario">
    <call method="setContainer">
        <argument type="service" id="service_container" />
    </call>
    <tag name="sylius.process.scenario" alias="sylius_flow" />
</service>

The configured alias will be used later in the route parameters to identify the scenario as you can have more then one.

1.5. Routing configuration¶

Import routing configuration:

sylius_flow:
    resource: @SyliusFlowBundle/Resources/config/routing.yml
    prefix: /flow

If you take a look into imported routing configuration, you will see that sylius_flow_start is a wizard entry point. sylius_flow_display displays the step with the given name, sylius_flow_forward forwards to the next step from the step with the given name. All routes have an scenarioAlias as a required parameter to identify the scenario.

1.6. Templates¶

Step templates are like any other action template, usually due to the nature of multi-step wizards, they have back and forward buttons:

<h1>Welcome to second step</h1>
<a href="{{ path('sylius_flow_display', {'scenarioAlias': 'sylius_flow', 'stepName': 'first'}) }}" class="btn btn-success"><i class="icon-backward icon-white"></i> back</a>
<a href="{{ path('sylius_flow_forward', {'scenarioAlias': 'sylius_flow', 'stepName': 'second'}) }}" class="btn btn-success">forward <i class="icon-forward icon-white"></i></a>