Filament: Simple E-Shop with Bootstrap Front Page

Demonstrates how to use Filament as admin panel for products/categories with a totally separate front-facing website based on Bootstrap CSS.

Screenshot 2023-10-04 at 09.34.03

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.

protected function price(): Attribute
{
return Attribute::make(
get: fn($value) => $value / 100,
set: fn($value) => $value * 100,
);
}
 
protected function priceBeforeDiscount(): Attribute
{
return Attribute::make(
get: fn($value) => $value / 100,
set: fn($value) => $value * 100,
);
}

To upload images for a product, we use the official plugin for spatie/laravel-medialibrary package. The form field code looks like...

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 50 Premium Examples for $99 Only Project Examples for $59