In this tutorial, we will learn about creating a shopping cart.

Let's explore how to create a shopping cart.

Installing the Shopping Cart Package

To create a shopping cart, we will use the Hardevine shopping cart package.

First, let's install the shopping cart package. Go to Google and search for `Hardevine shoppingcart`.

Click on the first link and copy the composer command to install the package.

In the command prompt, paste the composer command and hit enter:

composer require hardevine/shoppingcart

The package has been installed. Now, let's publish the configuration by running the following command in the command prompt:

php artisan vendor:publish -- provider=`GloudemansShoppingcartShoppingcartServiceProvider` --tag=`config`

Creating a New Controller for the Cart

Now, let's create a new controller for the cart. Run the following command:

Php artisan make:controller CartController

Go to the Cart Controller and create a function:

use Cart;
public function index()
{
    $cartItems = Cart::instance('cart')->content();
    return view('cart', compact('cartItems'));
}

Creating a Route for the Cart

Now, let's create a route for the cart. Go to the web.php file and create the route:

Route::get('/cart',[CartController::class,'index'])->name('cart.index');

Creating the Cart View File

Now, let's create the cart view file. Extend the layout:

@extends(`layouts.base`);
@section(`content`)
@endsection

Go to the template directory and open the cart.html file in VS Code.

Copy the lines of code and paste them inside the cart.blade.php file, making the following changes:

@extends('layouts.base')
@section('content')
<section class=`breadcrumb-section section-b-space` style=`padding-top:20px;padding-bottom:20px;`>
    <ul class=`circles`>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class=`container`>
        <div class=`row`>
            <div class=`col-12`>
                <h3>Cart</h3>
                <nav>
                    <ol class=`breadcrumb`>
                        <li class=`breadcrumb-item`>
                            <a href=`{{route('app.index')}}`>
                                <i class=`fas fa-home`></i>
                            </a>
                        </li>
                        <li class=`breadcrumb-item active` aria-current=`page`>Cart</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</section>
