Laravel E-Commerce Application Development – Shopping Cart

This is part 22 of the Laravel E-Commerce Application Development series. In this part, we will start implementing the shopping cart functionality in our application.

I assume you should have the e-commerce application project on your machine or you can grab it from Laravel E-Commerce Application repository, we will start from where we left it in the last part.

Let’s start implementing the shopping cart.

Installing Shopping Cart Package

To add the shopping cart functionality in our application, I will be using the darryldecode/laravelshoppingcart package. This package provides almost everything to handle a shopping cart. Please read more about this package on the repository page.

This package supports the session and database for the purpose of storing shopping cart data. I will be using the session and will not be storing data in the database.

To install this package open the command line terminal and run the below command.

composer require "darryldecode/cart:~4.0"

After installing this package, open the config/app.php file and add below in the aliases array.

'Cart' => Darryldecode\Cart\Facades\CartFacade::class

That’s all, we ready to use the shopping cart functionality using this package.

Adding Shopping Cart Count in Header

If you have noticed we have a link to cart (not functional) in the header section of our website which shows the current count of the cart.

To show the total number of items in the shopping cart, we will use the view composers. Open the ViewComposerServiceProvider from app/Providers folder and add the below code in the boot() method.

View::composer('site.partials.header', function ($view) {
    $view->with('cartCount', Cart::getContent()->count());
});

In above code example, we are sending a $cartCount variable to our header.blade.php file which contains the current shopping cart count.

Also inlcude the Cart facade in this class like below.

use Cart;

Now, open the resources/views/site/partials/header.blade.php file and update the shopping cart counter to below.

<div class="widget-header">
    <a href="#" class="icontext">
        <div class="icon-wrap icon-xs bg2 round text-secondary"><i
                class="fa fa-shopping-cart"></i></div>
        <div class="text-wrap">
            <small>{{ $cartCount }} items</small>
        </div>
    </a>
</div>

