TheLazy.Dev
Portfolio GitHub

Blog

Laravel Ecommerce Tutorial: Part 6.1, Creating Products

slimgee

Given Ncube

Posted on June 5, 2023

Laravel Ecommerce Tutorial: Part 6.1, Creating Products

In the previous tutorial we laid down the ground work to allow the shop administrator to add new products, set categories and brands and in this tutorial, we will add the ability to manage products in the ecommerce site. This part of the series will be split in parts as well, with this part only focusing on creating products, the next tutorial will continue the from there

To start with, let's create the models

Models and migrations

We will start by creating the product models and everything else like attributes and variations will follow after this. To create the product models use the following artisan command

php artisan make:model Product -msf --policy
Enter fullscreen mode Exit fullscreen mode

This will create the model, migration, seeder, factory and the policy.

Next, let's generate the controller for this model, like always we will be using resourceful controllers, because they are cool!

php artisan make:controller ProductController --model=Product -R --test
Enter fullscreen mode Exit fullscreen mode

This will give us a nice resourceful controller, form requests and a test file

Before we move to start writing our tests, let's define the product model's migration 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('products', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('slug')->unique();
            $table->string('sku');
            $table->decimal('price', 10);
            $table->decimal('discounted_price', 10)->default(0);
            $table->decimal('cost', 10)->default(0);
            $table->integer('quantity')->default(0);
            $table->boolean('track_quantity')->default(true);
            $table->boolean('sell_out_of_stock')->default(false);
            $table->text('description')->nullable();
            $table->string('status');
            $table->foreignId('category_id')->onDelete('set null');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('products');
    }
};
Enter fullscreen mode Exit fullscreen mode

Now migrate the database

php artisan migrate
Enter fullscreen mode Exit fullscreen mode

After the database is migrated let's continue to configure our product model, first mass assignment, I prefer the guarded route because it's clean and minimalistic, however you are welcome to use the fillable method

/**
 * The attributes that should not be mass assignable
 *
 * @var array
 */
protected $guarded = [];
Enter fullscreen mode Exit fullscreen mode

Let's make sure slugs are generated on the fly with spatie sluggable, start by using the Spatie\Sluggable\HasSlug trait above

public function getSlugOptions(): SlugOptions
{
    return SlugOptions::create()
        ->generateSlugsFrom('name')
        ->saveSlugsTo('slug');
}
Enter fullscreen mode Exit fullscreen mode

Now let's add some relationships, we know that a product belongs to a category and a category has many products. We have a one to many relationship.

Now in our product model, let's define the relationship

/**
 * Get the category that own this product
 *
 * @return BelongsTo
 */
public function category(): BelongsTo
{
    return $this->belongsTo(Category::class);
}
Enter fullscreen mode Exit fullscreen mode

And we do the same in the Category model

/**
 * The products that belong to this category
 * 
 * @return HasMany
 */
public function products(): HasMany
{
    return $this->hasMany(Product::class);
}
Enter fullscreen mode Exit fullscreen mode

Next, register the routes for the products in the web routes file in the admin group

 Route::resource('products', ProductController::class);
Enter fullscreen mode Exit fullscreen mode

This is the part where we start writing tests but like the previous tutorial we won't.

Let's generate the authorization code for this model

php artisan authorizer:permissions:generate -m Product
Enter fullscreen mode Exit fullscreen mode 
php artisan authorizer:policies:generate -m Product --force
Enter fullscreen mode Exit fullscreen mode

Product media

Of course our product needs to have images. For this project, we are going to use Cloudinary, which is a content delivery and digital media management service to store our images

Start by creating an account on Cloudinary

After creating an account, install the laravel sdk using composer

composer require cloudinary-labs/cloudinary-laravel
Enter fullscreen mode Exit fullscreen mode

In the cloudinary dash, copy the config url and add it to your .env file like this

CLOUDINARY_URL=XXXXXX
Enter fullscreen mode Exit fullscreen mode

Next publish it's assets by running artisan vendor:publish then select CloudinaryLabs package. After, that run the migrations.

Now let's tell the product model that we want to use cloudinary to store images by adding the following trait

