Laravel 8 E-Commerce - Remove Product from Wishlist

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

So, let's see how we can remove a product from the wishlist.

Switch to the project and let's open the ShopComponent.php class file.

And here, let's create a function for removing a product from the wishlist:

public function removeFromWishlist($product_id)
    {
        foreach(Cart::instance('wishlist')->content() as $witem)
        {
            if($witem->id == $product_id)
            {
                Cart::instance('wishlist')->remove($witem->rowId);
                $this->emitTo('wishlist-count-component','refreshComponent');
                return;
            }
        }
    }

Now, go to the shop-component.blade.php view file.

Here, let's call the removeFromWishlist function on click action:

<div class="product-wish">
	@if($witems->contains($product->id))
		<a href="#" wire:click.prevent="removeFromWishlist({{$product->id}})"><i class="fa fa-heart fill-heart"></i></a>
	@else
		<a href="#" wire:click.prevent="addToWishlist({{$product->id}},'{{$product->name}}',{{$product->regular_price}})"><i class="fa fa-heart"></i></a>
	@endif
</div>    

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

So, switch to the browser and refresh the page.

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

So, here I am going to add this product to the wishlist.

So, click on this link.

You can see here that the heart color is changed, which means the product has been added to the wishlist.

And here, you can see that the number of wishlisted products is 1.

Add one more product.

So, let's click on this.

Product added, and here you can see that the number of products is 2.

Now, let's remove the product from the wishlist.

So, let's click on this link for removing the product from the wishlist.

And you can see that the heart icon color is changed from orange to grey.

It means the product has been removed from the wishlist.

And here, you can see that the number of products in the wishlist is 1.

Now, remove this product also. Product has been removed, and here the wishlist is now empty.

So, in this way, you can remove a product from the wishlist.