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.
