Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Seydina's avatar

How can we use session to keep step wizard persistent even after reloading (refreshing) the user browser?

Hello instead of asking another similar question I want to add mine. I use Livewire to build step form to create a resource but when I am in step 1 if I reload the browser it returns to step 0 (Step 0 show a Create Button that invite users to begin the process . The code is listed below :

  • Data binding in Livewire Controller
class Products extends Component
{
    public $currentStep = 0;
    public $total_steps = 3;
    // others attributes

    public function render()
    {
        return view('livewire.products.index');
    }
    
    public function incrementSteps()
    {
        if ($this->currentStep < $this->total_steps) {
            $this->currentStep++;
        }
    }

    public function decrementSteps()
    {
        if ($this->currentStep > 0) {
            $this->currentStep--;
        }
    }
}

  • Multiple steps in my blade files
<x-slot name="header">
  <h2 class="font-semibold text-center text-xl text-gray-800 leading-tight">
    {{ __('Products creation') }}
  </h2>
</x-slot>
<div class="products-container">

  @if($currentStep===0)
  <div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
      <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
        <div class="p-6 text-gray-900">
          <div
            class="flex flex-col items-center justify-center w-full border-2 border-dotted border-gray-300 rounded-md bg-gray-50 p-10">
            <span class="material-icons-outlined text-amber-500 text-5xl mr-2 mb-2">campaign</span>
            <p class="text-gray-500 text-sm mb-10">Create a product, begin here...</p>
            <x-products-button wire:click="incrementSteps">
              Créer
            </x-products-button>
          </div>

        </div>
      </div>
    </div>
  </div>
  @endif

  @if ($currentStep===1)
  @include('livewire.products.partials.import')
  @endif
</div>

I only included steps 0 and step 1 because I told myself before dealing with the other steps it would be better to deal with the loss of step 1 which returns to step 0 after reloading the browser. I think in that case we could use session but how can I integrate it in this situation?

0 likes
3 replies
aisuvro's avatar

First of all, you need to use livewire syntax.

	<livewire.products.partials.import />

instead of

	@include('livewire.products.partials.import')

in the class.

class Products extends Component { public $currentStep = 0; public $total_steps = 3; // others attributes

public function mount(){
	if(isset(session('currentStep')){
			$this->currentStep = session('currentStep')
	}
}	

public function incrementSteps()
{
    if ($this->currentStep < $this->total_steps) {
        $this->currentStep++;
		session('currentStep', $this->currentStep);
    }
}

I believe you get the idea.

Seydina's avatar

@aisuvro Hi excuse for this late feedback. I do not understand the logic. Because when I make

if(isset(session('currentStep'))) { $this->currentStep = session('currentStep');} 

it show this error message Cannot use isset() on the result of an expression (you can use "null !== expression" instead)

aisuvro's avatar

@Seydina Hi, It is okay. Use this syntax instead of your.

		$this->currentStep = session('currentStep') ? session('currentStep') : 1;

Please or to participate in this conversation.