Laravel 8 E-Commerce - Add SaveForLater Option on Cart Page

In this video, we are going to learn about adding a SaveForLater option on the Cart Page.

So, let's see how we can add a SaveForLater option on the Cart Page.

Switch to the project and let's open the CartComponent.php class file.

Inside this file, let's create a function for switching a product to SaveForLater:

public function switchToSaveForLater($rowId)
{
	$item = Cart::instance('cart')->get($rowId);
	Cart::instance('cart')->remove($rowId);
	Cart::instance('saveForLater')->add($item->id,$item->name,1,$item->price)->associate('App\Models\Product');
	$this->emitTo('cart-count-component','refreshComponent');  
	session()->flash('success_message','Item has been saved for later');
}

Now, let's open the cart-component.blade.php view file and add a link for SaveForLater as follows:

<div class="quantity">
	<div class="quantity-input">
		<input type="text" name="product-quatity" value="{{$item->qty}}" data-max="120" pattern="[0-9]*" >									
		<a class="btn btn-increase" href="#" wire:click.prevent="increaseQuantity('{{$item->rowId}}')"></a>
		<a class="btn btn-reduce" href="#" wire:click.prevent="decreaseQuantity('{{$item->rowId}}')"></a>                                
	</div>  
	<p class="text-center"><a href="#" wire:click.prevent="switchToSaveForLater('{{$item->rowId}}')">Save For Later</a></p>

Now, let's display all items that are saved for later. So, for that, let's copy this cart wrap div.

And just copy and paste it after this summary div and make changes as follows:

<div class="wrap-iten-in-cart">
	<h3 class="title-box" style="border-bottom: 1px solid; padding-bottom:15px;">{{Cart::instance('saveForLater')->count()}} item(s) Saved For Later</h3>
	@if(Session::has('s_success_message'))
		<div class="alert alert-success">
			<strong>Success</strong> {{Session::get('s_success_message')}}
		</div>
	@endif
	@if(Cart::instance('saveForLater')->count() > 0)
	<h3 class="box-title">Products Name</h3>
	<ul class="products-cart">
		@foreach (Cart::instance('saveForLater')->content() as $item)                    
		<li class="pr-cart-item">
			<div class="product-image">
				<figure><img src="{{ ('assets/images/products') }}/{{$item->model->image}}" alt="{{$item->model->name}}"></figure>
			</div>
			<div class="product-name">
				<a class="link-to-product" href="{{route('product.details',['slug'=>$item->model->slug])}}">{{$item->model->name}}</a>
			</div>
			<div class="price-field produtc-price"><p class="price">${{$item->model->regular_price}}</p></div>
			<div class="quantity">                            
				<p class="text-center"><a href="#" wire:click.prevent="moveToCart('{{$item->rowId}}')">Move To Cart</a></p>                                                                                  
			</div>
			<div class="delete">
				<a href="#" wire:click.prevent="deleteFromSaveForLater('{{$item->rowId}}')" class="btn btn-delete" title="">
					<span>Delete from save for later</span>
					<i class="fa fa-times-circle" aria-hidden="true"></i>
				</a>
			</div>
		</li> 
		@endforeach                   										
	</ul>
	@else
		<p>No item saved for later</p>
	@endif
</div>

Now, let's create a function for moving a product to the cart.

So, go to the CartComponent class file and let's create a function here.

Also, create a function for deleting from SaveForLater:

public function moveToCart($rowId)
{
	$item = Cart::instance('saveForLater')->get($rowId);
	Cart::instance('saveForLater')->remove($rowId);
	Cart::instance('cart')->add($item->id,$item->name,1,$item->price)->associate('App\Models\Product');
	$this->emitTo('cart-count-component','refreshComponent');  
	session()->flash('s_success_message','Item has been moved to cart');
}

public function deleteFromSaveForLater($rowId)
{
	Cart::instance('saveForLater')->remove($rowId);
	session()->flash('s_success_message','Item has been removed from save for later');
}

Now, it's done. So, let's check it.

So, switch to the browser and refresh the page.

Now, go to the shop page and let's add a product to the cart.

Add one more product to the cart.

Now, you can see the SaveForLater link.

Now, click on it.

Now, you can see that the product has been moved to SaveForLater.

And here, you can see the number of products saved for later.

Now, for moving the product from SaveForLater to the cart, let's click on this link.

You can see that the product has been moved into the cart.

Alright, now let's remove this product from SaveForLater. So, just click on this cross icon.

And you can see that the product has been removed from SaveForLater.

So, in this way, you can use the SaveForLater option on the Cart Page.