Laravel 11 E-Commerce - Show All Wishlisted Products

Welcome back to the Laravel E-Commerce Tutorial. In this video, we will learn about showing all wishlisted products.

Step 1: Create a Function in the WishlistController

First, let's create a new function in the WishlistController:

public function index()
{
    $cartItems = Cart::instance('wishlist')->content();
    return view('wishlist',compact('cartItems'));
}

Step 2: Create a Route for the Function

Next, create a route for this function by going to the web.php file and adding the following route:

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

Step 3: Create the Wishlist View

Now, let's create the wishlist view. Go to the resources directory, then views, and create a new file called wishlist.blade.php. Add the following layout:

@extends('layouts.app')
@section('content')
@endsection

Step 4: Add the Wishlist Template

Now, go to the template directory, then inside the wishlist folder, and open the wishlist.html file in VS Code. Copy the two sections, the breadcrumb and the section, and paste them into the wishlist.blade.php file, making changes as follows:

@extends('layouts.app')

@section('content')

<main class="pt-90">
    <div class="mb-4 pb-4"></div>
    <section class="shop-checkout container">
        <h2 class="page-title">Wishlist</h2>             
        <div class="shopping-cart">
            @if(Cart::instance("wishlist")->content()->count()>0)
            <div class="cart-table__wrapper">
                <table class="cart-table">
                    <thead>
                        <tr>
                            <th>Product</th>
                            <th></th>
                            <th>Price</th>                           
                            <th>Action</th>                            
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (Cart::instance('wishlist')->content() as $wishlistItem)
                        <tr>
                            <td>
                                <div class="shopping-cart__product-item">
                                    <img loading="lazy" src="{{asset('uploads/products/thumbnails')}}/{{$wishlistItem->model->image}}" width="120" height="120" alt="" />
                                </div>
                            </td>
                            <td>
                                <div class="shopping-cart__product-item__detail">
                                    <h4>{{$wishlistItem->name}}</h4>
                                    {{-- <ul class="shopping-cart__product-item__options">
                                        <li>Color: Yellow</li>
                                        <li>Size: L</li>
                                    </ul> --}}
                                </div>
                            </td>
                            <td>
                                <span class="shopping-cart__product-price">${{$wishlistItem->price}}</span>
                            </td>      
                            <td>
                                <div class="del-action">
                                    <button type="submit" class="remove-cart btn btn-sm btn-warning">Move to Cart</button>
                                
                                    <button type="submit" class="remove-cart btn btn-sm btn-danger">Remove</button>
                                </div>                               
                            </td>
                        </tr>   
                        @endforeach
                    </tbody>
                </table>      
                <div class="cart-table-footer">                    
                    <button class="btn btn-light" type="submit">CLEAR WISHLIST</button>
                </div>          
            </div>   
            @else
                <div class="row">
                    <div class="col-md-12">
                        <p>No item found in your wishlist</p>

                        <a href="{{route('shop.index')}}" class="btn btn-info">Wishlist Now</a>
                    </div>
                </div>
            @endif
        </div>
    </section>
</main>

@endsection

Final Step: Check the Wishlist Feature

Now that we've completed the setup, let's check it out! Switch to the browser and refresh the page.

In this way, you can show all wishlisted products.

That's all about showing the wishlisted products.