Laravel Shopping Cart Development Tutorial – Laravel 10

by

Laravel Shopping Cart Development – In this article, we will guide you through the process of adding a shopping cart functionality to your Laravel 10 application.

To get started, we will be using Laravel Breeze for authentication and Tailwind CSS for styling. Our tutorial will cover everything from adding a “add to cart” button to removing and editing cart items.

It’s important to note that this tutorial is compatible with any version of Laravel, including Laravel 5, 6, 7, 8, 9 and of course, Laravel 10. We encourage you to try it out and let us know your thoughts in the comment section below.

Steps for Laravel Shopping Cart Development:

  • 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-app

Or, you may create new Laravel projects by globally installing the Laravel installer via Composer:

composer global require laravel/installer
laravel new shopping-cart-app

After 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 serve

Once you have started the Artisan development server, your application will be accessible in your web browser at http://localhost:8000

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 migrate

Step 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 --dev

After 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 dev

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::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"

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 the Product model with migration:

php artisan make:model Product --migration

A 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 the 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',
    ];
}

Leave a Comment