Filament FAQs

CRUD completo para gestionar preguntas frecuentes (FAQs) con categorías para Filament v4.

Instalación

composer require cursosdesarrolloweb/filament-faqs

Configuración

1. Registrar el plugin en tu panel

use CursosDesarrolloWeb\Faqs\FaqsPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->plugins([
            FaqsPlugin::make(),
        ]);
}

2. Publicar y ejecutar migraciones

php artisan vendor:publish --tag=filament-faqs-migrations
php artisan migrate

Publicar recursos opcionales

Traducciones

php artisan vendor:publish --tag=filament-faqs-translations

Los archivos se publican en lang/vendor/filament-faqs/.

Configuración

php artisan vendor:publish --tag=filament-faqs-config

Vistas

php artisan vendor:publish --tag=filament-faqs-views

Uso

Una vez instalado, tendrás acceso a dos recursos en tu panel de Filament:

• Categorías de FAQ - Para organizar las preguntas por temas
• Preguntas frecuentes - Las preguntas y respuestas

Características

• Ordenación drag & drop de categorías y FAQs
• Editor enriquecido para las respuestas
• Filtro por categoría en el listado de FAQs
• Soporte para activar/desactivar categorías y FAQs
• Traducciones en español e inglés
• Generación automática de slug desde el nombre de categoría

Personalización

Modelos personalizados

Publica la configuración y modifica los modelos:

// config/filament-faqs.php
return [
    'models' => [
        'faq_category' => \App\Models\FaqCategory::class,
        'faq' => \App\Models\Faq::class,
    ],
];

Tus modelos deben extender los modelos del paquete:

use CursosDesarrolloWeb\Faqs\Models\FaqCategory as BaseFaqCategory;

class FaqCategory extends BaseFaqCategory
{
    // Tus personalizaciones
}

Grupo de navegación

Por defecto, los recursos aparecen en el grupo "Contenido" (o "Content" en inglés). Puedes cambiarlo en la configuración:

// config/filament-faqs.php
return [
    'navigation' => [
        'group' => 'Mi Grupo Personalizado',
    ],
];

O modifica las traducciones publicadas para cambiarlo por idioma.

Uso en el frontend

Obtener categorías activas con sus FAQs

use CursosDesarrolloWeb\Faqs\Models\FaqCategory;

$categories = FaqCategory::active()
    ->ordered()
    ->with(['faqs' => fn ($query) => $query->active()->ordered()])
    ->get();

Obtener todas las FAQs activas

use CursosDesarrolloWeb\Faqs\Models\Faq;

$faqs = Faq::active()
    ->ordered()
    ->with('category')
    ->get();

Scopes disponibles

FaqCategory

Faq

Componentes Blade

El paquete incluye componentes listos para mostrar FAQs en el frontend.

Componentes sin estilos

Para máxima flexibilidad, aplica tus propios estilos:

{{-- Lista simple --}}
<x-filament-faqs::faq-list />

{{-- Accordion con Alpine.js --}}
<x-filament-faqs::faq-accordion />

{{-- Filtrar por categoría --}}
<x-filament-faqs::faq-accordion category="general" />

{{-- Limitar cantidad --}}
<x-filament-faqs::faq-list :limit="5" />

Clases CSS disponibles para personalizar:

• .faq-list, .faq-item, .faq-question, .faq-answer
• .faq-accordion, .faq-accordion-item, .faq-accordion-trigger, .faq-accordion-content

Componentes con Tailwind CSS v4.x

{{-- Lista con estilos Tailwind --}}
<x-filament-faqs::faq-list-tailwind />

{{-- Accordion con estilos Tailwind (requiere Alpine.js) --}}
<x-filament-faqs::faq-accordion-tailwind />

Requisitos:

• Tailwind CSS 4.x
• Alpine.js 3.x (para accordion)
• Plugin @tailwindcss/typography (opcional, para clase prose)

Componentes con Bootstrap 5.x

{{-- Lista con estilos Bootstrap --}}
<x-filament-faqs::faq-list-bootstrap />

{{-- Accordion nativo de Bootstrap --}}
<x-filament-faqs::faq-accordion-bootstrap />

{{-- Con ID personalizado (para múltiples accordions en la misma página) --}}
<x-filament-faqs::faq-accordion-bootstrap id="myFaqAccordion" />

Requisitos:

• Bootstrap 5.x (CSS y JS)

Crear tu propia vista

@foreach($categories as $category)
    <h2>{{ $category->name }}</h2>
    
    @foreach($category->faqs as $faq)
        <details>
            <summary>{{ $faq->question }}</summary>
            <div>{!! $faq->answer !!}</div>
        </details>
    @endforeach
@endforeach

Estructura de la base de datos

Tabla faq_categories

Tabla faqs

Requisitos

• PHP 8.2+
• Laravel 11+
• Filament 4.x|5.x

Licencia

Propietario - Solo para suscriptores de CursosDesarrolloWeb.