Hello dev, Today we are going to create laravel 9 shopping cart. This tutorial will cover example on laravel 9 shopping cart. We will explain adding shopping add to cart button.
We are going to create laravel 9 shopping cart tutorial and example with laravel breeze for auth with tailwind css for styling. We are going to add the functionality to add to cart, remove from cart, edit cart items etc.
This tutorial will going to work with any version of laravel 5, laravel 6, laravel 7, laravel 8 and laravel 9. Please try and let us know in the comment section.
Also Read: Laravel Add Watermark on Images
Steps for Laravel 9 Shopping Cart:
- Step 1: Create Laravel Project
- Step 2: Configure Database
- Step 3: Install Laravel Breeze
- Step 4: Setup darryldecode/cart Package
- Step 5: Create Product Model with Migration
- Step 6: Create Product Seeder
- Step 7: Create Product Controller
- Step 8: Create Product Routes
- Step 9: Create Product Blade View Files
- Step 10: Testing
Step 1: Create Laravel Project
Before creating your first Laravel project, you should ensure that your local machine has PHP and Composer installed. If you are developing on macOS, PHP and Composer can be installed via Homebrew. In addition, we recommend installing Node and NPM.
After you have installed PHP and Composer, you may create a new Laravel project via the Composer create-project command:
composer create-project laravel/laravel shopping-cart-appOr, you may create new Laravel projects by globally installing the Laravel installer via Composer:
composer global require laravel/installer
laravel new shopping-cart-appAfter the project has been created, start Laravel’s local development server using the Laravel’s Artisan CLI serve command:
cd shopping-cart-app
php artisan serveOnce you have started the Artisan development server, your application will be accessible in your web browser at http://localhost:8000.
Also Read: How to Check Date is Today’s Date or not in Laravel Carbon?
Step 2: Configure Database
Now that you have created your Laravel application, you probably want to store some data in a database. By default, your application’s .env configuration file specifies that Laravel will be interacting with a MySQL database and will access the database at 127.0.0.1. If you are developing on macOS and need to install MySQL, Postgres, or Redis locally, you may find it convenient to utilize DBngin.
Next, update your .env configuration file to use Laravel’s MySQL database driver. You may remove the other database configuration options:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=shopping-cart
DB_USERNAME=root
DB_PASSWORD= Once you have configured your MySQL database, you may run your application’s database migrations, which will create your application’s database tables:
php artisan migrateStep 3: Install Laravel Breeze
Laravel Breeze is a minimal, simple implementation of all of Laravel’s authentication features, including login, registration, password reset, email verification, and password confirmation. Laravel Breeze’s default view layer is made up of simple Blade templates styled with Tailwind CSS. Or, Breeze can scaffold your application using Vue or React and Inertia.
Breeze provides a wonderful starting point for beginning a fresh Laravel application and is also a great choice for projects that plan to take their Blade templates to the next level with Laravel Livewire.
Once you have created a new Laravel application, you may install Laravel Breeze using Composer:
composer require laravel/breeze --devAfter Composer has installed the Laravel Breeze package, you may run the breeze:install Artisan command. This command publishes the authentication views, routes, controllers, and other resources to your application. Laravel Breeze publishes all of its code to your application so that you have full control and visibility over its features and implementation.
The default Breeze “stack” is the Blade stack, which utilizes simple Blade templates to render your application’s frontend. The Blade stack may be installed by invoking the breeze:install command with no other additional arguments. After Breeze’s scaffolding is installed, you should also compile your application’s frontend assets:
php artisan breeze:install
php artisan migrate
npm install
npm run devAlso Read: How to Get All env Variables in Laravel?
Step 4: Setup darryldecode/cart Package
Install the package through Composer.
composer require "darryldecode/cart"Open config/app.php and add this line to your Service Providers Array.
Darryldecode\Cart\CartServiceProvider::classOpen config/app.php and add this line to your Aliases
'Cart' => Darryldecode\Cart\Facades\CartFacade::classOptional configuration file (useful if you plan to have full control)
php artisan vendor:publish --provider="Darryldecode\Cart\CartServiceProvider" --tag="config"Step 5: Create Product Model with Migration
To get started, let’s create an Eloquent model. Models typically live in the app\Models directory and extend the Illuminate\Database\Eloquent\Model class. You may use the make:model Artisan command to generate a new model:
If you would like to generate a database migration when you generate the model, you may use the --migration or -m option:
Run the following command to create product model with migration
php artisan make:model Product --migrationA migration class contains two methods: up and down. The up method is used to add new tables, columns, or indexes to your database, while the down method should reverse the operations performed by the up method.
Update the product migration file create_products_table.php inside database/migrations folder.
<?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('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');
}
};
Also update Product Modal file App/Modals/Product.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',
'image',
'description',
];
}
Also Read: Laravel Pagination Tutorial
Step 6: Create Product Seeder
Laravel includes the ability to seed your database with data using seed classes. All seed classes are stored in the database/seeders directory. By default, a DatabaseSeeder class is defined for you. From this class, you may use the call method to run other seed classes, allowing you to control the seeding order.
To create a product dummy data we are going to create a product seeder. To generate a seeder, execute the make:seeder Artisan command. All seeders generated by the framework will be placed in the database/seeders directory:
php artisan make:seeder ProductSeederNow add dummy data in seeder.
database/seeders/ProductSeeder.php
<?php
namespace Database\Seeders;
use App\Models\Product;
use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
class ProductSeeder extends Seeder
{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
$products = [
[
'name' => 'Fesh milk 500ML',
'price' => 250,
'description' => 'lorem ipsum',
'image' => 'https://cdn.pixabay.com/photo/2016/12/06/18/27/milk-1887234__340.jpg'
],
[
'name' => '20 EGGS',
'price' => 6,
'description' => 'lorem ipsum',
'image' => 'https://cdn.pixabay.com/photo/2016/07/23/15/24/egg-1536990__340.jpg'
],
[
'name' => 'WINE 700ML',
'price' => 50,
'description' => 'lorem ipsum',
'image' => 'https://cdn.pixabay.com/photo/2015/11/07/12/00/alcohol-1031713__340.png'
],
[
'name' => 'SPEAKER',
'price' => 12,
'description' => 'lorem ipsum',
'image' => 'https://cdn.pixabay.com/photo/2017/01/06/17/49/honey-1958464__340.jpg'
]
];
Product::insert($products);
}
}
Update the following file database/seeders/DatabaseSeeder.php
<?php
namespace Database\Seeders;
// use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
class DatabaseSeeder extends Seeder
{
/**
* Seed the application's database.
*
* @return void
*/
public function run()
{
$this->call(ProductSeeder::class);
}
}
Now run the migration with seed:
php artisan migrate:fresh --seedthe above command will create a products.
Also Read: Laravel Carbon Time Format AM PM Example Code
Step 7: Create Product Controller
We can use the make:controller Artisan command’s to quickly create a product and cart controller to handle these actions. Run the following code to create ProductController and CartController.
Create Product Controller:
php artisan make:controller ProductControllerThis command will generate a controller at app/Http/Controllers/ProductController.php. Then update the code:
<?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'));
}
}
Create Cart Controller:
php artisan make:controller CartControllerThis command will generate a controller at app/Http/Controllers/CartController.php. Then update the code:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class CartController extends Controller
{
public function cartList()
{
$cartItems = \Cart::getContent();
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');
}
}Also Read: Laravel Change Mail Driver Dynamically Example
Step 8: Create Product Routes
Now we are going to add some products routes. To add a route open routes/web.php and update the code.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\CartController;
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('/', function () {
return view('welcome');
});
Route::get('products', [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');
Route::get('/dashboard', function () {
return view('dashboard');
})->middleware(['auth'])->name('dashboard');
require __DIR__.'/auth.php';Step 9: Create Product Blade View Files
Now update and create the following Blade View Files as follow:
resources/views/layouts/navigation.blade.php
<nav x-data="{ open: false }" class="bg-white border-b border-gray-100">
<!-- Primary Navigation Menu -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex w-full">
<!-- Logo -->
<div class="shrink-0 flex items-center">
<a href="{{ route('dashboard') }}">
<x-application-logo class="block h-10 w-auto fill-current text-gray-600" />
</a>
</div>
<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex justify-between items-center w-full">
<div class="space-x-8 items-center">
<x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
{{ __('Dashboard') }}
</x-nav-link>
<x-nav-link :href="route('products.list')" :active="request()->routeIs('products.list')">
{{ __('Products') }}
</x-nav-link>
</div>
<a href="{{ route('cart.list') }}" class="flex items-center space-x-1">
<svg class="w-5 h-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 36 36"><circle cx="13.5" cy="29.5" r="2.5" fill="currentColor" class="clr-i-solid clr-i-solid-path-1"/><circle cx="26.5" cy="29.5" r="2.5" fill="currentColor" class="clr-i-solid clr-i-solid-path-2"/><path fill="currentColor" d="M33.1 6.39a1 1 0 0 0-.79-.39H9.21l-.45-1.43a1 1 0 0 0-.66-.65L4 2.66a1 1 0 1 0-.59 1.92L7 5.68l4.58 14.47l-1.63 1.34l-.13.13A2.66 2.66 0 0 0 9.74 25A2.75 2.75 0 0 0 12 26h16.69a1 1 0 0 0 0-2H11.84a.67.67 0 0 1-.56-1l2.41-2h15.43a1 1 0 0 0 1-.76l3.2-13a1 1 0 0 0-.22-.85Z" class="clr-i-solid clr-i-solid-path-3"/><path fill="none" d="M0 0h36v36H0z"/></svg>
<span class="text-gray-700">{{ Cart::getTotalQuantity()}}</span>
</a>
</div>
</div>
<!-- Settings Dropdown -->
<div class="hidden sm:flex sm:items-center sm:ml-6">
<x-dropdown align="right" width="48">
<x-slot name="trigger">
<button class="flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out">
<div>{{ Auth::user()->name }}</div>
<div class="ml-1">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</div>
</button>
</x-slot>
<x-slot name="content">
<!-- Authentication -->
<form method="POST" action="{{ route('logout') }}">
@csrf
<x-dropdown-link :href="route('logout')"
onclick="event.preventDefault();
this.closest('form').submit();">
{{ __('Log Out') }}
</x-dropdown-link>
</form>
</x-slot>
</x-dropdown>
</div>
<!-- Hamburger -->
<div class="-mr-2 flex items-center sm:hidden">
<button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
<path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Responsive Navigation Menu -->
<div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">
<div class="pt-2 pb-3 space-y-1">
<x-responsive-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
{{ __('Dashboard') }}
</x-responsive-nav-link>
</div>
<!-- Responsive Settings Options -->
<div class="pt-4 pb-1 border-t border-gray-200">
<div class="px-4">
<div class="font-medium text-base text-gray-800">{{ Auth::user()->name }}</div>
<div class="font-medium text-sm text-gray-500">{{ Auth::user()->email }}</div>
</div>
<div class="mt-3 space-y-1">
<!-- Authentication -->
<form method="POST" action="{{ route('logout') }}">
@csrf
<x-responsive-nav-link :href="route('logout')"
onclick="event.preventDefault();
this.closest('form').submit();">
{{ __('Log Out') }}
</x-responsive-nav-link>
</form>
</div>
</div>
</div>
</nav>
resources/views/products.blade.php
<x-app-layout>
<div class="container px-12 py-8 mx-auto">
<h3 class="text-2xl font-bold text-gray-900">Latest Products</h3>
<div class="h-1 bg-gray-800 w-48"></div>
<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 bg-white 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">
<div class="flex items-center justify-between mb-5">
<h3 class="text-gray-700 uppercase">{{ $product->name }}</h3>
<span class="mt-2 text-gray-500 font-semibold">${{ $product->price }}</span>
</div>
<form action="{{ route('cart.store') }}" method="POST" enctype="multipart/form-data" class="flex justify-end">
@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-1.5 text-white text-sm bg-gray-900 rounded">Add To Cart</button>
</form>
</div>
</div>
@endforeach
</div>
</div>
</x-app-layout>resources/views/cart.blade.php
<x-app-layout>
<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-blue-400 rounded">
<p class="text-white">{{ $message }}</p>
</div>
@endif
<h3 class="text-3xl font-bold">Carts</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" style="width:230px;">
<a href="#">
<img src="{{ $item->attributes->image }}" class="w-[200px] rounded" alt="Thumbnail">
</a>
</td>
<td>
<a href="#">
<p class="mb-2 text-gray-900 font-bold">{{ $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}}" class="" >
<input type="number" name="quantity" value="{{ $item->quantity }}"
class="w-full text-center h-10 text-gray-800 outline-none rounded border border-gray-600 py-3" />
<button class="w-full px-4 mt-1 py-1.5 text-sm rounded shadow text-violet-100 bg-gray-800">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-3 py-1 text-white bg-gray-800 shadow rounded-full">x</button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
<div class="flex justify-between items-center my-5">
<div class="font-semibold text-2xl">Total: ${{ Cart::getTotal() }}</div>
<div>
<form action="{{ route('cart.clear') }}" method="POST">
@csrf
<button class="px-6 py-2 text-sm rounded shadow text-red-100 bg-gray-800">Clear Carts</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</x-app-layout>Also Read: Laravel Mail Send with PDF Attachment Example
Step 10: Testing
Now everything is done. We are going to test our Laravel 9 Shopping Cart Tutorial and Example. Start the laravel server by running the following command.
php artisan serveNow run the NPM to start the VITE JS in new terminal without closing the laravel serve.
npm run devNow open any web browser and open the following link.
http://127.0.0.1:8000/Register a new user and open product page!
Preview:
Conclusion:
Today, We had learn Laravel 9 Shopping Cart Tutorial and Example. Hope this tutorial helped you with learning Laravel 9. If you have any question you can ask us at comment section below. If you like the tutorial please subscribe our YouTube Channel and follow us on social network Facebook and Instagram.
Also Read: How to set CC And BCC Email Address In Laravel Mail?
[…] on successfully added to items to cart, remove from cart etc. There is a tutorial on how to add to cart in laravel you may want to […]