Laravel 12 E-Commerce: Implementing Update Cart Quantity
Hi everyone, welcome back to the Laravel E-Commerce Project Tutorial. This video covers the steps for implementing the functionality to update the quantity of products directly within the shopping cart.
1. Create Controller Functions
In the `CartController`, create two new functions: `increase_item_quantity` and `reduce_item_quantity`. These functions use the product's`rowId` (provided by the shopping cart package) to find the item, modify its quantity, and update the cart instance. If reducing the quantity drops the count to zero, the item is effectively removed by the package.
Increase Quantity Function (`CartController.php`)
public function increase_item_quantity($rowId)
{
$product = Cart::instance("cart")->get($rowId);
$qty = $product->qty + 1;
Cart::instance("cart")->update($rowId, $qty);
return redirect()->back();
}
Reduce Quantity Function (`CartController.php`)
public function reduce_item_quantity($rowId)
{
$product = Cart::instance("cart")->get($rowId);
$qty = $product->qty - 1;
Cart::instance("cart")->update($rowId, $qty);
return redirect()->back();
}
2. Define Routes
Define two new PUT routes in `web.php` to map the increase and decrease requests to the respective controller functions.
Route::put("/cart/increase-qunatity/{rowId}",[CartController::class,"increase_item_quantity"])->name("cart.qty.increase");
Route::put("/cart/reduce-qunatity/{rowId}",[CartController::class,"reduce_item_quantity"])->name("cart.qty.decrease");
3. Update Cart View (`cart.blade.php`)
Update the quantity control area in `cart.blade.php` to replace the static input with two separate forms (one for the "+" button and one for the "-" button). Each form submits a PUT request to the correct route, passing the item's`rowId` in the URL.
<!-- Inside the table row loop for each cart item ($item) -->
<td class="product-quantity">
<div class="product-quantity d-inline-flex">
<!-- Decrease Quantity Form -->
<form method="POST" action="{{ route("cart.qty.decrease", ["rowId" => $item->rowId]) }}">
@csrf
@method("PUT")
<button type="submit" class="sub">
-
</button>
</form>
<!-- Quantity Display (Read-only) -->
<input type="text" name="quantity" value="{{ $item->qty }}" readonly />
<!-- Increase Quantity Form -->
<form method="POST" action="{{ route("cart.qty.increase", ["rowId" => $item->rowId]) }}">
@csrf
@method("PUT")
<button type="submit" class="add">
+
</button>
</form>
</div>
</td>
4. Testing the Functionality
After implementing the changes, test the functionality:
- Clicking the "+" button should increase the item quantity by one and update the subtotal and total prices.
- Clicking the "-" button should decrease the item quantity by one and update the prices.
- If the quantity is reduced to zero by clicking the "-" button while the count is 1, the item should be automatically removed from the cart.
This completes the process for updating the cart quantity. The next video will cover deleting and clearing products from the cart.