After finishing this tutorial, don’t forget to add the route('checkout.cart) route to above template.

Updating addToCart Method in Product Controller

Next, we will update the add to cart method in our Product Controller. Open the Product Controller file and replace the addToCart() method with the below one.

public function addToCart(Request $request)
{
    $product = $this->productRepository->findProductById($request->input('productId'));
    $options = $request->except('_token', 'productId', 'price', 'qty');

    Cart::add(uniqid(), $product->name, $request->input('price'), $request->input('qty'), $options);

    return redirect()->back()->with('message', 'Item added to cart successfully.');
}

As we know in the last post, we have passed on the following data when adding a product to cart.

• productId
• qty
• price
• and option like color or size

In the above method, we have to find the product which we need to add to the cart. Then we have removed everything from the $request except color, size or any other attributes and assigned to the $option variable.

Next, we are adding the information to our shopping cart using the Cart::add() method.

Finally, we are sending the user back to the product page with a success message.

Creating Cart Controller

To handle the shopping cart I will create a new controller named CartController. Open the command line terminal and run the below command.

php artisan make:controller Site\CartController

Open the CartController and add the below method in it.

namespace App\Http\Controllers\Site;

use Cart;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;

class CartController extends Controller
{
    public function getCart()
    {
        return view('site.pages.cart');
    }
}

Now, we will add a few routes to handle our shopping cart.

Route::get('/cart', 'Site\CartController@getCart')->name('checkout.cart');
Route::get('/cart/item/{id}/remove', 'Site\CartController@removeItem')->name('checkout.cart.remove');
Route::get('/cart/clear', 'Site\CartController@clearCart')->name('checkout.cart.clear');

Creating Shopping Cart Page

In this section, we will create a new view named cart. Create a new file in the resources/views/site/pages folder and name it cart.blade.php.

Open this view file and add the below markup in it.

@extends('site.app')
@section('title', 'Shopping Cart')
@section('content')
    <section class="section-pagetop bg-dark">
        <div class="container clearfix">
            <h2 class="title-page">Cart</h2>
        </div>
    </section>
    <section class="section-content bg padding-y border-top">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    @if (Session::has('message'))
                        <p class="alert alert-success">{{ Session::get('message') }}</p>
                    @endif
                </div>
            </div>
            <div class="row">
                <main class="col-sm-9">
                    @if (\Cart::isEmpty())
                        <p class="alert alert-warning">Your shopping cart is empty.</p>
                    @else
                        <div class="card">
                            <table class="table table-hover shopping-cart-wrap">
                                <thead class="text-muted">
                                <tr>
                                    <th scope="col">Product</th>
                                    <th scope="col" width="120">Quantity</th>
                                    <th scope="col" width="120">Price</th>
                                    <th scope="col" class="text-right" width="200">Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach(\Cart::getContent() as $item)
                                    <tr>
                                        <td>
                                            <figure class="media">
                                                <figcaption class="media-body">
                                                    <h6 class="title text-truncate">{{ Str::words($item->name,20) }}</h6>
                                                    @foreach($item->attributes as $key  => $value)
                                                        <dl class="dlist-inline small">
                                                            <dt>{{ ucwords($key) }}: </dt>
                                                            <dd>{{ ucwords($value) }}</dd>
                                                        </dl>
                                                    @endforeach
                                                </figcaption>
                                            </figure>
                                        </td>
                                        <td>
                                            <var class="price">{{ $item->quantity }}</var>
                                        </td>
                                        <td>
                                            <div class="price-wrap">
                                                <var class="price">{{ config('settings.currency_symbol'). $item->price }}</var>
                                                <small class="text-muted">each</small>
                                            </div>
                                        </td>
                                        <td class="text-right">
                                            <a href="{{ route('checkout.cart.remove', $item->id) }}" class="btn btn-outline-danger"><i class="fa fa-times"></i> </a>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </main>
                <aside class="col-sm-3">
                    <a href="{{ route('checkout.cart.clear') }}" class="btn btn-danger btn-block mb-4">Clear Cart</a>
                    <p class="alert alert-success">Add USD 5.00 of eligible items to your order to qualify for FREE Shipping. </p>
                    <dl class="dlist-align h4">
                        <dt>Total:</dt>
                        <dd class="text-right"><strong>{{ config('settings.currency_symbol') }}{{ \Cart::getSubTotal() }}</strong></dd>
                    </dl>
                    <hr>
                    <figure class="itemside mb-3">
                        <aside class="aside"><img src="{{ asset('frontend/images/icons/pay-visa.png') }}"></aside>
                        <div class="text-wrap small text-muted">
                            Pay 84.78 AED ( Save 14.97 AED ) By using ADCB Cards
                        </div>
                    </figure>
                    <figure class="itemside mb-3">
                        <aside class="aside"> <img src="{{ asset('frontend/images/icons/pay-mastercard.png') }}"> </aside>
                        <div class="text-wrap small text-muted">
                            Pay by MasterCard and Save 40%.
                            <br> Lorem ipsum dolor
                        </div>
                    </figure>
                    <a href="#" class="btn btn-success btn-lg btn-block">Proceed To Checkout</a>
                </aside>
            </div>
        </div>
    </section>
@stop

In this view we are showing the cart table if the shopping cart is not empty using the isEmpty() method. Next, we loading the shopping cart items using the getContent() and running a loop on them and showing the relevant data for this table.

In the Totals section, we are getting the shopping cart total using the getSubTotal() method.

Removing Item from Shopping Cart

To remove an item from the shopping cart we already have a route declared named checkout.cart.remove which points to removeItem() method in the Cart controller.

We will pass the unique id created for each row to this method.

Add the below method in the Cart controller.

public function removeItem($id)
{
    Cart::remove($id);

    if (Cart::isEmpty()) {
        return redirect('/');
    }
    return redirect()->back()->with('message', 'Item removed from cart successfully.');
}

In the above method, we the using the Cart::remove() method to remove the required row.

We are also checking if the cart is empty then sending the user to the homepage.

Clearing Shopping Cart

To clear or destroy the whole shopping cart we will use the Cart::clear() method. Add the below method in the Cart controller.

public function clearCart()
{
    Cart::clear();

    return redirect('/');
}

That’s Allllllllllllllll and that’s what we have achieved today.

Now, head over to your website and try to add some products in the shopping cart, then delete some from the shopping cart and then try to clear the shopping cart. Everything should work as expected.

What’s Next

In the next post, we will start working on the checkout process where a registered customer can place an order.

If you have any question about this post, please leave a comment in the comment box below.