Demonstrates how to use Filament as admin panel for products/categories with a totally separate front-facing website based on Bootstrap CSS.
For the admin panel, we have three resources:
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...