Laravel 11 E-Commerce - Shopping Cart
Welcome back to the Laravel E-Commerce Tutorial. In this video, we will learn about creating a shopping cart.
Step 1: Install the Shopping Cart Package
To create a shopping cart, we will use a shopping cart package. First, let's install the package. Go to Google and search for "Surfsidemedia github". Click on the first link and copy the composer command to install the package. In the command prompt, paste the command and hit enter:
composer require surfsidemedia/shoppingcart
The package has been installed. Now, let's publish the configuration. On the GitHub page, find the command for publishing the configuration:
php artisan vendor:publish --provider="Surfsidemedia\Shoppingcart\ShoppingcartServiceProvider" --tag="config"
Copy the command and paste it into the command prompt, then hit enter. Now, the shopping cart setup is complete.
Step 2: Create a New Controller for the Cart
Let's create a new controller for the cart. Go to the command prompt and run the command:
Php artisan make:controller CartController
Now, go to the Cart Controller and create a function:
use Cart;
public function index()
{
$cartItems = Cart::instance('cart')->content();
return view('cart',compact('cartItems'));
}
Step 3: Create a Route for the Cart
Create a route for the cart by going to the web.php file and creating a new route:
Route::get('/cart',[CartController::class,'index'])->name('cart.index');
Step 4: Create the Cart View File
Now, let's create the cart view file. Extend the layout by writing:
@extends("layouts.base");
@section("content")
@endsection
Step 5: Add Cart Configuration
Go to the template directory and open cart.html in VS Code. Copy the lines of code and paste them into the cart.blade.php file, making changes as follows:
@extends('layouts.app')
@section('content')
<style>
.cart-totals td{
text-align: right;
}
.cart-total th, .cart-total td{
color:green;
font-weight: bold;
font-size: 21px !important;
}
</style>
<main class="pt-90">
<div class="mb-4 pb-4"></div>
<section class="shop-checkout container">
<h2 class="page-title">Cart</h2>
<div class="checkout-steps">
<a href="javascript:void();" class="checkout-steps__item active">
<span class="checkout-steps__item-number">01</span>
<span class="checkout-steps__item-title">
<span>Shopping Bag</span>
<em>Manage Your Items List</em>
</span>
</a>
<a href="javascript:void();" class="checkout-steps__item">
<span class="checkout-steps__item-number">02</span>
<span class="checkout-steps__item-title">
<span>Shipping and Checkout</span>
<em>Checkout Your Items List</em>
</span>
</a>
<a href="javascript:void();" class="checkout-steps__item">
<span class="checkout-steps__item-number">03</span>
<span class="checkout-steps__item-title">
<span>Confirmation</span>
<em>Order Confirmation</em>
</span>
</a>
</div>
<div class="shopping-cart">
@if($cartItems->count() > 0)
<div class="cart-table__wrapper">
<table class="cart-table">
<thead>
<tr>
<th>Product</th>
<th></th>
<th>Price</th>
<th>Quantity</th>
<th>Subtotal</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach ($cartItems as $cartItem)
<tr>
<td>
<div class="shopping-cart__product-item">
<img loading="lazy" src="{{asset('uploads/products/thumbnails')}}/{{$cartItem->model->image}}" width="120" height="120" alt="" />
</div>
</td>
<td>
<div class="shopping-cart__product-item__detail">
<h4>{{$cartItem->name}}</h4>
<ul class="shopping-cart__product-item__options">
<li>Color: Yellow</li>
<li>Size: L</li>
</ul>
</div>
</td>
<td>
<span class="shopping-cart__product-price">${{$cartItem->price}}</span>
</td>
<td>
<div class="qty-control position-relative">
<input type="number" name="quantity" value="{{$cartItem->qty}}" min="1" class="qty-control__number text-center">
<div class="qty-control__reduce">-</div>
<div class="qty-control__increase">+</div>
</div>
</td>
<td>
<span class="shopping-cart__subtotal">${{$cartItem->subTotal()}}</span>
</td>
<td>
<a href="javascript:void(0)" class="remove-cart">
<svg width="10" height="10" viewBox="0 0 10 10" fill="#767676" xmlns="http://www.w3.org/2000/svg">
<path d="M0.259435 8.85506L9.11449 0L10 0.885506L1.14494 9.74056L0.259435 8.85506Z" />
<path d="M0.885506 0.0889838L9.74057 8.94404L8.85506 9.82955L0 0.97449L0.885506 0.0889838Z" />
</svg>
</a>
</td>
</tr>
@endforeach
</tbody>
</table>
<div class="cart-table-footer">
<input class="form-control" type="text" name="coupon_code" placeholder="Coupon Code">
<input class="btn-link fw-medium position-absolute top-0 end-0 h-100 px-4" type="submit" value="APPLY COUPON">
<form class="position-relative bg-body">
<button class="btn btn-light" type="submit">CLEAR CART</button>
</form>
</div>
</div>
<div class="shopping-cart__totals-wrapper">
<div class="sticky-content">
<div class="shopping-cart__totals">
<h3>Cart Totals</h3>
<table class="cart-totals">
<tbody>
<tr>
<th>Subtotal</th>
<td>${{Cart::instance('cart')->subtotal()}}</td>
</tr>
<tr>
<th>SHIPPING</th>
<td class="text-right">Free</td>
</tr>
<tr>
<th>VAT</th>
<td>${{Cart::instance('cart')->tax()}}</td>
</tr>
<tr class="cart-total">
<th>Total</th>
<td>${{Cart::instance('cart')->total()}}</td>
</tr>
</tbody>
</table>
</div>
<div class="mobile_fixed-btn_wrapper">
<div class="button-wrapper container">
<a href="#" class="btn btn-primary btn-checkout">PROCEED TO CHECKOUT</a>
</div>
</div>
</div>
</div>
@else
<div class="row">
<div class="col-md-12 text-center pt-5 pb-5">
<p>No item found in your cart</p>
<a href="{{route('shop.index')}}" class="btn btn-info">Shop Now</a>
</div>
</div>
@endif
</div>
</section>
</main>
@endsection
You can change the tax percentage from the cart config file. Let's see the cart configuration file. Go to the config directory, then open cart.php. From here, you can change the tax percentage.
In the else part, let's display a cart empty message. Add a row with col-md-12 and also add the .text-center class. In the h2 tag, add the message "Your cart is empty!" and add a link to the shop page.
Step 6: Create a Function for Adding Items to the Cart
Let's create a function for adding items to the cart. Go to the CartController and create a new function:
public function addToCart(Request $request)
{
Cart::instance('cart')->add($request->id,$request->name,$request->quantity,$request->price)->associate('App\Models\Product');
session()->flash('success', 'Product is Added to Cart Successfully !');
return response()->json(['status'=>200,'message'=>'Success ! Item Successfully added to your cart.']);
}
Create a route for this function:
Route::post('/cart/store', [CartController::class, 'addToCart'])->name('cart.store');
Step 7: Add the "Add to Cart" Button
Go to the details.blade.php file and find the "Add to Cart" button. Add the link as follows:
@if(Cart::instance("cart")->content()->Where('id',$product->id)->count()>0)
<a href="{{route('cart.index')}}" class="btn btn-warning mb-3">Go to Cart</a>
@else
<form name="addtocart-form" method="POST" action="{{route('cart.add')}}">
@csrf
<div class="product-single__addtocart">
<div class="qty-control position-relative">
<input type="number" name="quantity" value="1" min="1" class="qty-control__number text-center">
<div class="qty-control__reduce">-</div>
<div class="qty-control__increase">+</div>
</div><!-- .qty-control -->
<input type="hidden" name="id" value="{{$product->id}}" />
<input type="hidden" name="name" value="{{$product->name}}" />
<input type="hidden" name="price" value="{{$product->sale_price == '' ? $product->regular_price:$product->sale_price}}" />
<button type="submit" class="btn btn-primary">Add to Cart</button>
</div>
</form>
@endif
Step 8: Display the Cart Item Count
Let's display the cart item count. Go to the layout file and open base.blade.php. Add the link to the cart and show the cart count as follows:
<a href="{{route('cart.index')}}" class="header-tools__item header-tools__cart">
<svg class="d-block" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<use href="#icon_cart" />
</svg>
@if(Cart::instance("cart")->content()->count()>0)
<span class="cart-amount d-block position-absolute js-cart-items-count">{{Cart::instance("cart")->content()->count()}}</span>
@endif
</a>
Similarly, add the "Add to Cart" button on the shop.blade.php page as follows:
@if(Cart::instance("cart")->content()->Where('id',$product->id)->count()>0)
<a href="{{route('cart.index')}}" class="pc__atc btn anim_appear-bottom btn position-absolute border-0 text-uppercase fw-medium js-add-cart btn-warning">Go to Cart</a>
@else
<form name="addtocart-form" method="POST" action="{{route('cart.add')}}">
@csrf
<div class="product-single__addtocart">
<input type="hidden" name="id" value="{{$product->id}}" />
<input type="hidden" name="name" value="{{$product->name}}" />
<input type="hidden" name="quantity" value="1"/>
<input type="hidden" name="price" value="{{$product->sale_price == '' ? $product->regular_price:$product->sale_price}}" />
<button type="submit" class="pc__atc btn anim_appear-bottom btn position-absolute border-0 text-uppercase fw-medium js-add-cart">Add to Cart</button>
</div>
</form>
@endif
Final Step: Check the Shopping Cart
Now, let's check the shopping cart. Switch to the browser and refresh the page. You should 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.
That's all about creating the shopping cart.
