Laravel 12 E-Commerce Project

Laravel 12 E-Commerce Project - Shoping Cart


Laravel 12 E-Commerce: Implementing the Shopping Cart

Hi everyone, welcome back to the Laravel E-Commerce Project Tutorial. This video covers the steps for setting up and implementing the Shopping Cart functionality using the `surfsidemedia/shoppingcart` package.


1. Package Installation and Configuration

Install Shopping Cart Package

Run the following Composer command to install the required shopping cart package:

composer require surfsidemedia/shoppingcart

Publish Configuration

Publish the package'sconfiguration file:

php artisan vendor:publish --provider="SurfsidemediaShoppingcartShoppingcartServiceProvider" --tag="config"

2. Cart Controller and Route Setup

Create Cart Controller

Generate a new controller for handling cart operations:

Php artisan make:controller CartController

Index Function (`CartController.php`)

In `CartController.php`, include the `Cart` facade and create the `index` function to retrieve the cart contents and pass them to the view:

use Cart;
public function index()
{
    $cartItems = Cart::instance("cart")->content();
    return view("cart",compact("cartItems"));
}

Define Route for Cart Page (`web.php`)

Create the GET route for accessing the shopping cart view:

Route::get("/cart",[CartController::class,"index"])->name("cart.index");

Create Cart View

Create the view file at `resources/views/cart.blade.php`.


3. Implement Add to Cart Logic

Store Function (`CartController.php`)

Create the `store` function to handle adding a product to the cart using the data passed from the product form:

public function store(Request $request)
{
    Cart::instance("cart")->add([
        "id" => $request->id,
        "name" => $request->name,
        "qty" => $request->quantity,
        "price" => $request->price,
        "weight" => 0, // Required by package
    ])->associate("AppModelsProduct"); // Associate with the Product model
    return redirect()->back(); // Redirect back to the previous page
}

Define Route for Adding to Cart (`web.php`)

Create the POST route for submitting the add-to-cart form:

Route::post("/cart/store",[CartController::class,"store"])->name("cart.store");

Product Details Page Form Update (`details.blade.php`)

Update the "Add To Cart" button on the product details page to use a form that submits the product information to the store route:

<div class="product-details-cart-wrap">
    <div class="single-product-cart-button">
        @if($product->stock_status == "instock")
            <form method="POST" action="{{route("cart.store")}}">
                @csrf
                <div class="product-quantity mr-30">
                    <input type="number" name="quantity" min="1" max="100" value="1">
                </div>
                <div class="add-to-cart">
                    <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="btn btn-dark btn-hover-primary">Add To Cart</button>
                </div>
            </form>
        @endif
    </div>
</div>

4. Display Cart Item Count in Layout

In the main layout file (e.g., `base.blade.php` or `app.blade.php`), update the cart icon to show the number of items in the cart using the `Cart` facade:

<div class="dropdown">
    <a class="action" href="{{route("cart.index")}}">
        <i class="pe-7s-shopbag"></i>
        @if(Cart::instance("cart")->content()->count()>0)
        <span class="number">{{Cart::instance("cart")->content()->count()}}</span>
        @endif
    </a>
</div>

This completes the setup for the basic Shopping Cart functionality. The next video will cover updating product quantity in the cart.

Written by Surfside Media

Senior Full Stack Developer specializing in Web Technologies.