use CloudinaryLabs\CloudinaryLaravel\MediaAlly;

class Product extends Model
{
    use MediaAlly;
...
Enter fullscreen mode Exit fullscreen mode

Controllers and views

Now that the backend side of this is all set up let's add the controllers and views for the products. As always we use the resourceful architecture for both view and controller

Let's generate the controller

php artisan make:controller ProductController --model=Product -R --test
Enter fullscreen mode Exit fullscreen mode

This will give us a controller and the form requests and a nice starting point.

Let's generate the views while we are here

php artisan make:view admin.products -r
Enter fullscreen mode Exit fullscreen mode

Now that's in place let's add some flesh to this controller starting with create action. We want to select a category a product will belong to during create so we get all categories and include them in the create view like in the snippet below

/**
 * Show the form for creating a new resource.
 *
 * @return Renderable
 */
public function create(): Renderable
{
    return view('admin.products.create', [
        'categories' => Category::all(),
    ]);
}
Enter fullscreen mode Exit fullscreen mode

Now open the admin.products.create view and the following blade code to allow us to create new products.

However this page will have lots of moving parts so I've broken it into digestible bits, first let's load out a skeleton and fill out each section one by one until the whole thing is working.

@extends('layouts.app')

@section('title')
    Add New Product
@endsection

@section('content')
    <section class="section">
        <div class="section-header">
            <div class="section-header-back">
                <a href="{{ route('admin.products.index') }}"
                   class="btn btn-icon"><i class="fas fa-arrow-left"></i></a>
            </div>
            <h1>Create New Product</h1>
            <div class="section-header-breadcrumb">
                <div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
                <div class="breadcrumb-item"><a href="{{ route('admin.products.index') }}">Products</a></div>
                <div class="breadcrumb-item">Create New Product</div>
            </div>
        </div>

        <div class="section-body">
            <h2 class="section-title">Create New Product</h2>

            <p class="section-lead">
                On this page you can create a new product and fill in all fields.
            </p>

            <div class="container">
                <div class="row">
                    <div class="col-12 col-md-7">
                        <div class="card rounded-lg">
                            <div class="card-header">
                                <h4>Basic Info</h4>
                            </div>
                            <div class="card-body">
                                <form class=""
                                      action="{{ route('admin.products.store') }}"
                                      method="post"
                                      id="storeProduct">
                                    @csrf
                                    {{--                                    Basic form fields here --}}
                                </form>
                            </div>
                        </div>

                        <div class="card rounded-lg">
                            <div class="card-header">
                                <h4>Media</h4>
                            </div>
                            <div class="card-body">
                                {{--                            Media form fields here --}}
                            </div>
                        </div>

                        <div class="card rounded-lg">
                            <div class="card-header">
                                <h4>Pricing</h4>
                            </div>
                            <div class="card-body">
                                {{--                            pricing form fields here --}}
                            </div>
                        </div>

                        <div class="card rounded-lg"
                             data-controller="inventory">
                            <div class="card-header">
                                <h4>Inventory</h4>
                            </div>
                            <div class="card-body">
                                {{--         Inventory fields here,  quantity sku and what not                   --}}
                            </div>
                        </div>

                        <div class="card rounded-lg">
                            <div class="card-header">
                                <h4>Variants</h4>
                            </div>
                            <div class="card-body">
                                {{--             Product variation fields here, color and stuff              --}}
                            </div>
                        </div>

                        <div class="card rounded-lg">
                            <div class="card-header">
                                <h4>Search Engine Optimization</h4>
                            </div>
                            <div class="card-body">
                                {{--              SEO Fields here              --}}
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-5">
                        <div class="card rounded-lg">
                            <div class="card-header">
                                <h4>Product status</h4>
                            </div>
                            <div class="card-body">
                                {{--           product status fields here                --}}
                            </div>
                        </div>

