Filament•4mo ago

Guest pages using the filament layout.

Hello people, I searched the channel again and again. Although some people insinuated that they found the solution and where asking for details, I didn't manage to have any progress on that. I want to make a page, (ideally with a form) to be shown when the user navigates to /message and not to /admin/message. I want the page to use the guest middleware and not forcing the user to login. Also I want to use the css filament uses for showing all the good stuff it shows. Right now I have in my web.php

 Route::get('/page', function(){
        return view('custom-guest-page');
    });

and the custom-guest-page.blade.php is:

<x-filament::page>
    <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100">
        <div class="max-w-md px-8 py-6 mt-4 bg-white shadow-lg rounded-lg">
            <h2 class="text-2xl font-bold text-center text-gray-700">Welcome to Filament</h2>
            <p class="mt-4 text-gray-600">
                This page is rendered using the Filament guest layout.
            </p>
        </div>
    </div>
</x-filament::page>

When I navigate to /page I get Using $this when not in object context does anyone knows what I can do?

14 Replies

gladjanus43•4mo ago

Hi, I have a working Full Page livewire component. This works with the styles from Filament https://github.com/filamentphp/filament/discussions/7819 I followed what myregistration posted! Hope it helps

GitHub

Full Livewire component with Fillament Layout? · filamentphp filame...

HI, i have created a Livewire component under its own route: Route::get(..., Componente::class). But how can i use it with the Filament Layout? I have created under views/components/layouts/app.bla...

gladjanus43•4mo ago

Now I have a route which is public accessible

terumiOP•4mo ago

Sorry, I couldn't understand from what you gave me...

gladjanus43•4mo ago

You can create a livewire component, and return that component from a route to get a full page component:

Route::get(
    '/transport',
    CreateTransportOrderForm::class
)
    ->middleware('web')
    ->name('transport-order.create');

Route::get(
    '/transport',
    CreateTransportOrderForm::class
)
    ->middleware('web')
    ->name('transport-order.create');

Then in that livewire component:

class CreateTransportOrderForm extends Component implements HasForms
{

    #[Layout('components.layouts.guest')]
    public function render(): View
    {
        return view('tms::livewire.create-transport-order-form');
    }

}

class CreateTransportOrderForm extends Component implements HasForms
{

    #[Layout('components.layouts.guest')]
    public function render(): View
    {
        return view('tms::livewire.create-transport-order-form');
    }

}

Then the last thing you need to do is create a public layout inside views/components/layouts called guest.blade.php

<!DOCTYPE html>
<html
    lang="{{ str_replace('_', '-', app()->getLocale()) }}"
    class="fi min-h-screen"
>

    <head>
        <meta charset="utf-8">
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1"
        >
        <meta
            name="csrf-token"
            content="{{ csrf_token() }}"
        >

        <title>{{ config('app.name', 'Laravel') }}</title>


        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])

        <!-- Styles -->
        @livewireStyles
        @filamentStyles
    </head>

    <body>
        <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
            <div class="text-gray-900 dark:text-gray-100 antialiased font-sans h-screen">
                {{ $slot }}
            </div>
        </div>

        @livewireScripts
        @filamentScripts
    </body>

</html>

<!DOCTYPE html>
<html
    lang="{{ str_replace('_', '-', app()->getLocale()) }}"
    class="fi min-h-screen"
>

    <head>
        <meta charset="utf-8">
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1"
        >
        <meta
            name="csrf-token"
            content="{{ csrf_token() }}"
        >

        <title>{{ config('app.name', 'Laravel') }}</title>


        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])

        <!-- Styles -->
        @livewireStyles
        @filamentStyles
    </head>

    <body>
        <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
            <div class="text-gray-900 dark:text-gray-100 antialiased font-sans h-screen">
                {{ $slot }}
            </div>
        </div>

        @livewireScripts
        @filamentScripts
    </body>

</html>

Povilas K•4mo ago

Maybe my older video would help: https://www.youtube.com/watch?v=QZBXG8OSz7U

Filament Daily

YouTube

Use Filament Forms in Public Livewire Component

I want to demonstrate how to use Filament forms on a public website page for non-logged-in users. Source on Filament Examples: https://filamentexamples.com/project/appointment-reservation-public-form

Alex•5d ago

HI, I hope is okay to add on to this thread as it's my exact issue. I have followed all of these guides and examples, and what results each time is a page with no formatting. I've started with fresh projects, one I posted publicly on GitHub: https://github.com/ElivateMarketing/test/tree/support-example I think there is something fundamental that I am missing. I understand how to pass the form to the livewire component, but I would expect @FilamentStyles and @FilamentScripts to add at least a basic style to the full page component. I can see that in the source view of the page, there are two filament css files added (forms.css, and support.css) and they show a lot of minimized css code and the app.css is generating css. The css in the app.css doesn't seem to have the variables that filament has and every element on the page is completely unformatted. What am I missing?

Alex•5d ago

awcodes•5d ago

Well, yea. If you’re in the context of panels then filament is using a theme css file and not app.css. There’s a difference between panels and stand alone implementation of the individual packages. If you are using x-filament::page it’s loading a different stylesheet. To be fair though, even though it’s possible, guest pages in panels don’t make sense to me.

LeandroFerreira•4d ago

in the vite.config.js file, remove tailwindcss()

Alex•3d ago

You are MAGIC! Thanks!! Ah, yeah, the guest page is for when person wants to enroll. I know there's a register page built in but I wanted to make my own registration page that's a wizard.

toeknee•3d ago

For that it would make sense to extend the original and customise the form?

awcodes•3d ago

Makes sense. Thought you were taking about guest pages inside the panel.

LeandroFerreira•3d ago

I have a video that explains how to create custom pages outside panel using the Filament layout style (pt_BR): https://youtu.be/u-yyQDETYpA?si=tCl_2twLYpUSvug_

Filament Brasil

YouTube

Criando páginas fora do painel - #filament #livewire #laravel

Quer criar uma página acessível publicamente no Filament? Neste vídeo, vou te ensinar como fazer isso, sem depender do painel administrativo. Além disso, você aprenderá a construir um formulário dinâmico usando um componente Livewire. Assista até o final e domine essa técnica! Espero que tenha gostado do vídeo de hoje e, se curtiu, s...

Alex•3d ago

Fantastic video. Thank goodness for auto translate on youtube, it's a beautiful language, but I don't understand one word I like very much how you accomplished this. Yes, that's very much what Leandro showed me in his video

Gaming

Programming

Guest pages using the filament layout.

Did you find this page helpful?