Laravel 10 E-Commerce Project - Creating a 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="Gloudemans\Shoppingcart\ShoppingcartServiceProvider" --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('App\Models\Product');
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.
