In this video we are going to learn about Auto Refresh Wishlist and Cart Count.
When we click on this add to wishlist link, a product is added to the wishlist.
But here is a problem, you can see its not showing the no of product in wishlist here automatically.
When I refresh the page it’s showing the no of whishlisted product count.
Similarly in cart when I click on this + icon for increasing the no of item
You can see here its not showing the updated no of product in cart.
So let see how can we make Auto Refresh Wishlist and Cart Count.
For that lets create two new livewire component.
One for the this wishlist count and another for the cart count.
So switch to command prompt and run the following command.


php artisan make:livewire WhishlistCountComponent

php artisan make:livewire CartCountComponent


Now switch to the project and lets open the base.blade.php layout file.
Inside this file lets find the wishlist and cart count code here.
Now lets cut this wishlist div and go to the wishlist-count-component.blade.php file
And inside this file just paste here the code.


<div class=\"wrap-icon-section wishlist\">
<a href=\"#\" 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>


Alright
Now inside the base layout lets render the wishlist-count-component.blade.php file.


@livewire(‘wishlist-count-component')


Now select the cart count div and cut this
And now go to the cart-count-component.blade.php file and paste the code.

<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>


And inside base layout file render the cart-count-component.blade.php file.


@livewire(‘cart-count-component')


Now go to the WishlistCountComponent.php Classs file and write the following code.

<?php

namespace App\\Http\\Livewire;

use Livewire\\Component;

class WishlistCountComponent extends Component
{
protected $listeners = ['refreshComponent'=>'$refresh'];
public function render()
{
return view('livewire.wishlist-count-component');
}
}


Now go to the CartCountComponent.php class file and add the following code.

<?php

namespace App\\Http\\Livewire;

use Livewire\\Component;

class CartCountComponent extends Component
{
protected $listeners = ['refreshComponent'=>'$refresh'];
public function render()
{
return view('livewire.cart-count-component');
}
}


Now go to the ShopComponent.php Class file.
And inside the this addToWishlist method add following code.


$this->emitTo('wishlist-count-component', 'refreshComponent');


Now go to the CartComponent.php class file and inside the increaseQuantity, decreaseQuantity, destroy and destroyAll method just add the following code.


$this->emitTo('cart-count-component', 'refreshComponent');


Alright now its done so lets check it.
So switch to the browser and refresh the page.
Now lets add the product to wishlist.
So just click on this icon and now.
You can see here the wishlist count.
If I add another product to wishlist.
You can see here the no of product 2 in wishlist.
Now lets check the cart.
So lets add the product to the cart.
Now lets increase the product quantity and you can see here the no of products is increasing here.
If I decrease the no of product, you can see here its decreasing the no product in cart here.
So in this way you can make Auto Refresh the Wishlist and Cart Count. so that's all about Auto Refresh Wishlist and Cart Count.