                        <div class="card rounded-lg">
                            <div class="card-header">
                                <h4>Product organization</h4>
                            </div>
                            <div class="card-body">
                                {{-- product organization fields here, category, collections, tags, etc --}}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12">
                        <div class="form-group text-right">
                            <input type="submit"
                                   class="btn btn-primary btn-lg"
                                   value="Save"
                                   form="storeProduct">
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
@endsection
Enter fullscreen mode Exit fullscreen mode

This skeletal layout should give you a layout like the one in the image below

So let's start adding fields for the basic info part which is just the product name and the description.

In the admin.products.create view find the comment that says basic info fields here and replace that with the following html snippet

<div class="form-group mb-3">
    <label class="col-form-label"
           for='name'>Name</label>
    <input type="text"
           name="name"
           id='name'
           class="form-control @error('name') is-invalid @enderror"
           value="{{ old('name') }}">

    @error('name')
        <div class="invalid-feedback">
            {{ $message }}
        </div>
    @enderror
</div>

<div class="form-group mb-3">
    <label for='description'
           class="col-form-label">
        Description
    </label>

    <textarea name="description"
              id='description'
              rows="8"
              cols="80"></textarea>
</div>
Enter fullscreen mode Exit fullscreen mode

Save and refresh your browser, notice the description field is just a simple text area. We want to add a rich text editor. We will be using ckeditor in this tutorial, however, you are welcome to use any rich text editor of your choice.

Let's install ckeditor

yarn add @ckeditor/ckeditor5-build-classic
Enter fullscreen mode Exit fullscreen mode

We are going to wrap ckeditor inside a stimulus controller so we just plug and play in our html. Let's create the controller

php artisan stimulus:make ckeditor
Enter fullscreen mode Exit fullscreen mode

Now open the ckeditor_controller.js file and add the following snippet

import { Controller } from '@hotwired/stimulus';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

// Connects to data-controller="ckeditor"
export default class extends Controller {
    connect() {
        ClassicEditor.create(this.element).catch((error) => {
            console.error(error);
        });
    }
}
Enter fullscreen mode Exit fullscreen mode

When this controller is connected to an html element, it creates the ClassicEditor by passing the connected element as the element to replace. Let's connect the controller to our textarea and that's all we need to use a rich text editor

<textarea name="description"
          id='description'
          rows="8"
          cols="80"
          {{ stimulus_controller('ckeditor') }}>{{ old('description') }}</textarea>
Enter fullscreen mode Exit fullscreen mode

By now we have a working rich text editor, You should have a screen that looks like the one below after this.

Let's move to the next bit of our create product form, the media. This one is not as straight forward but we will get there

In short, we will use a package called filepond to upload our images. The idea is that during the create process we temporarily upload the images to the local server then when we actually "create" the product we associate the images with the product and upload them to Cloudinary

Let's make it work, start by installing filepond packages

yarn add filepond filepond-plugin-image-preview filepond-plugin-image-exif-orientation filepond-plugin-image-validate-size filepond-plugin-file-validate-type
Enter fullscreen mode Exit fullscreen mode

After installation is complete, we will need a stimulus controller to wrap all this into a nice API that we can reuse anywhere. Let's make the controller

php artisan stimulus:make filepond
Enter fullscreen mode Exit fullscreen mode

When we upload files via xhr with filepond we will get back the id of the temporary, we store those IDs on an HTML hidden input to submit along with the rest of the fields and then associate those images with the newly created product, wow!

Ok, let's start with the markup, according to filepond documentation we need to define links to /process (upload), revert (cancel file upload) restore (load old or already uploaded images). We will pass these as values to our controller along with an array of already uploaded images.

Since filepond can replace a file input, we need a target as well for the input

Okay let's define our controller as follows

import { Controller } from '@hotwired/stimulus';
import * as FilePond from 'filepond';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';
import FilePondPluginImageValidateSize from 'filepond-plugin-image-validate-size';
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';

import 'filepond/dist/filepond.min.css';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';

FilePond.registerPlugin(
    FilePondPluginImagePreview,
    FilePondPluginImageExifOrientation,
    FilePondPluginImageValidateSize,
    FilePondPluginFileValidateType
);

// Connects to data-controller="filepond"
export default class extends Controller {
    static targets = ['input'];

    static values = {
        process: String,
        restore: String,
        revert: String,
        current: Array,
    };

