Laravel 12 E-Commerce: Remove Product from Wishlist (Part 29)

This tutorial covers adding functionality to remove a single product from the wishlist and to clear the entire wishlist using the WishlistController.

1. Remove Single Item from Wishlist

Create the remove_item_from_wishlist function in `WishlistController.php` to delete a product from the wishlist cart instance by its $rowId.

`WishlistController.php` - `remove_item_from_wishlist` function

public function remove_item_from_wishlist($rowId)
{
    Cart::instance("wishlist")->remove($rowId);
    return redirect()->back();
}

Route in `web.php`

Define the DELETE route for removing a product from the wishlist.

Route::delete("/wishlist/remove/{rowId}",[WishlistController::class,"remove_item_from_wishlist"])->name("wishlist.remove");

Update `wishlist.blade.php`

Implement the form in your wishlist view to handle the DELETE request for removing an item. This form is typically placed in the product action column.

<td class="product-action">
    <!-- Corrected form action route based on controller/route definition -->
    <form method="POST" action="{{route("wishlist.remove", ["rowId"=>$wishlistItem->rowId])}}">
        @csrf
        @method("DELETE")
        <button class="remove" type="submit">
            <i class="pe-7s-trash"></i>
        </button>
    </form>
</td>

2. Clear All Items from Wishlist

Create the empty_wishlist function in `WishlistController.php` to clear all products from the wishlist cart instance using the destroy() method.

`WishlistController.php` - `empty_wishlist` function

public function empty_wishlist()
{
    Cart::instance("wishlist")->destroy();
    return redirect()->back();
}

Route in `web.php`

Define the DELETE route for clearing the entire wishlist.

Route::delete("/wishlist/clear",[WishlistController::class,"empty_wishlist"])->name("wishlist.empty");

Update `wishlist.blade.php`

Add a form with a "CLEAR WISHLIST" button to your wishlist view that submits a DELETE request to the newly created route.

<div class="cart-table-footer">
    <form class="position-relative bg-body" method="POST" action="{{route("wishlist.empty")}}">
        @csrf
        @method("DELETE")
        <button class="btn btn-light" type="submit">CLEAR WISHLIST</button>
    </form>
</div>

This completes the functionality for removing and clearing items from the user'swishlist.