In this tutorial, we will learn about how to make a shopping cart in laravel 9. if you creating an eCommerce project then you need to implement in cart functionality.
Step 1: Install Laravel 9
composer create-project --prefer-dist laravel/laravel laravel_cartcd laravel_cartStep 2: Connecting App to Database
Next step, we will set the database credentials in the application. Let’s open your project .env file and set the database credentials here.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_cart
DB_USERNAME=root
DB_PASSWORD=root@123Step 3: Setup laravelshoppingcart package
composer require "darryldecode/cart"
Open config/app.php and add this line to your Service Providers Array.
Darryldecode\Cart\CartServiceProvider::class
Open config/app.php and add this line to your Aliases
'Cart' => Darryldecode\Cart\Facades\CartFacade::class
Optional configuration file (useful if you plan to have full control)
php artisan vendor:publish --provider="Darryldecode\Cart\CartServiceProvider" --tag="config"
Create Product Model with Migration
php artisan make:model Product -m
product migration file
<?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');
$table->double('price');
$table->text('description');
$table->string('image');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('products');
}
}Product model file
<?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',
'image',
'description',
];
}Run migrate code
php artisan migrateCreate Product Seeder
php artisan make:seeder ProductSeeder
Now add dummy data in the seeder
<?php
namespace Database\Seeders;
use App\Models\Product;
use Illuminate\Database\Seeder;
class ProductSeeder extends Seeder
{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
Product::create([
'name' => 'Watch',
'price' => 200,
'description' => 'Apple watch',
'image' => 'https://images.unsplash.com/photo-1542496658-e33a6d0d50f6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80'
]);
Product::create([
'name' => 'Bag',
'price' => 100,
'description' => 'Apple Bag',
'image' => 'https://images.unsplash.com/photo-1554342872-034a06541bad?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80'
]);
Product::create([
'name' => 'perfume',
'price' => 150,
'description' => 'Apple Perfume',
'image' => 'https://images.unsplash.com/photo-1523293182086-7651a899d37f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80'
]);
Product::create([
'name' => 'coffee',
'price' => 100,
'description' => 'Cold Coffee',
'image' => 'https://images.unsplash.com/photo-1568649929103-28ffbefaca1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=750&q=80'
]);
}
}Run seeder command:
php artisan db:seed --class=ProductSeeder
Now create controller and routes
php artisan make:controller ProductController
And
php artisan make:controller CartController
Create Routes in web.php
<?php
use App\Http\Controllers\CartController;
use App\Http\Controllers\ProductController;
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| 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, 'productList'])->name('products.list');
Route::get('cart', [CartController::class, 'cartList'])->name('cart.list');
Route::post('cart', [CartController::class, 'addToCart'])->name('cart.store');
Route::post('update-cart', [CartController::class, 'updateCart'])->name('cart.update');
Route::post('remove', [CartController::class, 'removeCart'])->name('cart.remove');
Route::post('clear', [CartController::class, 'clearAllCart'])->name('cart.clear');Add Code Logic In Controller
app/Http/Controllers/ProductController.php
<?php
namespace App\Http\Controllers;
use App\Models\Product;
use Illuminate\Http\Request;
class ProductController extends Controller
{
public function productList()
{
$products = Product::all();
return view('products', compact('products'));
}
} app/Http/Controllers/CartController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class CartController extends Controller
{
public function cartList()
{
$cartItems = \Cart::getContent();
// dd($cartItems);
return view('cart', compact('cartItems'));
}
public function addToCart(Request $request)
{
\Cart::add([
'id' => $request->id,
'name' => $request->name,
'price' => $request->price,
'quantity' => $request->quantity,
'attributes' => array(
'image' => $request->image,
)
]);
session()->flash('success', 'Product is Added to Cart Successfully !');
return redirect()->route('cart.list');
}
public function updateCart(Request $request)
{
\Cart::update(
$request->id,
[
'quantity' => [
'relative' => false,
'value' => $request->quantity
],
]
);
session()->flash('success', 'Item Cart is Updated Successfully !');
return redirect()->route('cart.list');
}
public function removeCart(Request $request)
{
\Cart::remove($request->id);
session()->flash('success', 'Item Cart Remove Successfully !');
return redirect()->route('cart.list');
}
public function clearAllCart()
{
\Cart::clear();
session()->flash('success', 'All Item Cart Clear Successfully !');
return redirect()->route('cart.list');
}
}
Create View Files
resources/views/layouts/frontend.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Add to cart</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="bg-white">
<header>
<div class="container px-6 py-3 mx-auto">
<div class="flex items-center justify-between">
<div class="flex items-center justify-end w-full">
<button" class="mx-4 text-gray-600 focus:outline-none sm:mx-0">
</button>
</div>
</div>
<nav class="p-6 mt-4 text-white bg-pink-300 sm:flex sm:justify-center sm:items-center">
<div class="flex items-center flex-shrink-0 text-white mr-6">
<svg class="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/></svg>
<span class="font-semibold text-xl tracking-tight">Laravel 9 Shopping Cart</span>
</div>
<div class="flex flex-col sm:flex-row">
<a class="mt-3 hover:underline sm:mx-3 sm:mt-0" href="/">Home</a>
<a class="mt-3 hover:underline sm:mx-3 sm:mt-0" href="{{ route('products.list')}}">Shop</a>
<a href="{{ route('cart.list') }}" class="flex items-center">
<svg class="w-5 h-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
{{ Cart::getTotalQuantity()}}
</a>
</div>
</nav>
</div>
</header>
<main class="my-8">
@yield('content')
</main>
</div>
</body>
</html>resources/views/products.blade.php
Run command
touch resources/views/products.blade.php@extends('layouts.frontend')
@section('content')
<div class="container px-6 mx-auto">
<h3 class="text-2xl font-medium text-gray-700">Product List</h3>
<div class="grid grid-cols-1 gap-6 mt-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
@foreach ($products as $product)
<div class="w-full max-w-sm mx-auto overflow-hidden rounded-md shadow-md">
<img src="{{ url($product->image) }}" alt="" class="w-full max-h-60">
<div class="flex items-end justify-end w-full bg-cover">
</div>
<div class="px-5 py-3">
<h3 class="text-gray-700 uppercase">{{ $product->name }}</h3>
<span class="mt-2 text-gray-500">${{ $product->price }}</span>
<form action="{{ route('cart.store') }}" method="POST" enctype="multipart/form-data">
@csrf
<input type="hidden" value="{{ $product->id }}" name="id">
<input type="hidden" value="{{ $product->name }}" name="name">
<input type="hidden" value="{{ $product->price }}" name="price">
<input type="hidden" value="{{ $product->image }}" name="image">
<input type="hidden" value="1" name="quantity">
<button class="px-4 py-2 text-white bg-blue-800 rounded">Add To Cart</button>
</form>
</div>
</div>
@endforeach
</div>
</div>
@endsectionresources/views/cart.blade.php
Run command
touch resources/views/cart.blade.php@extends('layouts.frontend')
@section('content')
<main class="my-8">
<div class="container px-6 mx-auto">
<div class="flex justify-center my-6">
<div class="flex flex-col w-full p-8 text-gray-800 bg-white shadow-lg pin-r pin-y md:w-4/5 lg:w-4/5">
@if ($message = Session::get('success'))
<div class="p-4 mb-3 bg-green-400 rounded">
<p class="text-green-800">{{ $message }}</p>
</div>
@endif
<h3 class="text-3xl text-bold">Cart List</h3>
<div class="flex-1">
<table class="w-full text-sm lg:text-base" cellspacing="0">
<thead>
<tr class="h-12 uppercase">
<th class="hidden md:table-cell"></th>
<th class="text-left">Name</th>
<th class="pl-5 text-left lg:text-right lg:pl-0">
<span class="lg:hidden" title="Quantity">Qtd</span>
<span class="hidden lg:inline">Quantity</span>
</th>
<th class="hidden text-right md:table-cell"> price</th>
<th class="hidden text-right md:table-cell"> Remove </th>
</tr>
</thead>
<tbody>
@foreach ($cartItems as $item)
<tr>
<td class="hidden pb-4 md:table-cell">
<a href="#">
<img src="{{ $item->attributes->image }}" class="w-20 rounded" alt="Thumbnail">
</a>
</td>
<td>
<a href="#">
<p class="mb-2 md:ml-4">{{ $item->name }}</p>
</a>
</td>
<td class="justify-center mt-6 md:justify-end md:flex">
<div class="h-10 w-28">
<div class="relative flex flex-row w-full h-8">
<form action="{{ route('cart.update') }}" method="POST">
@csrf
<input type="hidden" name="id" value="{{ $item->id}}" >
<input type="number" name="quantity" value="{{ $item->quantity }}"
class="w-6 text-center bg-gray-300" />
<button type="submit" class="px-2 pb-2 ml-2 text-white bg-blue-500">update</button>
</form>
</div>
</div>
</td>
<td class="hidden text-right md:table-cell">
<span class="text-sm font-medium lg:text-base">
${{ $item->price }}
</span>
</td>
<td class="hidden text-right md:table-cell">
<form action="{{ route('cart.remove') }}" method="POST">
@csrf
<input type="hidden" value="{{ $item->id }}" name="id">
<button class="px-4 py-2 text-white bg-red-600">x</button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
<div>
Total: ${{ Cart::getTotal() }}
</div>
<div>
<form action="{{ route('cart.clear') }}" method="POST">
@csrf
<button class="px-6 py-2 text-red-800 bg-red-300">Remove All Cart</button>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
@endsection
Run server,
php artisan serve