Laravel 8 E-Commerce - Add Product To Wishlist

In this video, we are going to learn about adding a product to the wishlist.

So, let's see how we can add a product to the wishlist.

First of all, let's add an icon on every product from where we can add the product to the wishlist.

So, for that, switch to the project and open the shop-component.blade.php file.

Inside this foreach, add the following code:

<div class="product_wish">
      <a href="#"><i class="fa fa-heart"></i></a>
</div>

Now, let's add some CSS for this icon.

So, here, add the style tag.

All right, now let's check it. So, switch to the browser and refresh the page.

Now, you can see here a heart icon on each product.

Alright, now let's make this link working.

So, for that, go to the ShopComponent Class file.

Here, let's create a function for adding the product to the wishlist:

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

Now, go to the ShopComponent.php class file and create a function for adding a product to the wishlist:

public function addToWishlist($product_id,$product_name,$product_price)
{             
	Cart::instance('wishlist')->add($product_id,$product_name,1,$product_price)->associate('App\Models\Product');                
} 

Now, go to the shop-component.blade.php file and call the addToWishlist function:

<a href="#" wire:click.prevent="addToWishlist({{$product->id}},'{{$product->name}}',{{$product->regular_price}})"><i class="fa fa-heart"></i></a>

Now, go to the base layout file.

Let's find the wishlist icon and add the following 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>

Now, it's done. Let's check it.

Before checking it, do one thing. For Cart, set the instance.

So, go to the ShopComponent.php class file.

And here, add the instance for Cart like this: Cart::instance('cart') everywhere.

Now, go to the CartComponent Class file and here also add the instance for the cart.

Now, go to the CartComponent view file and add here the cart instance.

Now, go to the base layout file, here also add the instance for the cart.

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

So, switch to the browser.

And refresh the page.

And now, let's add a product to the wishlist.

So, let's click on this link for adding this product to the wishlist.

Now, you can see here the color has been changed of this heart and here.

It should be showing the number of wishlisted products, but it's not showing.

Ok, if I refresh the page, you can see here the number of records in the wishlist.

So, in this way, you can add a product to the wishlist.

In the next tutorial, we will see how to auto-refresh this wishlist count.