Laravel 12 E-Commerce: Add Product To Wishlist

This tutorial covers adding a product to the user'sWishlist using the surfsidemedia/shoppingcart package'sseparate instance and updating the views to display the count.

1. Create WishlistController and Logic

First, create the controller to handle wishlist operations.


Command to Create Controller

php artisan make:controller WishlistController

WishlistController.php - add_to_wishlist Function

This function uses Cart::instance("wishlist") to add the product to a separate "wishlist" cart instance, then redirects back to the previous page.

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

Route in web.php

Define the route for the POST request to add a product to the wishlist.

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

2. Update Views for Adding Product and Displaying Count

Update shop.blade.php (Add to Wishlist Form)

The "Add to Wishlist" action on the shop page is updated to a form that submits the product details to the new route. An @if check is added to hide the "Add" button if the product is already in the wishlist.

<!-- Inside the product-meta ul on shop.blade.php -->
<ul class="product-meta">
    @if (Cart::instance("wishlist")->content()->where("id", $product->id)->count() > 0)
        <!-- Display remove link or message if already in wishlist -->
    @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 js-add-wishlist" title="Add To Wishlist">
                <a class="action" href="#"><i class="pe-7s-like"></i></a>
            </button>
        </form>
    @endif
</ul>

Update Wishlist Item Count in Layout (app.blade.php)

The main application layout is updated to display the count of items in the "wishlist" instance of the cart beside the heart icon.

<!-- Wishlist Link -->
<a class="action" href="{{route("wishlist.index")}}">
    <i class="pe-7s-like"></i>
    @if (Cart::instance("wishlist")->content()->count() > 0)
        <span class="number">{{Cart::instance("wishlist")->content()->count()}}</span>
    @endif
</a>
<!-- Cart Link (for comparison) -->
<div class="dropdown">
    <a class="action" href="{{route("cart.index")}}">
        <i class="pe-7s-shopbag"></i>
        @if (Cart::instance("cart")->content()->count() > 0)
            <span class="number">{{Cart::instance("cart")->content()->count()}}</span>
        @endif
    </a>
</div>

These updates implement the core logic for adding products to a persistent wishlist and displaying the item count on the header.