    connect() {
        const pond = FilePond.create(this.inputTarget, {
            name: 'image',
            credits: false,
            acceptedFileTypes: ['image/png', 'image/jpeg'],
        });
    }
}
Enter fullscreen mode Exit fullscreen mode

Now let's add some markup, In the admin.products.create view in the media card, replace the comment with the following markup

<div class="form-group"
     data-controller="filepond"
     data-filepond-process-value="/"
     data-filepond-restore-value="/"
     data-filepond-revert-value="/"
     data-filepond-current-value="{{ json_encode(old('images', [])) }}">

    <input type="file"
           data-filepond-target="input">
</div>
Enter fullscreen mode Exit fullscreen mode

For now we just have dummy urls because we haven't implemented that yet. If you save and refresh you should be able to upload files but they won't upload to anywhere since we don't have a backend ready to upload files yet.

Your screen should look the one below if you did this correctly

Now let's add the ability to temporarily upload images. Let's generate the controller

php artisan make:controller Admin\\ImageController -r --test --model=Media -R
Enter fullscreen mode Exit fullscreen mode

When prompted to create a new model just say now, we will replace the App\Model\Media class with CloudinaryLabs\CloudinaryLaravel\Model\Media

Edit the StoreMediaRequest with the following to validate the incoming files

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class StoreMediaRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize(): bool
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array<string, mixed>
     */
    public function rules(): array
    {
        return [
            'image' => 'required|image|max:5120',
        ];
    }
}
Enter fullscreen mode Exit fullscreen mode

Then define the controller as follows

<?php

namespace App\Http\Controllers\Admin;

use App\Http\Controllers\Controller;
use App\Http\Requests\StoreMediaRequest;
use CloudinaryLabs\CloudinaryLaravel\CloudinaryEngine;
use CloudinaryLabs\CloudinaryLaravel\Model\Media;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
use Illuminate\Support\Facades\Storage;
use Illuminate\Support\Str;
use Symfony\Component\HttpFoundation\StreamedResponse;

class ImageController extends Controller
{
    /**
     * Store a newly created resource in storage.
     *
     * @param StoreMediaRequest $request
     * @return Response
     */
    public function store(StoreMediaRequest $request)
    {
        $path = $request->validated('image')->store('products');

        return response($path, 200)->header('Content-Type', 'text/plain');
    }

    /**
     * Display the specified resource.
     *
     * @param Request $request
     * @return StreamedResponse
     */
    public function show(Request $request)
    {
        $path = $request->query('path', '');

        if (!Storage::exists($path)) {
            abort(404);
        }

        return Storage::download($path, Str::afterLast($path, '/'), [
            'Content-Disposition' => 'inline',
            'filename' => Str::afterLast($path, '/'),
        ]);
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param Request $request
     * @return Response
     */
    public function destroy(Request $request)
    {
        $media = $request->query('media');

        if (Storage::exists($media)) {
            Storage::delete($media);

            return response()->noContent();
        }

        $media = Media::where('file_url', $media)->firstOrFail();

        resolve(CloudinaryEngine::class)->destroy($media->getFileName());

        $media->delete();

        return response()->noContent();
    }
}
Enter fullscreen mode Exit fullscreen mode

We first, upload the file and return the path in the store method, to show we just return a download response and to destroy we first check if the file exists in file storage and delete it else we delete it from Cloudinary.

Let's add the routes for this controller in the admin route group

Route::post('/images/{path?}', [ImageController::class, 'store'])->name(
    'images.store',
);
Route::get('/images', [ImageController::class, 'show'])->name(
    'images.show',
);
Route::delete('/images', [ImageController::class, 'destroy'])->name(
    'images.destroy',
);
Enter fullscreen mode Exit fullscreen mode

The backend is now ready to upload images let's get back to the stimulus controller on the frontend. First let's replace the dummy link with our newly defined routes

<div class="form-group"
     data-controller="filepond"
     data-filepond-process-value="{{ route('admin.images.store') }}"
     data-filepond-restore-value="{{ route('admin.images.show') }}"
     data-filepond-revert-value="{{ route('admin.images.destroy') }}"
     data-filepond-current-value="{{ json_encode(old('images', [])) }}">

