In this tutorial, we will learn about showing all wishlisted products.

Let's explore how to show all wishlisted products.

Creating a New Function in the Wishlist Controller

First of all, go to the WishlistController and create a new function:


public function getWishlistedProducts()
{
$items = Cart::instance(`wishlist`)->content();
return view('wishlist',['items'=>$items]);
}

Creating a Route for the Wishlist

Now, create a route for this. So, go to the web.php file and create a route here:


Route::get('/wishlist',[WishlistController::class,'getWishlistedProducts'])->name('wishlist.list');

Creating the Wishlist View

Now, let's create the wishlist view. So, go to the resources directory, then views, and create a new file here - wishlist.blade.php file - and add the following code:


@extends(`layouts.base`)
@section(`content`)
<section class=`breadcrumb-section section-b-space` style=`padding-top:20px;padding-bottom:20px;`>
<ul class=`circles`>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class=`container`>
<div class=`row`>
<div class=`col-12`>
<h3>Wishlist</h3>
<nav>
<ol class=`breadcrumb`>
<li class=`breadcrumb-item`>
<a href=`{{route('app.index')}}`>
<i class=`fas fa-home`></i>
</a>
</li>
<li class=`breadcrumb-item active` aria-current=`page`>Wishlist</li>
</ol>
</nav>
</div>
</div>
</div>
</section>
<!-- Cart Section Start -->
<section class=`wish-list-section section-b-space`>
<div class=`container`>
@if($items->count() > 0)
<div class=`row`>
<div class=`col-sm-12 table-responsive`>
<table class=`table cart-table wishlist-table`>
<thead>
<tr class=`table-head`>
<th scope=`col`>image</th>
<th scope=`col`>product name</th>
<th scope=`col`>price</th>
<th scope=`col`>availability</th>
<th scope=`col`>action</th>
</tr>
</thead>
<tbody>
@foreach ($items as $item)
<tr>
<td>
<a href=`{{route('shop.product.details',['slug'=>$item->model->slug])}}`>
<img src=`{{asset('assets/images/fashion/product/front')}}/{{$item->model->image}}`
class=` blur-up lazyload` alt=``>
</a>
</td>
<td>
<a href=`{{route('shop.product.details',['slug'=>$item->model->slug])}}` class=`font-light`>{{$item->model->name}}</a>
<div class=`mobile-cart-content row`>
<div class=`col`>
<p>In Stock</p>
</div>
<div class=`col`>
<p class=`fw-bold`>${{$item->model->regular_price}}</p>
</div>
<div class=`col`>
<h2 class=`td-color`>
<a href=`javascript:void(0)` class=`icon`>
<i class=`fas fa-times`></i>
</a>
</h2>
<h2 class=`td-color`>
<a href=`cart.php` class=`icon`>
<i class=`fas fa-shopping-cart`></i>
</a>
</h2>
</div>
</div>
</td>
<td>
<p class=`fw-bold`>${{$item->model->regular_price}}</p>
</td>
<td>
@if($item->model->stock_status == `instock`)
<p>In Stock</p>
@else
<p>Stock Out</p>
@endif
</td>
<td>
@if($item->model->stock_status == 'instock')
<a href=`javascript:void(0)` class=`icon`>
<i class=`fas fa-shopping-cart`></i>
</a>
@else
<a href=`javascript:void(0)` class=`icon disabled`>
<i class=`fas fa-shopping-cart`></i>
</a>
@endif
<a href=`javascript:void(0)` class=`icon`>
<i class=`fas fa-times`></i>
</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
<div class=`row`>
<div class=`col-md-12 text-end`>
<a href=`javascript:void(0)`>Clear All Items</a>
</div>
</div>
@else
<div class=`row`>
<div class=`col-md-12 text-center`>
<h2>Your wishlist is empty ! </h2>
<h5 class=`mt-3`>Add items to it now.</h5>
<a href=`{{route('shop.index')}}` class=`btn btn-warning mt-5`>Shop Now</a>
</div>
</div>
@endif
</div>
</section>
<!-- Cart Section End -->
@endsection

Testing the Wishlist Functionality

Now, it's done! Let's check it.

Switch to the browser and just refresh the page.

So, in this way, you can show all wishlisted products.