Simple E-Shop with Bootstrap Front Page

Filament 4
Also available in Filament 3 version

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 153 Premium Examples for $99