    <input type="file"
           data-filepond-target="input">
</div>
Enter fullscreen mode Exit fullscreen mode

Now let's tell filepond how to upload, revert and restore our images starting with upload. To upload we have to define the process config. In the connect method add the following snippet

let token = document.head.querySelector('meta[name="csrf-token"]');
let submitter = document.querySelector(
    'input[type="submit"][form="storeProduct"]'
);

pond.setOptions({
    allowMultiple: true,
    files: this.currentValue.map((image) => ({
        source: typeof image === 'string' ? image : image.file_url,

        options: {
            type: typeof image === 'string' ? 'limbo' : 'local',
        },
    })),

    server: {
        process: {
            url: this.processValue,
            headers: {
                'X-CSRF-Token': token.content,
            },
        },
    },
});
Enter fullscreen mode Exit fullscreen mode

First

  • we get the CSRF token from the meta element
  • get the submitter, the button that submits the form so we can disable it when other operations are pending
  • then call the pond.setOptions method first allowing multiple files
  • set current files, if the value is a string it means the file hasn't been uploaded to Cloudinary yet so we set type to limbo meaning it's an old image else we set it to local meaning it's an already uploaded file
  • set the server config, the process key setting the url to the value we passed to this controller and setting the CSRF token header

Save the file and refresh your page. You should be able to upload images to your backend right now. Your screen should look something like the one below

Now after uploading the images we get the ID back (file path), we need the ability to submit that file with the rest of the input.To do that we listen for the processfile event and then append markup to the page first we need a template to use and let's add that to as follows. In the media card add the following markup just below the input tag

@foreach (old('images', []) as $image)
    <input data-filepond-target="upload"
           type="hidden"
           name="images[]"
           form="storeProduct"
           value="{{ $image }}">
@endforeach

<template data-filepond-target="template">
    <input data-filepond-target="upload"
           type="hidden"
           name="NAME"
           form="storeProduct"
           value="VALUE">
</template>
Enter fullscreen mode Exit fullscreen mode

First we loop through old images in case we had a validation error or something and set input with name images[] because it's an array and set target to "upload" then we have a template target with the same markup as the input above it.

When a new image is uploaded we just replace the VALUE with the path to new image

pond.on('processfile', (error, event) => {
    const template = this.templateTarget.innerHTML
        .replace('NAME', 'images[]')
        .replace('VALUE', event.serverId);

    this.element.insertAdjacentHTML('beforeend', template);
    submitter.removeAttribute('disabled');
});
Enter fullscreen mode Exit fullscreen mode

We append the piece of HTML to the DOM and remove the disabled attribute from the submit button.

Let's then register the targets to stimulus

static targets = ['input', 'template', 'upload'];
Enter fullscreen mode Exit fullscreen mode

Add these event handlers to disable the submit button when files are uploading to prevent unwanted side effects

pond.on('processfilestart', () => {
    submitter.setAttribute('disabled', true);
});

pond.on('addfilestart', () => {
    submitter.setAttribute('disabled', true);
});

pond.on('addfile', () => {
    submitter.removeAttribute('disabled');
});

pond.on('processfilerevert', () => {
    submitter.removeAttribute('disabled');
});

pond.on('processfileabort', () => {
    submitter.removeAttribute('disabled');
});
Enter fullscreen mode Exit fullscreen mode

Notice the X icon on the image preview that says "tap to undo" let's implement that feature, we are basically undoing the file upload

in the server config add the following key

revert: (uniqueFileId, load, error) => {
    axios
        .delete(`${this.revertValue}?media=${uniqueFileId}`)
        .then((response) => {
            this.uploadTargets.forEach((el) => {
                if (el.value == uniqueFileId) {
                    el.remove();
                }
            });

            load();
        })
        .catch((err) => {
            error({
                type: 'error',
                body: err.message,
                code: err.response?.status,
            });
        });
},
Enter fullscreen mode Exit fullscreen mode

We makea delete request to the server with the file path, after getting a response we then loop the through the html form inputs and remove the one that matches the removed image so it won't be submitted with other fields

Add the restore method to restore the temporary files in case there was a file validation error

restore: (
    uniqueFileId,
    load,
    error,
    progress,
    abort,
    headers
) => {
    axios
        .get(`${this.restoreValue}?path=${uniqueFileId}`, {
            onDownloadProgress: (event) => {
                progress(true, event.loaded, event.total);
            },
            responseType: "blob",
        })
        .then((response) => {
            headers(response.request.getAllResponseHeaders());

            load(response.data);
        })
        .catch((err) => error(err.message));

    // Should expose an abort method so the request can be cancelled
    return {
        abort: () => {
            // User tapped abort, cancel our ongoing actions here

            // Let FilePond know the request has been cancelled
            abort();
        },
    };
},
Enter fullscreen mode Exit fullscreen mode

The remove method to delete already uploaded file say on the edit page

remove: (source, load, error) => {
    axios
        .delete(`${this.revertValue}?media=${source}`)
        .then((response) => {
            load();
        })
        .catch((err) => {
            error({
                type: 'error',
                body: err.message,
                code: err.response?.status,
            });
        });
},
Enter fullscreen mode Exit fullscreen mode

Lastly, we need the ability to load already uploaded files with the load method

load: (source, load, error, progress, abort, headers) => {
    axios
        .get(source, {
            onDownloadProgress: (event) => {
                progress(true, event.loaded, event.total);
            },
            responseType: 'blob',
        })
        .then((response) => {
            headers(response.request.getAllResponseHeaders());

            load(response.data);
        })
        .catch((err) => {
            if (err.response) {
                return error({
                    type: 'error',
                    body: err.response.statusText,
                    code: err.response.status,
                });
            }

            return error({
                type: 'error',
                body: err.message,
                code: 400,
            });
        });

    return {
        abort: () => {
            // User tapped cancel, abort our ongoing actions here

            // Let FilePond know the request has been cancelled
            abort();
        },
    };
},
Enter fullscreen mode Exit fullscreen mode

And with that our media card is complete,we should be able to upload files,undo uploads and delete them.

To add a bit of styling to filepond add this css snippet to your resources/sass/app.scss file

.filepond--item {
    width: calc(50% - 0.5em);
}

@media (min-width: 30em) {
    .filepond--item {
        width: calc(50% - 0.5em);
    }
}

@media (min-width: 50em) {
    .filepond--item {
        width: calc(33.33% - 0.5em);
    }
}
Enter fullscreen mode Exit fullscreen mode

Now add the markup for pricing, in the pricing card, replace the comment with the following snippet

<div class="row mb-3">

