Laravel 10 E-Commerce Project - Shopping Cart
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.