Laravel 10 E-Commerce Project - Deleting and Clearing Cart Items

In this tutorial, we will learn about deleting and clearing products from the cart.

Let's explore how to delete and clear products from the cart.

Deleting a Cart Product

To delete a cart product, let's create a function inside the CartController.

Go to the CartController and create a function to delete a product from the cart by rowId:

public function removeItem(Request $request)
{
    $rowId = $request->rowId;
    Cart::instance('cart')->remove($rowId);
    return redirect()->route('cart.index');
}

Creating a Route for the Delete Function

Now, let's create a route for this function:

Route::delete('/cart/remove', [CartController::class, 'removeCart'])->name('cart.remove');

Creating a Form to Delete a Product

Now, create a form:

<form id="deleteFromCart" action="{{route('cart.remove')}}" method="post">
    @csrf
    @method('delete')
    <input type="hidden" id="rowId_D" name="rowId" />
</form>

Submitting the Form using JavaScript

Submit this form using a JavaScript function, so inside the push directives, add a JavaScript function as follows:

@push('scripts')
    <script>
        function removeItemFromCart(rowId)
        {
            $('#rowId_D').val(rowId);
            $('#deleteFromCart').submit();
        }       
    </script>
@endpush

Now, call this removeFromCart function from the remove link:

<td>
    <a href="javascript:void(0)" onclick="removeItemFromCart('{{$item->rowId}}')">
        <i class="fas fa-times"></i>
    </a>
</td>

Testing the Delete Functionality

It's done! Let's check.

Go to the browser and refresh the page.

Now, let's remove this product from the cart, so click on this link.

You can see that the product has been removed from the cart.

Clearing the Cart

Now, let's see how to clear the cart. For that, go to the CartController and create one more function:

public function clearCart()
{
    Cart::instance('cart')->destroy();
    return redirect()->route('cart.index');
}

Creating a Route for the Clear Function

Now, create a route for this function. Go to the web.php file and create a new route:

Route::delete('/cart/clear', [CartController::class, 'clearCart'])->name('cart.clear');

Creating a Form to Clear the Cart

Now, go to the Cart.blade.php file and create a form:

<form id="clearCart" action="{{route('cart.clear')}}" method="post">
    @csrf
    @method('delete') 
</form>

Submitting the Form using JavaScript

Submit this form using a JavaScript function, so let's create a JavaScript function here:

@push('scripts')
    <script>
        function clearCart()
        {
            $('#clearCart').submit();
        }
    </script>
@endpush

Now, call this JavaScript function from the Clear all items anchor tag using the onclick event:

<div class="col-sm-7 col-5 order-1">
    <div class="left-side-button text-end d-flex d-block justify-content-end">
        <a href="javascript:void(0)" onclick="clearCart()" class="text-decoration-underline theme-color d-block text-capitalize">clear all items</a>
    </div>
</div>

Testing the Clear Functionality

So, switch to the browser and let's add some products to the cart.

And now, click on Clear all Items.

Now, you can see that all products have been removed from the cart.

In this way, you can remove and empty the cart in a Laravel 10 e-commerce project.