Before proceeding, make sure filament/infolists is installed in your project. You can check by running:
composer show filament/infolistsIf it's not installed, consult the installation guide and configure the individual components according to the instructions.
First, generate a new Livewire component:
php artisan make:livewire ViewProductThen, render your Livewire component on the page:
@livewire('view-product')Alternatively, you can use a full-page Livewire component:
use App\Livewire\ViewProduct;
use Illuminate\Support\Facades\Route;
Route::get('products/{product}', ViewProduct::class);You must use the InteractsWithSchemas trait, and implement the HasSchemas interface on your Livewire component class:
use Filament\Schemas\Concerns\InteractsWithSchemas;
use Filament\Schemas\Contracts\HasSchemas;
use Livewire\Component;
class ViewProduct extends Component implements HasSchemas
{
use InteractsWithSchemas;
// ...
}Next, add a method to the Livewire component which accepts an $infolist object, modifies it, and returns it:
use Filament\Schemas\Schema;
public function productInfolist(Schema $schema): Schema
{
return $schema
->record($this->product)
->components([
// ...
]);
}Finally, render the infolist in the Livewire component's view:
{{ $this->productInfolist }}filament/infolists also includes the following packages:
filament/actionsfilament/schemasfilament/supportThese packages allow you to use their components within Livewire components.
For example, if your infolist uses Actions, remember to implement the HasActions interface and use the InteractsWithActions trait on your Livewire component class.
If you are using any other Filament components in your infolist, make sure to install and integrate the corresponding package as well.
You can pass data to the infolist in two ways:
Either pass an Eloquent model instance to the record() method of the infolist, to automatically map all the model attributes and relationships to the entries in the infolist's schema:
use Filament\Infolists\Components\TextEntry;
use Filament\Schemas\Schema;
public function productInfolist(Schema $schema): Schema
{
return $schema
->record($this->product)
->components([
TextEntry::make('name'),
TextEntry::make('category.name'),
// ...
]);
}Alternatively, you can pass an array of data to the state() method of the infolist, to manually map the data to the entries in the infolist's schema:
use Filament\Infolists\Components\TextEntry;
use Filament\Schemas\Schema;
public function productInfolist(Schema $schema): Schema
{
return $schema
->constantState([
'name' => 'MacBook Pro',
'category' => [
'name' => 'Laptops',
],
// ...
])
->components([
TextEntry::make('name'),
TextEntry::make('category.name'),
// ...
]);
}