In this tutorial we are going to learn about Shopping Cart
So let see how can we create shopping cart.
For creating shopping cart we will use a shoppingcart package
So first of all lets install shopping cart package
go to google and search here Hardevine shoppingcart
Now click this first link
From here lets copy this composer command to install this package
In command prompt just paste this composer command and hit enter
Package has been installed
now lets publish the configuration so run the following command on command prompt
Now lets create a new controller for the cart
Run the following command
Now go to the Cart Controller and create function here
Now create route for this
So go to the web.php file and create the route
Now lets create this cart view file
Now extend the layout here
Now go to the template directory and open cart.html in vs code
Now lets copy these lines of code and Paste inside the cart.blade.php file
and add make changes in code as following
Now before this row
Add the if directive
@if($cartItems->Count() > 0)
And close here the if directive
@endif
Now lets create a function adding item to the cart
Now go to the details page add the following
Now lets display the cart item count in header section and also add the link for the cart as following
For that go to layout file and open base.blade.php file and add the following code
Now its done now so lets check
So switch to the browser and just refresh the page
And here you can see the no of products in to the cart
Now lets add new product in cart
You can see the no of product
So in this way you can create the shopping cart in laravel 10 ecommerce Project.
So let see how can we create shopping cart.
For creating shopping cart we will use a shoppingcart package
So first of all lets install shopping cart package
go to google and search here Hardevine shoppingcart
Now click this first link
From here lets copy this composer command to install this package
In command prompt just paste this composer command and hit enter
composer require hardevine/shoppingcart
Package has been installed
now lets publish the configuration so run the following command on command prompt
php artisan vendor:publish -- provider="Gloudemans\Shoppingcart\ShoppingcartServiceProvider" --tag="config"
Now lets create a new controller for the cart
Run the following command
Php artisan make:controller CartController
Now go to the Cart Controller and create function here
use Cart;
public function index()
{
$cartItems = Cart::instance('cart')->content();
return view('cart', compact('cartItems'));
}
Now create route for this
So go to the web.php file and create the route
Route::get('/cart',[CartController::class,'index'])->name('cart.index');
Now lets create this cart view file
Now extend the layout here
@extends("layouts.base");
@section("content")
@endsection
Now go to the template directory and open cart.html in vs code
Now lets copy these lines of code and Paste inside the cart.blade.php file
and add make changes in code as following
@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
Now before this row
Add the if directive
@if($cartItems->Count() > 0)
And close here the if directive
@endif
Now lets create a function adding item 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');
Now go to the details page 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>
Now lets display the cart item count in header section and also add the link for the cart as following
For that go to layout file and open 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>
Now its done now so lets check
So switch to the browser and just refresh the page
And here you can see the no of products in to the cart
Now lets add new product in cart
You can see the no of product
So in this way you can create the shopping cart in laravel 10 ecommerce Project.