<!-- Cart Section Start -->
<section class=`cart-section section-b-space`>
    <div class=`container`>
        @if($cartItems->Count() > 0)
        <div class=`row`>
            <div class=`col-md-12 text-center`>
                <table class=`table cart-table`>
                    <thead>
                        <tr class=`table-head`>
                            <th scope=`col`>image</th>
                            <th scope=`col`>product name</th>
                            <th scope=`col`>price</th>
                            <th scope=`col`>quantity</th>
                            <th scope=`col`>total</th>
                            <th scope=`col`>action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($cartItems as $item)                                                   
                        <tr>
                            <td>
                                <a href=`{{route('shop.product.details',['slug'=>$item->model->slug])}}`>
                                    <img src=`{{asset('assets/images/fashion/product/front')}}/{{$item->model->image}}` class=`blur-up lazyloaded` alt=`{{$item->model->name}}`>
                                </a>
                            </td>
                            <td>
                                <a href=`{{route('shop.product.details',['slug'=>$item->model->slug])}}`>{{$item->model->name}}</a>
                                <div class=`mobile-cart-content row`>
                                    <div class=`col`>
                                        <div class=`qty-box`>
                                            <div class=`input-group`>
                                                <input type=`text` name=`quantity` class=`form-control input-number`
                                                    value=`1`>
                                            </div>
                                        </div>
                                    </div>
                                    <div class=`col`>
                                        <h2>${{$item->price}}</h2>
                                    </div>
                                    <div class=`col`>
                                        <h2 class=`td-color`>
                                            <a href=`javascript:void(0)`>
                                                <i class=`fas fa-times`></i>
                                            </a>
                                        </h2>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <h2>${{$item->price}}</h2>
                            </td>
                            <td>
                                <div class=`qty-box`>
                                    <div class=`input-group`>
                                        <input type=`number` name=`quantity` data-rowid=`{{$item->rowId}}` class=`form-control input-number` value=`{{$item->qty}}`>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <h2 class=`td-color`>${{$item->subtotal()}}</h2>
                            </td>
                            <td>
                                <a href=`javascript:void(0)` onclick=`removeItemFromCart('{{$item->rowId}}')`>
                                    <i class=`fas fa-times`></i>
                                </a>
                            </td>
                        </tr>                       
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class=`col-12 mt-md-5 mt-4`>
                <div class=`row`>
                    <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)` class=`text-decoration-underline theme-color d-block text-capitalize`>clear
                                all items</a>
                        </div>
                    </div>
                    <div class=`col-sm-5 col-7`>
                        <div class=`left-side-button float-start`>
                            <a href=`{{route('shop.index')}}` class=`btn btn-solid-default btn fw-bold mb-0 ms-0`>
                                <i class=`fas fa-arrow-left`></i> Continue Shopping</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class=`cart-checkout-section`>
                <div class=`row g-4`>
                    <div class=`col-lg-4 col-sm-6`>
                        <div class=`promo-section`>
                            <form class=`row g-3`>
                                <div class=`col-7`>
                                    <input type=`text` class=`form-control` id=`number` placeholder=`Coupon Code`>
                                </div>
                                <div class=`col-5`>
                                    <button class=`btn btn-solid-default rounded btn`>Apply Coupon</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class=`col-lg-4 col-sm-6 `>
                        <div class=`checkout-button`>
                            <a href=`checkout` class=`btn btn-solid-default btn fw-bold`>
                                Check Out <i class=`fas fa-arrow-right ms-1`></i></a>
                        </div>
                    </div>
                    <div class=`col-lg-4`>
                        <div class=`cart-box`>
                            <div class=`cart-box-details`>
                                <div class=`total-details`>
                                    <div class=`top-details`>
                                        <h3>Cart Totals</h3>
                                        <h6>Sub Total <span>${{Cart::instance('cart')->subtotal()}}</span></h6>
                                        <h6>Tax <span>${{Cart::instance('cart')->tax()}}</span></h6>
                                        <h6>Total <span>${{Cart::instance('cart')->total()}}</span></h6>
                                    </div>
                                    <div class=`bottom-details`>
                                        <a href=`checkout`>Process Checkout</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @else
            <div class=`row`>
                <div class=`col-md-12 text-center`>
                    <h2>Your cart is empty !</h2>
                    <h5 class=`mt-3`>Add Items to it now.</h5>
                    <a href=`{{route('shop.index')}}` class=`btn btn-warning mt-5`>Shop Now</a>
                </div>
            </div>
        @endif
    </div>
</section>
@endsection

Add the if directive before this row:

<if($cartItems->Count() > 0)>

And close the if directive:

</if>

Creating a Function to Add Items to the Cart

Now, let's create a function to add items to the cart:

public function addToCart(Request $request)
{
    $product = Product::find($request->id);
    $price = $product->sale_price ? $product->sale_price : $product->regular_price;
    Cart::instance('cart')->add($product->id,$product->name,$request->quantity,$price)->associate('AppModelsProduct');
    return redirect()->back()->with('message','Success ! Item has been added successfully!');
}  

Route::post('/cart/store', [CartController::class, 'addToCart'])->name('cart.store');

Go to the details page and add the following:

<a href=`javascript:void(0)`  onclick=`event.preventDefault();document.getElementById('addtocart').submit();` id=`cartEffect` class=`btn btn-solid hover-solid btn-animation`>
    <i class=`fa fa-shopping-cart`></i>
    <span>Add To Cart</span>
    <form id=`addtocart` method=`post` action=`{{route('cart.store')}}`>
        @csrf
        <input type=`hidden` name=`id` value=`{{$product->id}}`>                                             
        <input type=`hidden` name=`quantity` id=`qty` value=`1`>
    </form>
</a>

Displaying the Cart Item Count in the Header Section

Now, let's display the cart item count in the header section and add a link for the cart as follows:

Go to the layout file and open the base.blade.php file, and add the following code:

<li class=`onhover-dropdown wislist-dropdown`>
    <div class=`cart-media`>
        <a href=`{{route('cart.index')}}`>
            <i data-feather=`shopping-cart`></i>
            <span id=`cart-count` class=`label label-theme rounded-pill`>
                {{Cart::instance('cart')->content()->count()}}
            </span>
        </a>
    </div>
</li>

It's done! Now, let's check.

Switch to the browser and refresh the page.

Here, you can see the number of products in the cart.

Now, let's add a new product to the cart.

You can see the number of products.

In this way, you can create a shopping cart in a Laravel 10 e-commerce project.