Combine the power of Laravel SEO and Filament PHP.
This package is a convenient helper for using the laravel-seo package with Filament Admin and Forms.
It provides a simple component that returns a Filament fieldgroup to modify the title, author and description fields of the SEO model. It automatically takes care of getting and saving all the data to the seo() relationship, and you can thus use it anywhere, without additional configuration!
use Filament\Resources\Form;
use RalphJSmit\Filament\SEO\SEO;
public static function form(Form $form): Form
{
return $form->schema([
SEO::make(),
// .. Your other fields
]);
}
Here's an example of how the SEO component looks like:
Installation
First, install the packages:
composer require ralphjsmit/laravel-filament-seo
This will the require the ralphjsmit/laravel-seo as well if you didn't have that installed. Be sure to check out the documentation of the main package and configure the values in the special seo.php config file!
Next, make sure that the Eloquent Model you're editing uses the HasSEO trait:
class Post extends Model
{
use HasSEO;
}
Now the SEO::make() helper is available to use anywhere you want. Below are several examples how to use it:
In Filament Admin
This is an example of using this package in the classic Filament Admin.
It works for both creating and editing posts:
namespace App\Filament\Resources;
use App\Filament\Resources;
use App\Models\Post;
use Filament\Forms\Components\TextInput;
use Filament\Resources\Form;
use Filament\Resources\Resource;
use Filament\Resources\Table;
use RalphJSmit\Filament\SEO\SEO;
class PostResource extends Resource
{
protected static ?string $model = Post::class;
protected static ?string $slug = 'posts';
protected static ?string $recordTitleAttribute = 'title';
protected static ?string $navigationGroup = 'Blog';
protected static ?string $navigationIcon = 'heroicon-o-document-text';
protected static ?int $navigationSort = 0;
public static function form(Form $form): Form
{
return $form->schema([
TextInput::make('title'),
SEO::make(),
]);
}
public static function table(Table $table): Table
{
return $table->columns([ /* */ ]);
}
public static function getPages(): array
{
return [
'index' => Resources\PostResource\Pages\ListPosts::route('/'),
'create' => Resources\PostResource\Pages\CreatePost::route('/create'),
'edit' => Resources\PostResource\Pages\EditPost::route('{record}/edit'),
];
}
}
With Filament Forms
You can also use this package with the stand-alone Filament Forms package.
This is a simple example of how to setup a Livewire component that creates a new post. In this example, I wrapped the SEO component in a Card.
namespace App\Http\Livewire;
use App\Models\Post;
use Filament\Forms\Components\Card;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Illuminate\Contracts\View\View;
use Illuminate\Database\Eloquent\Model;
use Livewire\Component;
use RalphJSmit\Filament\SEO\SEO;
class CreatePost extends Component implements HasForms
{
use InteractsWithForms;
public array $data = [];
public function mount(): void
{
$this->form->fill();
}
public function render(): View
{
return view('livewire.create-post');
}
protected function getFormSchema(): array
{
return [
TextInput::make('title'),
Card::make([
SEO::make()
]),
];
}
protected function getFormStatePath(): ?string
{
return 'data';
}
protected function getFormModel(): Model|string|null
{
return Post::class;
}
public function submitForm()
{
$post = Post::create($this->form->getState());
/** Do not forget this step. */
$this->form->model($post)->saveRelationships();
}
}
And here's an example of how a Livewire component for editing a post might like like:
namespace App\Http\Livewire;
use App\Models\Post;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Illuminate\Contracts\View\View;
use Illuminate\Database\Eloquent\Model;
use Livewire\Component;
use RalphJSmit\Filament\SEO\SEO;
use RalphJSmit\Filament\SEO\Tests\Fixtures\Models\Post;
class EditPost extends Component implements HasForms
{
use InteractsWithForms;
public Post $post;
public function mount(): void
{
$this->form->fill([
'title' => $this->post->title,
]);
}
public function render(): View
{
return view('livewire.edit-post');
}
protected function getFormSchema(): array
{
return [
TextInput::make('title'),
SEO::make(),
];
}
protected function getFormModel(): Model|string|null
{
return $this->post;
}
public function submitForm()
{
$this->post->update(
$this->form->getState(),
);
}
}
General
130 Dec 23, 2022
191 Dec 30, 2022
0 Jul 13, 2019
11 Sep 10, 2022
41 Dec 24, 2022
5 Jun 12, 2023
45 Dec 26, 2022
347 Dec 25, 2022
17 Dec 30, 2022
69 Jan 4, 2023
5 Nov 24, 2022
10 Oct 5, 2022
1 Oct 30, 2021
684 Dec 16, 2022
20 Nov 22, 2022
84 Jan 7, 2023
205 Dec 23, 2022