Summer Sale! All accounts are 50% off this week.

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.