Laravel 8 E-Commerce - Show All Wishlisted Products

In this video, we are going to learn about showing all wishlisted products.

So, let's see how we can show all wishlisted products.

For that, let's create a new Livewire component.

So, switch to the command prompt and run the following command to create a new Livewire component:

php artisan make:livewire WishlistComponent

Now, switch to the project and let's create a route for this component.

For that, go to the web.php file and create the route:

Route::get('/wishlist',WishlistComponent::class)->name('product.wishlist');

Now, go to the WishlistComponent.php class file and add the layout:

public function render()
{
	return view('livewire.wishlist-component')->layout('layouts.base');
}

Now, open the wishlist-component.blade.php view file and write the following code:

<main id="main" class="main-site left-sidebar">
    <div class="container">
        <div class="wrap-breadcrumb">
            <ul>
                <li class="item-link"><a href="/" class="link">home</a></li>
                <li class="item-link"><span>Wishlist</span></li>
            </ul>
        </div>

        <style>
            .product-wish{
                position: absolute;
                top:10%;
                left:0;
                z-index:99;
                right:30px;
                text-align:right;
                padding-top: 0;
            }
            .product-wish .fa{
                color:#cbcbcb;
                font-size:32px;
            }
            .product-wish .fa:hover{
                color:#ff7007;
            }
            .fill-heart{
                color:#ff7007 !important;
            }
        </style>

        <div class="row">                    
            @if(Cart::instance('wishlist')->content()->count() > 0)    
            <ul class="product-list grid-products equal-container">                                      
                @foreach (Cart::instance('wishlist')->content() as $item)
                <li class="col-lg-3 col-md-6 col-sm-6 col-xs-6 ">
                    <div class="product product-style-3 equal-elem ">
                        <div class="product-thumnail">
                            <a href="{{route('product.details',['slug'=>$item->model->slug])}}" title="{{$item->model->name}}">
                                <figure><img src="{{ asset('assets/images/products') }}/{{$item->model->image}}" alt="{{$item->model->name}}"></figure>
                            </a>
                        </div>
                        <div class="product-info">
                            <a href="{{route('product.details',['slug'=>$item->model->slug])}}" class="product-name"><span>{{$item->model->name}}</span></a>
                            <div class="wrap-price"><span class="product-price">${{$item->model->regular_price}}</span></div>
                            <div class="product-wish">
                                <a href="#" wire:click.prevent="removeFromWishlist({{$item->model->id}})"><i class="fa fa-heart fill-heart"></i></a>                                
                            </div>                                   
                        </div>
                    </div>
                </li>
                @endforeach
            </ul>
            @else
                <h4>No item in wishlist</h4>
            @endif
        </div>
    </div>
</main>

Now, let's add the wishlist link to this icon.

So, go to the wishlist-count-component.blade view file and add the link as follows:

<div class="wrap-icon-section wishlist">
    <a href="{{route('product.wishlist')}}" class="link-direction">
        <i class="fa fa-heart" aria-hidden="true"></i>
        <div class="left-info">	
            @if(Cart::instance('wishlist')->count() > 0)									
                <span class="index">{{Cart::instance('wishlist')->count()}} item</span>		
            @endif											
            <span class="title">Wishlist</span>
        </div>
    </a>
</div>

Now, do one more thing - add a cart link with a cart icon.

So, go to the cart-count-component.blade.php view file and add the link as follows:

<div class="wrap-icon-section minicart">
    <a href="{{route('product.cart')}}" class="link-direction">
        <i class="fa fa-shopping-basket" aria-hidden="true"></i>
        <div class="left-info">	
            @if(Cart::instance('cart')->count() > 0)									
            <span class="index">{{Cart::instance('cart')->count()}} items</span>	
            @endif									
            <span class="title">CART</span>
        </div>
    </a>
</div>

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

So, switch to the browser and refresh the page.

Now, go to the shop page.

Now, let's add some products to the wishlist.

So, just click on this link.

Product added.

Add this product, and this one also.

Now, three products have been added to the wishlist.

Now, click on this wishlist icon.

And here, you can see all the wishlisted products.

Now, add more products.

So, add this product, and this one.

Now, click on the wishlist icon.

And here, you can see all the wishlisted products.

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