Back to School: coupon SCHOOL25 for 40% off Yearly/Lifetime membership! Read more here

Simple E-Shop with Bootstrap Front Page

Filament 4

A demonstration of using Filament as an admin panel for products and categories alongside a separate front-facing website built with Bootstrap CSS.

keOBtdpGIt1EorYFeHIzQrcE3ynZHN-metaU2NyZWVuc2hvdCAyMDIzLTEwLTA0IGF0IDA5LjM0LjAzLnBuZw==-

Get the Source Code:

How it works

For the admin panel, we have three resources:

  • Categories
  • Products
  • Orders

Categories resource only has a name and slug fields. Slug is auto-generated when the focus is removed from the name input. Here's how the form looks:

Forms\Components\TextInput::make('name')
->required()
->live(onBlur: true)
->afterStateUpdated(fn (string $operation, $state, Forms\Set $set) => $operation === 'create' ? $set('slug', Str::slug($state)) : null),
Forms\Components\TextInput::make('slug')
->disabled()
->dehydrated()
->required()
->unique(Category::class, 'slug', ignoreRecord: true),

Product Resource has a name and auto-generated slug inputs, description as simple textarea. Price and price before discount number inputs with a step of 0.01. Here is how we are setting the step for price inputs.

Forms\Components\TextInput::make('price')
->required()
->numeric()
->step(0.01),
Forms\Components\TextInput::make('price_before_discount')
->numeric()
->step(0.01),

Prices are saved in DB in cents. To achieve it automatically, we are using accessors and mutators. This is how they look in the Product Model.

The FULL tutorial is available after the purchase: in the Readme file of the official repository you would get invited to.
Get the Source Code: All 149 Premium Examples for $99