Creating your first wizard | laravel-livewire-wizard | Spatie

 SPATIE

  Laravel Livewire Wizard
==========================

spatie.be/open-source

  [Docs](https://spatie.be/docs)  [Laravel-livewire-wizard](https://spatie.be/docs/laravel-livewire-wizard/v2)  Usage  Creating your first wizard

 Version   v2   v1

 Other versions for crawler [v2](https://spatie.be/docs/laravel-livewire-wizard/v2) [v1](https://spatie.be/docs/laravel-livewire-wizard/v1)

- [ Introduction ](https://spatie.be/docs/laravel-livewire-wizard/v2/introduction)
- [ Support us ](https://spatie.be/docs/laravel-livewire-wizard/v2/support-us)
- [ Requirements ](https://spatie.be/docs/laravel-livewire-wizard/v2/requirements)
- [ Installation & setup ](https://spatie.be/docs/laravel-livewire-wizard/v2/installation-setup)
- [ Questions and issues ](https://spatie.be/docs/laravel-livewire-wizard/v2/questions-issues)
- [ Changelog ](https://spatie.be/docs/laravel-livewire-wizard/v2/changelog)
- [ About us ](https://spatie.be/docs/laravel-livewire-wizard/v2/about-us)

Usage
-----

- [ Creating your first wizard ](https://spatie.be/docs/laravel-livewire-wizard/v2/usage/creating-your-first-wizard)
- [ Navigating steps ](https://spatie.be/docs/laravel-livewire-wizard/v2/usage/navigating-steps)
- [ Rendering navigation ](https://spatie.be/docs/laravel-livewire-wizard/v2/usage/rendering-navigation)
- [ Accessing state ](https://spatie.be/docs/laravel-livewire-wizard/v2/usage/accessing-state)
- [ Setting initial state ](https://spatie.be/docs/laravel-livewire-wizard/v2/usage/setting-initial-state)
- [ Testing wizards ](https://spatie.be/docs/laravel-livewire-wizard/v2/usage/testing-wizards)

 Creating your first wizard
==========================

###  On this page

1. [ Creating the wizard component ](#content-creating-the-wizard-component)
2. [ Creating steps ](#content-creating-steps)
3. [ Adding steps to the wizard ](#content-adding-steps-to-the-wizard)
4. [ Rendering the wizard component ](#content-rendering-the-wizard-component)
5. [ Going to the next step in the wizard ](#content-going-to-the-next-step-in-the-wizard)
6. [ Take a look at the example app ](#content-take-a-look-at-the-example-app)

A "wizard" is a multi-step process in which each step has its own screen. In our implementation, each step will be its own Livewire `StepComponent`. These step components will be tied together using a `WizardComponent`.

Creating the wizard component
-----------------------------------------------------------------------------------------------------------------------------------------------

To get started you need to create a class that extends `WizardComponent`.

```
namespace App\Components;

use Spatie\LivewireWizard\Components\WizardComponent;

class CheckoutWizardComponent extends WizardComponent
{

}
```

The `WizardComponent` class extends Livewire's component class, so you need to register the `CheckoutWizardComponent` with Livewire.

```
// typically, in a service provider

use Livewire\Livewire;
use App\Components\CheckoutWizardComponent;

Livewire::component('checkout-wizard', CheckoutWizardComponent::class);
```

Creating steps
--------------------------------------------------------------------------------------------------

Next, let's add steps to the wizard. In our example, let's assume the checkout process has three steps:

1. A step to specify display the contents of a cart
2. A step to specify delivery address details
3. A step that show all order details and the ability to confirm the order

For each step, you need to create a class that extends `StepComponent`. Here's how it may look like for the first step of our example.

```
namespace App\Components;

use Spatie\LivewireWizard\Components\StepComponent;

class CartStepComponent extends StepComponent
{
    public function render()
    {
        return view('checkout-wizard.steps.cart');
    }
}
```

This `CartComponent` is a regular Livewire component, so you can add any Livewire functionality you want. You could display some info, add actions, handle a form, anything goes!

Since steps are Livewire components, don't forget to register all steps to Livewire.

```
// typically, in a service provider

use Livewire\Livewire;
use App\Components\CartStepComponent;
use App\Components\DeliveryAddressStepComponent;
use App\Components\ConfirmOrderStepComponent;

// ... other registrations

Livewire::component('cart-step', CartStepComponent::class);
Livewire::component('delivery-address-step', DeliveryAddressStepComponent::class);
Livewire::component('confirm-order-step', ConfirmOrderStepComponent::class);
```

Adding steps to the wizard
--------------------------------------------------------------------------------------------------------------------------------------

Now that you've created the step classes, let's add them to the wizard.

In `CheckoutWizardComponent` add a function named `steps` that returns an array with all your steps.

```
namespace App\Components;

use App\Components\CartStepComponent;
use App\Components\DeliveryAddressStepComponent;
use App\Components\ConfirmOrderStepComponent;
use Spatie\LivewireWizard\Components\WizardComponent;

class CheckoutWizardComponent extends WizardComponent
{
    public function steps() : array
    {
        return [
            CartStepComponent::class,
            DeliveryAddressStepComponent::class,
            ConfirmOrderStepComponent::class,
        ];
    }
}
```

Rendering the wizard component
--------------------------------------------------------------------------------------------------------------------------------------------------

Now that everything is set up, you can render the wizard component in any view you desire.

```

```

Going to the next step in the wizard
--------------------------------------------------------------------------------------------------------------------------------------------------------------------

When navigating to the view, you should now see the first step of the wizard being rendered. If you want to next step to be displayed, you can call `nextStep()` somewhere in your livewire component.

```
// somewhere in your step component

$this->nextStep();
```

When that code is executed you should see the next step being rendered in the browser.

Alternatively, you could also directly use `nextStep` in a `wire:click` somewhere in your view.

```

    Go to the previous step

    Go to the next step

```

With the basics of the wizard now working, explore the other sections in these docs to explore what's possible.

Take a look at the example app
--------------------------------------------------------------------------------------------------------------------------------------------------

In [this repo on GitHub](https://github.com/spatie/laravel-livewire-wizard-demo-app), you'll find a demo Laravel application that contains the checkout flow as described above.