Laravel 8 E-Commerce - Auto Refresh Wishlist and Cart Count

In this video, we are going to learn about auto-refreshing the wishlist and cart count.

When we click on the "Add to Wishlist" link, a product is added to the wishlist. However, there is a problem - the number of products in the wishlist is not updated automatically.

When I refresh the page, it shows the correct number of wishlisted products. Similarly, in the cart, when I click on the "+" icon to increase the quantity of an item, the updated number of products in the cart is not displayed.

So, let's see how we can make the wishlist and cart count auto-refresh.

For that, let's create two new Livewire components - one for the wishlist count and another for the cart count.

So, switch to the command prompt and run the following command:

php artisan make:livewire WhishlistCountComponent

php artisan make:livewire CartCountComponent

Now, switch to the project and let's open the base.blade.php layout file.

Inside this file, let's find the wishlist and cart count code.

Now, let's cut the wishlist div and go to the wishlist-count-component.blade.php file.

And inside this file, just paste 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, let's render the wishlist-count-component.blade.php file:

@livewire('wishlist-count-component')

Now, select the cart count div and cut it.

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 the base layout file, render the cart-count-component.blade.php file:

@livewire('cart-count-component')

Now, go to the WishlistCountComponent.php Class 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 addToWishlist method, add the following code:

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

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

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

Alright, now it's done. So, let's check it.

So, switch to the browser and refresh the page.

Now, let's add a product to the wishlist.

So, just click on this icon and now you can see the wishlist count.

If I add another product to the wishlist, you can see the number of products in the wishlist increase.

Now, let's check the cart.

So, let's add a product to the cart.

Now, let's increase the product quantity and you can see the number of products in the cart increase.

If I decrease the number of products, you can see the number of products in the cart decrease.

So, in this way, you can make the wishlist and cart count auto-refresh.

That's all about auto-refreshing the wishlist and cart count.