    <div class="form-group col-md-6">
        <label class="form-label"
               for='price'>Price</label>

        <div class="input-group">
            <div class="input-group-text">
                $
            </div>

            <input form="storeProduct"
                   type="text"
                   name="price"
                   id='price'
                   placeholder="0.00"
                   class="form-control @error('price') is-invalid @enderror"
                   value="{{ old('price') }}">
            @error('price')
                <div class="invalid-feedback">
                    {{ $message }}
                </div>
            @enderror
        </div>

    </div>

    <div class="form-group col-md-6">
        <label class="form-label"
               for='discounted_price'>Discounted price</label>

        <div class="input-group">
            <div class="input-group-text">
                $
            </div>

            <input form="storeProduct"
                   type="text"
                   name="discounted_price"
                   id='discounted_price'
                   placeholder="0.00"
                   class="form-control @error('compare_price') is-invalid @enderror"
                   value="{{ old('compare_price') }}">
            @error('compare_price')
                <div class="invalid-feedback">
                    {{ $message }}
                </div>
            @enderror
        </div>

    </div>
</div>

<div class="form-group">
    <label class="form-label"
           for='cost'>Cost per item</label>

    <div class="input-group">
        <div class="input-group-text">
            $
        </div>

        <input form="storeProduct"
               type="text"
               name="cost"
               id='cost'
               placeholder="0.00"
               class="form-control @error('cost') is-invalid @enderror"
               value="{{ old('cost') }}">
        @error('cost')
            <div class="invalid-feedback">
                {{ $message }}
            </div>
        @enderror
    </div>

