Can't figure out how to add my custom livewire component into the filament livewire DOM
I have a simple CartIcon component which simply gets the count from a cart service and displays a count of items in the top nav-bar next to the user drop-down.
I then load this icon in my Filament panel provider use a renderHook:
->renderHook(
'panels::user-menu.before', fn (): string => Blade::render('<livewire:cart-icon lazy />'),
)
However the component is not added to the filament DOM with following console error:
- Uncaught Could not find Livewire component in DOM tree
- Uncaught Snapshot missing on Livewire component with id: CYboxF53uyAn3rUkVRZr
The component works. Seems the error tells me it is not in the "filament" Livewire scope. Side affect I have from this is that the component is not able to listen to events. When I add a table row action, I want to fire an event and the CartIcon component should listen for it and get the new count from the cart service.
Anyone know how I can get this component properly into the Filament Livewire DOM scope for tracking?
Further I'm struggling to dispatch an event in the action so that the component can listen and action on it, I have tried many variants and even the AI's out there's recommendations are crappy, and can't find anything in the docs.
This is the table row action:
->actions([
Action::make('basket')
->requiresConfirmation()
->icon('heroicon-o-shopping-cart')
->iconButton()
->action(function (Event $record) {
//does not work
//$this->dispatchBrowserEvent('cart-updated');
Notification::make()
->title(__('Added to the basket'))
->body($record->course->name)
->success()
->send();
}),
])
Any guidance or resources would be appreciated! Thanks!0 Replies