Simple E-Shop with Bootstrap Front Page

Filament 4/5
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:

Only This Example

$9

One-time payment

Full source code for Simple E-Shop with Bootstrap Front Page
Downloadable ZIP file with the source code
Lifetime access to this example
GitHub Sign in with GitHub to buy

Sign in first, then complete your $9 checkout.

Best value — all 169 examples

FilamentExamples Membership

$99 /year
or
$199 lifetime
Access to code of all 169 examples
Future new examples and updates included
FilaCheck Pro package licence included
MCP server included
View membership plans

30-day money-back guarantee

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.