    <span class="text-sm text-secondary d-block mt-2">Customers won't see this</span>

</div>
Enter fullscreen mode Exit fullscreen mode

Jump over to the inventory card and replace the comment with the following snippet

<div class="form-group">
    <label class="form-label"
           for='sku'>SKU</label>

    <input id='sku'
           form="storeProduct"
           type="text"
           name="sku"
           class="form-control @error('sku') is-invalid @enderror"
           value="{{ old('sku') }}">

    @error('sku')
        <div class="invalid-feedback">
            {{ $message }}
        </div>
    @enderror
</div>

<div class="form-group mb-3">
    <label class="custom-switch pl-0">
        <input form="storeProduct"
               checked
               type="checkbox"
               name="track_quantity"
               data-action="input->inventory#toggle"
               class="custom-switch-input @error('track_quantity')
is-invalid
@enderror">
        <span class="custom-switch-indicator"></span>
        <span class="custom-switch-description">Track quantity</span>
    </label>
    @error('track_quantity')
        <div class="invalid-feedback">
            {{ $message }}
        </div>
    @enderror
</div>

<div class="form-group"
     data-inventory-target="checkbox">
    <label class="custom-switch pl-0">
        <input form="storeProduct"
               type="checkbox"
               name="sell_out_of_stock"
               class="custom-switch-input @error('sell_out_of_stock') is-invalid @enderror">
        <span class="custom-switch-indicator"></span>
        <span class="custom-switch-description">Continue selling when out of stock</span>
    </label>
    @error('sell_out_of_stock')
        <div class="invalid-feedback">
            {{ $message }}
        </div>
    @enderror
</div>

<div class="form-group"
     data-inventory-target="quantity">
    <label class="form-label"
           for='quantity'>Quantity</label>

    <input form="storeProduct"
           type="text"
           name="quantity"
           id='quantity'
           class="form-control @error('quantity') is-invalid @enderror"
           value="{{ old('quantity') }}">

    @error('quantity')
        <div class="invalid-feedback">
            {{ $message }}
        </div>
    @enderror
</div>
Enter fullscreen mode Exit fullscreen mode

You may have have noticed the data-inventory-xxx attributes, the card container has the data-controller="inventory".

If the track quantity toggle is turned on, we should display the quantity input field else we hide it and we add that feature using a stimulus controller

php artisan stimulus:make inventory
Enter fullscreen mode Exit fullscreen mode

Open the newly created controller and add the following snippet

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
    static targets = ['quantity', 'checkbox']

    state = true

