Laravel Turotial - Add Product to Shopping Cart in Laravel 11
Step 1: Create Laravel Project
composer create-project --prefer-dist laravel/laravel laravel-cart
Step 2: Add Database Details
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_cart
DB_USERNAME=root
DB_PASSWORD=
Step 3: Create Model and Migrations
php artisan make:model Book
//app/Models/Book.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Book extends Model
{
use HasFactory;
protected $fillable = [
'name',
'author',
'image',
'price'
];
}
php artisan make:migration create_books_table
Add code into the database/migrations/xxx_create_books_table.php file.
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('books', function (Blueprint $table) {
$table->id();
$table->string("name", 255)->nullable();
$table->text("author")->nullable();
$table->string("image", 255)->nullable();
$table->decimal("price", 6, 2);
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('books');
}
}
To run migrations, you can take help of the Artisan command line tool.
php artisan migrate
Step 4: Populate Records in Database
php artisan make:seed BookSeeder
<?php
namespace Database\Seeders;
use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
use App\Models\Book;
class BookSeeder extends Seeder
{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
$books = [
[
'name' => 'Book1',
'author' => 'Author Name1',
'image' => 'book1.jpg',
'price' => 199
],
[
'name' => 'Book2',
'author' => 'Author Name2',
'image' => 'book2.jpg',
'price' => 299
],
[
'name' => 'Book3',
'author' => 'Author Name3',
'image' => 'book3.jpg',
'price' => 399
]
];
foreach ($books as $key => $value) {
Book::create($value);
}
}
}
Execute command to add sample data in the database.
php artisan db:seed --class=BookSeeder
Step 5: Build Product Controller
php artisan make:controller BookController
//app/Http/Controllers/BookController.php file.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Book;
class BookController extends Controller
{
public function index()
{
$books = Book::all();
return view('products', compact('books'));
}
public function bookCart()
{
return view('cart');
}
public function addBooktoCart($id)
{
$book = Book::findOrFail($id);
$cart = session()->get('cart', []);
if(isset($cart[$id])) {
$cart[$id]['quantity']++;
} else {
$cart[$id] = [
"name" => $book->name,
"quantity" => 1,
"price" => $book->price,
"image" => $book->image
];
}
session()->put('cart', $cart);
return redirect()->back()->with('success', 'Book has been added to cart!');
}
public function updateCart(Request $request)
{
if($request->id && $request->quantity){
$cart = session()->get('cart');
$cart[$request->id]["quantity"] = $request->quantity;
session()->put('cart', $cart);
session()->flash('success', 'Book added to cart.');
}
}
public function deleteProduct(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', 'Book successfully deleted.');
}
}
}
Step 6: Create New Routes
In this step, you will be adding routes in the routes/web.php file.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\BookController;
/*
|--------------------------------------------------------------------------
| 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('/dashboard', [BookController::class, 'index']);
Route::get('/shopping-cart', [BookController::class, 'bookCart'])->name('shopping.cart');
Route::get('/book/{id}', [BookController::class, 'addBooktoCart'])->name('addbook.to.cart');
Route::patch('/update-shopping-cart', [BookController::class, 'updateCart'])->name('update.sopping.cart');
Route::delete('/delete-cart-product', [BookController::class, 'deleteProduct'])->name('delete.cart.product');
Step 7: Create Cart View
Insert code into the resources/views/shop.blade.php file:
<!DOCTYPE html>
<html>
<head>
<title>Laravel Shopping Cart Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div class="container mt-5">
<h2 class="mb-3">Laravel Add To Shopping Cart Example</h2>
<div class="col-12">
<div class="dropdown" >
<a class="btn btn-outline-dark" href="{{ route('shopping.cart') }}">
<i class="fa fa-shopping-cart" aria-hidden="true"></i> Cart <span class="badge text-bg-danger">{{ count((array) session('cart')) }}</span>
</a>
</div>
</div>
</div>
<div class="container mt-4">
@if(session('success'))
<div class="alert alert-success">
{{ session('success') }}
</div>
@endif
@yield('content')
</div>
@yield('scripts')
</body>
</html>
Update following code into the resources/views/products.blade.php file:
@extends('shop')
@section('content')
<div class="row">
@foreach($books as $book)
<div class="col-md-3 col-6 mb-4">
<div class="card">
<img src="{{ $book->image }}" alt="{{ $book->name }}" class="card-img-top">
<div class="card-body">
<h4 class="card-title">{{ $book->name }}</h4>
<p>{{ $book->author }}</p>
<p class="card-text"><strong>Price: </strong> ${{ $book->price }}</p>
<p class="btn-holder"><a href="{{ route('addbook.to.cart', $book->id) }}" class="btn btn-outline-danger">Add to cart</a> </p>
</div>
</div>
</div>
@endforeach
</div>
@endsection
Put the given code inside the resources/views/cart.blade.php file:
@extends('shop')
@section('content')
<table id="cart" class="table table-bordered">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Total</th>
<th></th>
</tr>
</thead>
<tbody>
@php $total = 0 @endphp
@if(session('cart'))
@foreach(session('cart') as $id => $details)
<tr rowId="{{ $id }}">
<td data-th="Product">
<div class="row">
<div class="col-sm-3 hidden-xs"><img src="{{ $details['image'] }}" class="card-img-top"/></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="Subtotal" class="text-center"></td>
<td class="actions">
<a class="btn btn-outline-danger btn-sm delete-product"><i class="fa fa-trash-o"></i></a>
</td>
</tr>
@endforeach
@endif
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-right">
<a href="{{ url('/dashboard') }}" class="btn btn-primary"><i class="fa fa-angle-left"></i> Continue Shopping</a>
<button class="btn btn-danger">Checkout</button>
</td>
</tr>
</tfoot>
</table>
@endsection
@section('scripts')
<script type="text/javascript">
$(".edit-cart-info").change(function (e) {
e.preventDefault();
var ele = $(this);
$.ajax({
url: '{{ route('update.sopping.cart') }}',
method: "patch",
data: {
_token: '{{ csrf_token() }}',
id: ele.parents("tr").attr("rowId"),
},
success: function (response) {
window.location.reload();
}
});
});
$(".delete-product").click(function (e) {
e.preventDefault();
var ele = $(this);
if(confirm("Do you really want to delete?")) {
$.ajax({
url: '{{ route('delete.cart.product') }}',
method: "DELETE",
data: {
_token: '{{ csrf_token() }}',
id: ele.parents("tr").attr("rowId")
},
success: function (response) {
window.location.reload();
}
});
}
});
</script>
@endsection
Step 8: Add Products to Cart
php artisan serve
http://127.0.0.1:8000/dashboard
