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.