Filament•2mo ago

Add Action Button on Topbar

I tried to add cart button next to the notification icon on topbar. But it didn't work. No modal opens when I clicked it. Here is the code in AppPanelProvider.php

->renderHook(
                PanelsRenderHook::GLOBAL_SEARCH_AFTER,
                function () {
                    $action = Action::make('cartAction')
                        ->label('')
                        ->icon('heroicon-o-shopping-cart')
                        ->iconSize('lg')
                        ->color('gray')
                        ->iconButton()
                        ->slideOver()
                        ->form([
                            TextInput::make('subject'),
                        ])
                        ->action(function (array $data) {
                            // Handle the action logic here
                            dd($data);
                            
                        });

                    return view('components.add-cart-button', compact('action'));
                }
            )

->renderHook(
                PanelsRenderHook::GLOBAL_SEARCH_AFTER,
                function () {
                    $action = Action::make('cartAction')
                        ->label('')
                        ->icon('heroicon-o-shopping-cart')
                        ->iconSize('lg')
                        ->color('gray')
                        ->iconButton()
                        ->slideOver()
                        ->form([
                            TextInput::make('subject'),
                        ])
                        ->action(function (array $data) {
                            // Handle the action logic here
                            dd($data);
                            
                        });

                    return view('components.add-cart-button', compact('action'));
                }
            )

and here is the add-cart-button.blade.php

<div class="relative">
    {{ $action }}
    <div class="absolute start-full top-1 z-[1] w-max -translate-x-1/2 -translate-y-1/2 rtl:translate-x-1/2" style="transform: translate(-50%, -50%) translate(5px, -5px);">
        <x-filament::badge size="xs" color="warning">3</x-filament::badge>
    </div>
</div>

<div class="relative">
    {{ $action }}
    <div class="absolute start-full top-1 z-[1] w-max -translate-x-1/2 -translate-y-1/2 rtl:translate-x-1/2" style="transform: translate(-50%, -50%) translate(5px, -5px);">
        <x-filament::badge size="xs" color="warning">3</x-filament::badge>
    </div>
</div>

Can someone please show me what's wrong and point me in the right direction. Thank you.

3 Replies

umardi_OP•2mo ago

Ok, i've found the solution. Thank you.

johnnie_littleshoes•2mo ago

that was fast haha good job maybe you'd like to add your solution here so future people can find it too?

umardi_OP•2mo ago

Instead of create action directly in AppPanelProvider.php like before, i change it to livewire component:

->renderHook(
                PanelsRenderHook::GLOBAL_SEARCH_AFTER,
                fn (): string => Blade::render('@livewire(\'shopping-cart\')'),
            )

->renderHook(
                PanelsRenderHook::GLOBAL_SEARCH_AFTER,
                fn (): string => Blade::render('@livewire(\'shopping-cart\')'),
            )

// ShoppingCart.php ...

public function showCartAction(): Action
    {
        return Action::make('showCart')
            ->label('')
            ->icon('heroicon-o-shopping-cart')
            ->iconSize('lg')
            ->color('gray')
            ->iconButton()
            ->badge(function () {
                if (auth()->user()->cart) {
                    return auth()->user()->cart->getEbookCount();
                }
            })
            ->badgeColor('warning')
            ->requiresConfirmation()
            ->form([
                TextInput::make('subject'),
            ])
            ->action(function (array $data) {
                // Handle the action logic here
                // dd($data);
            });
    }

public function showCartAction(): Action
    {
        return Action::make('showCart')
            ->label('')
            ->icon('heroicon-o-shopping-cart')
            ->iconSize('lg')
            ->color('gray')
            ->iconButton()
            ->badge(function () {
                if (auth()->user()->cart) {
                    return auth()->user()->cart->getEbookCount();
                }
            })
            ->badgeColor('warning')
            ->requiresConfirmation()
            ->form([
                TextInput::make('subject'),
            ])
            ->action(function (array $data) {
                // Handle the action logic here
                // dd($data);
            });
    }

// shopping-cart.blade.php

<div>
    {{ $this->showCartAction }}
    <x-filament-actions::modals />
</div>

<div>
    {{ $this->showCartAction }}
    <x-filament-actions::modals />
</div>

Gaming

Programming

Add Action Button on Topbar