Filament: Simple E-Shop with Bootstrap Front Page

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...