Crear un sistema de filtrado reactivo por categorías es una funcionalidad esencial en cualquier aplicación web interactiva. Con Livewire, este proceso se simplifica enormemente, ya que permite construir interfaces dinámicas sin salir del ecosistema de PHP. A continuación, se explica paso a paso cómo implementar esta funcionalidad dentro de un componente de foro.
¿Cómo se configura el filtrado por categorías en el componente PHP?
El primer paso consiste en agregar una nueva propiedad al componente Livewire del lado de PHP [01:06]. Esta propiedad comienza vacía y será la encargada de almacenar el ID de la categoría seleccionada por el usuario.
Dado que el filtrado se activa mediante un clic, es necesario crear un método dentro del componente. En este caso, el método se llama filtrarPorCategoria y recibe un parámetro [01:18]. Su única responsabilidad es asignar el valor recibido a la propiedad del componente:
- El método recibe el ID de la categoría como parámetro.
- Asigna ese valor a la propiedad correspondiente.
- La consulta se adapta automáticamente según el estado de esa propiedad.
¿Cómo se altera la consulta de forma condicional?
Una de las ventajas de segmentar la consulta en varias líneas es que permite insertar condiciones de forma limpia [01:38]. Se utiliza un if para verificar si la propiedad de categoría tiene algún valor. Solo cuando contiene un ID, se agrega un where adicional a la consulta que filtra por el campo category_id [01:55].
php
if ($this->categoria) {
$query->where('category_id', $this->categoria);
}
Este patrón de consulta condicional es muy poderoso: al inicio, la propiedad está vacía y el bloque se ignora, mostrando todos los registros. Cuando el usuario selecciona una categoría, la consulta se modifica dinámicamente para filtrar solo los elementos correspondientes.
¿Cómo se conecta la vista con el método del componente?
Desde la vista del componente, se trabaja con los enlaces de categorías utilizando atributos propios de Livewire [02:38]. La configuración es directa:
- Se coloca un
# como valor del enlace.
- Se agrega el atributo
wire:click.prevent para capturar el clic y evitar que la página recargue.
- Se asigna como valor el nombre del método, pasando entre comillas simples el ID de la categoría.
html
<a href="#" wire:click.prevent="filtrarPorCategoria('{{ $categoria->id }}')">
{{ $categoria->nombre }}
</a>
Para el enlace de "todos los resultados", se envía un valor en blanco como parámetro [03:06]. De esta forma, la propiedad vuelve a su estado inicial y la consulta muestra nuevamente todos los registros.
¿Se pueden combinar el filtro de búsqueda y el de categorías?
Sí. Cuando ambos filtros están activos, las consultas se suman [03:35]. Por ejemplo, si se escribe un texto en el buscador, se muestran todos los títulos que coincidan sin importar la categoría. Pero al hacer clic en una categoría específica, se agrega esa condición adicional, refinando los resultados.
- Si se limpia el texto de búsqueda, aparecen todos los elementos de la categoría seleccionada.
- Si se selecciona "todos los resultados", la propiedad queda vacía y se muestran todos los registros.
Este comportamiento demuestra el potencial de construir un sistema reactivo con código PHP puro, sin necesidad de escribir JavaScript. Livewire se encarga de la comunicación entre la vista y el componente, haciendo que cada interacción del usuario actualice el estado y la interfaz de forma transparente.
Prueba esta configuración en tu proyecto y experimenta combinando filtros de búsqueda con categorías. ¿Qué otras condiciones agregarías a tu consulta? Comparte tu experiencia en los comentarios.
