Laravel 10 E-Commerce Project - Adding Products to Wishlist

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.