Laravel 11 E-Commerce - Add Product To Wishlist

Welcome back to the Laravel E-Commerce Tutorial. In this video, we will learn about adding products to a wishlist.

Step 1: Create a Controller

First, let's create a controller. Open the command prompt and run the following command:

Php artisan make:controller WishlistController

Step 2: Create a Function in the Wishlist Controller

Now, let's open the Wishlist Controller and create a function:

public function add_to_wishlist(Request $request)
{
        Cart::instance('wishlist')->add($request->id, $request->name, $request->quantity, $request->price)->associate('App\Models\Product');
        return redirect()->back();
}

Step 3: Create a Route for the Function

Next, create a route for this function by going to the web.php file and adding the following route:

Route::post('/wishlist/add',[WishlistController::class,'add_to_wishlist'])->name('wishlist.add');

Step 4: Add the Wishlist Feature to the Shop Page

Now, go to the shop.blade.php file and inside the foreach loop, find the heart icon. Before the button, add an if statement to check if the product is in the wishlist, and then add a form for adding or removing the product from the wishlist as follows:

@if(Cart::instance("wishlist")->content()->Where('id',$product->id)->count()>0)
        <form method="POST" action="{{route('wishlist.remove',['rowId'=>Cart::instance("wishlist")->content()->Where('id',$product->id)->first()->rowId])}}">                                    
                @csrf
                @method("DELETE")
                <button type="submit" class="pc__btn-wl position-absolute top-0 end-0 bg-transparent border-0 filled-heart" title="Remove from Wishlist">
                <svg width="16" height="16" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <use href="#icon_heart" />
                </svg>
                </button>
        </form>
@else
        <form method="POST" action="{{route('wishlist.add')}}">
        @csrf
        <input type="hidden" name="id" value="{{$product->id}}" />
        <input type="hidden" name="name" value="{{$product->name}}" />
        <input type="hidden" name="quantity" value="1"/>
        <input type="hidden" name="price" value="{{$product->sale_price == '' ? $product->regular_price:$product->sale_price}}" />
        <button type="submit" class="pc__btn-wl position-absolute top-0 end-0 bg-transparent border-0" title="Add To Wishlist">
                <svg width="16" height="16" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <use href="#icon_heart" />
                </svg>
        </button>
        </form>
@endif

Step 5: Display the Wishlist Item Count

Now, let's display the wishlist item count. Open the app.blade.php file and add the following code:

<a class="header-tools__item header-tools__wishlist" href="{{route('wishlist.index')}}">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <use href="#icon_heart" />
        </svg>  
        @if(Cart::instance("wishlist")->content()->count()>0) 
                <span class="cart-amount d-block position-absolute js-cart-items-count">{{Cart::instance("wishlist")->content()->count()}}</span>
        @endif                  
</a>

Final Step: Check the Wishlist Feature

Now that we've completed the setup, let's check it out! Switch to the browser and refresh the page. Go to the shop page and add a product to your wishlist by clicking on the heart icon.

After clicking on the heart icon, you should see that the product has been added to your wishlist, and the wishlist count should be displayed on the top right of the page.

By following these steps, you can add products to a wishlist.

That's all about adding products to a wishlist.