A demonstration of using Filament as an admin panel for products and categories alongside a separate front-facing website built with 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.