    toggle(e) {
        this.state = !this.state

        if (this.state) {
            this.quantityTarget.classList.remove('d-none')
            this.checkboxTarget.classList.remove('d-none')
        } else {
            this.quantityTarget.classList.add('d-none')
            this.checkboxTarget.classList.add('d-none')
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

In the product status card replace the comment with the following snippet

<div class="form-group">
    <select form="storeProduct"
            name="status"
            class="form-select @error('status') is-invalid @enderror">
        <option value="draft">Draft</option>
        <option value="review">Review</option>
        <option value="active">Active</option>
    </select>

    @error('status')
        <div class="invalid-feedback">
            {{ $message }}
        </div>
    @enderror
</div>
Enter fullscreen mode Exit fullscreen mode

Finally, in the product organization card replace the comment with the following snippet

<div class="form-group">
    <label class="form-label"
           for='category_id'>Category</label>
    <select form="storeProduct"
            name="category_id"
            id='category_id'
            class="form-select @error('category_id') is-invalid @enderror">
        @foreach ($categories as $category)
            @if ($category->id == old('category_id') || strtolower($category->name) == 'default')
                <option selected
                        value="{{ $category->id }}">{{ $category->name }}</option>
            @else
                <option value="{{ $category->id }}">{{ $category->name }}</option>
            @endif
        @endforeach
    </select>

    @error('category_id')
        <div class="invalid-feedback">
            {{ $message }}
        </div>
    @enderror
</div>
Enter fullscreen mode Exit fullscreen mode

You should have a page that looks the one below

The views are now ready, we need the ability to actually store the products in the database. First thing we need is to implement the StoreProductRequest

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class StoreProductRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize(): bool
    {
        return $this->user()->can('create products');
    }

    /**
     * Prepare input for validation
     *
     * @return void
     */
    protected function prepareForValidation(): void
    {
        $this->merge([
            'track_quantity' =>
                $this->has('track_quantity') &&
                $this->input('track_quantity') == 'on',
            'sell_out_of_stock' =>
                $this->has('sell_out_of_stock') &&
                $this->input('sell_out_of_stock') == 'on',
        ]);
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array<string, mixed>
     */
    public function rules(): array
    {
        return [
            'name' => 'required|string|max:255',
            'description' => 'required|string',
            'sku' => 'nullable|string|unique:products,sku',
            'track_quantity' => 'nullable|boolean',
            'quantity' => 'required_if:track_quantity,true|nullable|int',
            'sell_out_of_stock' => 'required_if:track_quantity,true|boolean',
            'category_id' => 'required|int|exists:categories,id',
            'price' => 'required|numeric',
            'cost' => 'nullable|numeric',
            'discounted_price' => 'nullable|numeric',
            'status' => 'required|string|in:active,draft,review',
            'images' => 'nullable|array',
            'images.*' => 'string',
        ];
    }
}
Enter fullscreen mode Exit fullscreen mode

The prepare for validation method simply makes sure that we get boolean values for the toggle fields.

In the ProductController, implement the store method by adding the following snippet

/**
 * Store a newly created resource in storage.
 *
 * @param StoreProductRequest $request
 * @return RedirectResponse
 * @throws Exception
 */
public function store(StoreProductRequest $request)
{
    $product = Product::create($request->safe()->except(['images']));

    collect($request->validated('images'))->each(function ($image) use (
        $product,
    ) {
        $product->attachMedia(new File(storage_path('app/' . $image)));
        Storage::delete($image);
    });

    return to_route('admin.products.index')->with(
        'success',
        'Product was successfully created',
    );
}
Enter fullscreen mode Exit fullscreen mode

After creating a product, we loop through the images and attach them to the model while storing them on cloudinary, then delete the temporary file from storage

Before we wrap up this post, add the sidebar for products in the layouts.partials.sidebar just below the brands

<li class="nav-item @if (Route::is('admin.products.*')) active @endif">
    <a href="{{ route('admin.products.index') }}"
       class="nav-link">
        <i class="fas fa-shopping-basket"></i> <span>Products</span>
    </a>
</li>
Enter fullscreen mode Exit fullscreen mode

Then tell the product controller's index action to render the correct file

/**
 * Display a listing of the resource.
 *
 * @return Renderable
 */
public function index()
{
    $products = Product::paginate();

    return view('admin.products.index', [
        'products' => $products,
    ]);
}
Enter fullscreen mode Exit fullscreen mode

This post became longer than I expected, so I decide to split it into parts, In the upcoming post, we will add the ability to view all products in a table, sort, search and what not. In the next one after that, we add the ability to edit products then delete and so on

This is part 6 of the Laravel Ecommerce Tutorial series, make sure to check the previous tutorials if you missed them.

To make sure you don't miss the next part in this series when it's out, subscribe to the newsletter below and get notified when it's published!

💖 💪 🙅 🚩
slimgee
Given Ncube

Posted on June 5, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

I am purposefully super nice to AI because I imagine they are trained on data where nice people get better help. Doing this, though, has an existential uneasiness to it.
ai I am purposefully super nice to AI because I imagine they are trained on data where nice people get better help. Doing this, though, has an existential uneasiness to it.

November 28, 2024

If you're a beginner, definitely check this open source guide. I've explained almost everything you need to know.
undefined If you're a beginner, definitely check this open source guide. I've explained almost everything you need to know.

November 28, 2024

The best way to get better at writing code is...
development The best way to get better at writing code is...

November 28, 2024

AI Innovations at Microsoft Ignite 2024 What You Need to Know (Part 2)
githubcopilot AI Innovations at Microsoft Ignite 2024 What You Need to Know (Part 2)

November 29, 2024

Buying nothing, or how digital art is disappearing
discuss Buying nothing, or how digital art is disappearing

November 28, 2024