Laravel 11 Product Add to Cart Example
Hello, laravel web developers! In this article, we'll see how to add products to a cart in laravel 11. Here, we'll create a product add to cart example in laravel 11. In this example, I'll show you how to create an 'Add to Cart' function using sessions and AJAX.
We'll start by creating a product table and displaying a list of products with their prices. Each product will have an 'Add to Cart' button, allowing users to add items to their shopping cart. We'll also create a cart page where users can update product quantities or remove items from the cart.
How to Add Product to Cart in Laravel 11
Step 1: Install Laravel 11 Application
In this step, we'll install the laravel 11 application using the following command.
composer create-project laravel/laravel laravel-11-example
Step 2: Create Migration and Model
Next, we'll create a migration using the following command.
php artisan make:migration create_products_table
Migration:
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateProductsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('products', function (Blueprint $table) {
$table->id();
$table->string("name", 255)->nullable();
$table->text("description")->nullable();
$table->string("image", 255)->nullable();
$table->decimal("price", 6, 2);
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('products');
}
}
Now, migrate the table into the database using the following command.
php artisan migrate
Then, we'll create a model using the following command.
php artisan make:model Product
app/Models/Products.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
use HasFactory;
protected $fillable = [
'name', 'price', 'description', 'image'
];
}
Step 3: Create Product Seeder
Now, we'll create some dummy records for the products.
php artisan make:seed ProductSeeder
database/seeders/ProductSeeder.php
<?php
namespace Database\Seeders;
use Illuminate\Database\Seeder;
use App\Models\Product;
class ProductSeeder extends Seeder
{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
$products = [
[
'name' => 'Sony Xperia Z5',
'description' => 'Sony Brand',
'image' => 'https://dummyimage.com/200x300/000/fff&text=Sony',
'price' => 300
],
[
'name' => 'OnePlus 9 Pro',
'description' => 'OnePlus Brand',
'image' => 'https://dummyimage.com/200x300/000/fff&text=OnePlus',
'price' => 700
],
[
'name' => 'Huawei P40 Pro',
'description' => 'Huawei Brand',
'image' => 'https://dummyimage.com/200x300/000/fff&text=Huawei',
'price' => 450
],
[
'name' => 'Xiaomi Mi 11',
'description' => 'Xiaomi Brand',
'image' => 'https://dummyimage.com/200x300/000/fff&text=Xiaomi',
'price' => 350
]
];
foreach ($products as $key => $value) {
Product::create($value);
}
}
}
Run the seeder using the following command.
php artisan db:seed --class=ProductSeeder
Step 4: Define Routes
Now, define the route to the web.php file.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ProductController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', [ProductController::class, 'index']);
Route::get('cart', [ProductController::class, 'cart'])->name('cart');
Route::get('add-to-cart/{id}', [ProductController::class, 'addToCart'])->name('add.to.cart');
Route::patch('update-cart', [ProductController::class, 'update'])->name('update.cart');
Route::delete('remove-from-cart', [ProductController::class, 'remove'])->name('remove.from.cart');
Step 5: Create Controller
Then, we'll create a controller and add the functions into that file.
app/Http/Controllers/ProductController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Product;
class ProductController extends Controller
{
/**
* Write code on Method
*
* @return response()
*/
public function index()
{
$products = Product::all();
return view('products', compact('products'));
}
/**
* Write code on Method
*
* @return response()
*/
public function cart()
{
return view('cart');
}
/**
* Write code on Method
*
* @return response()
*/
public function addToCart($id)
{
$product = Product::findOrFail($id);
$cart = session()->get('cart', []);
if(isset($cart[$id])) {
$cart[$id]['quantity']++;
} else {
$cart[$id] = [
"name" => $product->name,
"quantity" => 1,
"price" => $product->price,
"image" => $product->image
];
}
session()->put('cart', $cart);
return redirect()->back()->with('success', 'Product added to cart successfully!');
}
/**
* Write code on Method
*
* @return response()
*/
public function update(Request $request)
{
if($request->id & $request->quantity){
$cart = session()->get('cart');
$cart[$request->id]["quantity"] = $request->quantity;
session()->put('cart', $cart);
session()->flash('success', 'Cart updated successfully');
}
}
/**
* Write code on Method
*
* @return response()
*/
public function remove(Request $request)
{
if($request->id) {
$cart = session()->get('cart');
if(isset($cart[$request->id])) {
unset($cart[$request->id]);
session()->put('cart', $cart);
}
session()->flash('success', 'Product removed successfully');
}
}
}
Step 6: Create Blade Files
Then, we'll create a blade file for the product to add to the cart.
resources/views/layout.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 11 Product Add to Cart Example - Techsolutionstuff</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<style type="text/css">
.dropdown{
float:right;
padding-right: 30px;
}
.dropdown .dropdown-menu{
padding:20px;
top:30px !important;
width:350px !important;
left:0px !important;
box-shadow:0px 5px 30px black;
}
.dropdown-menu:before{
content: " ";
position:absolute;
top:-20px;
right:50px;
border:10px solid transparent;
border-bottom-color:#fff;
}
.fs-8{
font-size: 13px;
}
</style>
</head>
<body>
<div class="container">
<div class="row navbar-light bg-light pt-2 pb-2">
<div class="col-lg-10">
<h3 class="mt-2">Laravel 11 Product Add to Cart Example - Techsolutionstuff</h3>
</div>
<div class="col-md-2 text-right main-section">
<div class="dropdown">
<button type="button" class="btn btn-info dropdown-toggle mt-1" data-bs-toggle="dropdown">
<i class="fa fa-shopping-cart" aria-hidden="true"></i> Cart <span class="badge badge-pill badge-danger">{{ count((array) session('cart')) }}</span>
</button>
<div class="dropdown-menu">
<div class="row total-header-section">
<div class="col-lg-6 col-sm-6 col-6">
<i class="fa fa-shopping-cart" aria-hidden="true"></i> <span class="badge badge-pill badge-danger">{{ count((array) session('cart')) }}</span>
</div>
@php $total = 0 @endphp
@foreach((array) session('cart') as $id => $details)
@php $total += $details['price'] * $details['quantity'] @endphp
@endforeach
<div class="col-md-6 text-end">
<p><strong>Total: <span class="text-info">${{ $total }}</span></strong></p>
</div>
</div>
@if(session('cart'))
@foreach(session('cart') as $id => $details)
<div class="row cart-detail pb-3 pt-2">
<div class="col-lg-4 col-sm-4 col-4">
<img src="{{ $details['image'] }}" class="img-fluid" />
</div>
<div class="col-lg-8 col-sm-8 col-8 cart-detail-product">
<p class="mb-0">{{ $details['name'] }}</p>
<span class="fs-8 text-info"> Price: ${{ $details['price'] }}</span> <br/>
<span class="fs-8 fw-lighter"> Quantity: {{ $details['quantity'] }}</span>
</div>
</div>
@endforeach
@endif
<div class="text-center">
<a href="{{ route('cart') }}" class="btn btn-info">View all</a>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-md-10 offset-md-1">
@if(session('success'))
<div class="alert alert-success">
{{ session('success') }}
</div>
@endif
@yield('content')
</div>
</div>
</div>
@yield('scripts')
</body>
</html>
resources/views/products.blade.php
@extends('layout')
@section('content')
<div class="row mt-4">
@foreach($products as $product)
<div class="col-md-3">
<div class="card text-center">
<img src="{{ $product->image }}" alt="" class="card-img-top">
<div class="caption card-body">
<h4>{{ $product->name }}</h4>
<p>{{ $product->description }}</p>
<p><strong>Price: </strong> $ {{ $product->price }}</p>
<a href="{{ route('add.to.cart', $product->id) }}" class="btn btn-warning btn-block text-center" role="button">Add to cart</a>
</div>
</div>
</div>
@endforeach
</div>
@endsection
resources/views/cart.blade.php
@extends('layout')
@section('content')
<table id="cart" class="table table-hover table-condensed">
<thead>
<tr>
<th style="width:50%">Product</th>
<th style="width:10%">Price</th>
<th style="width:8%">Quantity</th>
<th style="width:22%" class="text-center">Subtotal</th>
<th style="width:10%"></th>
</tr>
</thead>
<tbody>
@php $total = 0 @endphp
@if(session('cart'))
@foreach(session('cart') as $id => $details)
@php $total += $details['price'] * $details['quantity'] @endphp
<tr data-id="{{ $id }}">
<td data-th="Product">
<div class="row">
<div class="col-sm-3 hidden-xs"><img src="{{ $details['image'] }}" width="100" height="150" class="img-responsive"/></div>
<div class="col-sm-9">
<h4 class="nomargin">{{ $details['name'] }}</h4>
</div>
</div>
</td>
<td data-th="Price">${{ $details['price'] }}</td>
<td data-th="Quantity">
<input type="number" value="{{ $details['quantity'] }}" class="form-control quantity update-cart" />
</td>
<td data-th="Subtotal" class="text-center">${{ $details['price'] * $details['quantity'] }}</td>
<td class="actions" data-th="">
<button class="btn btn-danger btn-sm remove-from-cart"><i class="fa fa-trash-o"></i></button>
</td>
</tr>
@endforeach
@endif
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-right"><h3><strong>Total ${{ $total }}</strong></h3></td>
</tr>
<tr>
<td colspan="5" class="text-right">
<a href="{{ url('/') }}" class="btn btn-warning"><i class="fa fa-angle-left"></i> Continue Shopping</a>
<button class="btn btn-success">Checkout</button>
</td>
</tr>
</tfoot>
</table>
@endsection
@section('scripts')
<script type="text/javascript">
$(".update-cart").change(function (e) {
e.preventDefault();
var ele = $(this);
$.ajax({
url: '{{ route('update.cart') }}',
method: "patch",
data: {
_token: '{{ csrf_token() }}',
id: ele.parents("tr").attr("data-id"),
quantity: ele.parents("tr").find(".quantity").val()
},
success: function (response) {
window.location.reload();
}
});
});
$(".remove-from-cart").click(function (e) {
e.preventDefault();
var ele = $(this);
if(confirm("Are you sure want to remove?")) {
$.ajax({
url: '{{ route('remove.from.cart') }}',
method: "DELETE",
data: {
_token: '{{ csrf_token() }}',
id: ele.parents("tr").attr("data-id")
},
success: function (response) {
window.location.reload();
}
});
}
});
</script>
@endsection
Step 7: Run the Laravel 11 Application
Now, run the laravel 11 application using the following command.
php artisan serve
You might also like:
- Read Also: How To Generate Invoice PDF In Laravel 9
- Read Also: How to Add Page Numbers to PDF in Laravel 11
- Read Also: Laravel 11 PayPal Payment Gateway Integration
- Read Also: How to Export CSV File using Queue in Laravel 11
