In this video we are going to learn about Show All Wishlisted Products.
So let see how can we Show All Wishlisted Products.
For that lets create a new livewire component
So switch to the command prompt and for creating new livewire component just run the command.


php artisan make:livewire WishlistComponent


Now switch to the project and lets create route for this component For that go to the web.php file.
And here lets create the route.


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


Now go to the WishlistComponent.php class file and add here 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 lets add the wishlist link on this icon
So go to the wishlist-count-component.blade view file and add the link as following.

<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 cart link with cart icon.
So go to the cart-count-component.blade.php view file and add the link as following.


<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 its done so lets check it.
So switch to browser and refresh the page.
Now go to the shop page.
Now lets add some product to the Wishlist.
So just click on this link.
Product added.
Add this product this also.
Now three product added into Wishlist.
Now click on this Wishlist icon.
And here you can see the all Wishlisted products.
Now add more products.
So add this product this this.
Now click on Wihslist icon.
And here you can see all the Wishlisted products.
So in this way you can show all the wishlisted products.