En esta clase vamos a ver algunos ejemplos. No vamos a ver todos los ejemplos que nos muestran en la web, sino que los llevaremos a cabo en nuestra propia página web.
Objetivo
Vamos a intentar recrearlo lo máximo posible, incluyendo estilos y demás, para ver cómo funciona.
Ejemplo 1: Funcionalidad del filtro
En este ejemplo tenemos un filtro interactivo con varias opciones:
- Marca: Cuando hacemos clic en Audi, solo deberían mostrarse los coches de Audi.
- Tracción delantera: Al seleccionar esta opción, solo deberían aparecer coches con tracción delantera.
- Rango de precios: Al subir el precio, solo aparecen los coches dentro de ese rango.
- Botón de reset: Resetea las opciones seleccionadas.
Funcionalidad y diseño
El diseño que tenemos es sencillo pero efectivo. Usamos un template de coches con los siguientes campos:
- Título: Nombre del coche.
- Precio: Precio del coche.
- Potencia: Potencia del coche.
- Imagen: Imagen del coche.
Se ha configurado para mostrar los coches en grupos de cuatro y permitir la ordenación de los mismos por precio (de menor a mayor y viceversa).
Estructura del código
- Estilos: Usé estilos rápidos, pero lo ideal es que estos estilos se manejen desde el tema.
- Estructura del código:
- Listing: Se utiliza para mostrar los coches con el título, precio, y potencia.
- Paginación: Se ha configurado para mostrar números de página.
- Ordenar: Permite ordenar los coches por título o precio.
- Filtros: Incluye filtros por marca, tracción, y precio.
Paginación
La paginación se configura usando un tipo de "page numbers" y nos permite navegar por las páginas de resultados.
Ordenación
Para la ordenación, se utiliza un "sort" que permite ordenar los coches por precio (ascendente y descendente) o por nombre.
Filtros
Los filtros se configuran para mostrar:
- Marca: Checkbox con marcas de coches.
- Tracción: Radio buttons para seleccionar el tipo de tracción.
- Precio: Slider para ajustar el rango de precio.
Ejemplo 2: Recetas
El siguiente ejemplo es sobre un filtro de recetas. Las funcionalidades son similares:
- Categorías: Las recetas están organizadas por categorías.
- Sabores: Se pueden seleccionar diferentes sabores.
- Métodos de cocina: Se pueden filtrar por métodos de cocina.
Funcionalidad del filtro
El filtro permite seleccionar múltiples opciones y mostrar recetas que coincidan con las categorías, sabores y métodos seleccionados.
- Botón de cargar más: Permite cargar más recetas si se da clic en él.
Estructura del código
- Recetas Listing: Las recetas se muestran en columnas de tres por página.
- Filtros:
- Categorías: Dropdown con las categorías de las recetas.
- Sabores: Multi-select para elegir los sabores.
- Métodos de cocina: Multi-select para elegir los métodos.
Conclusión
En resumen, hemos aprendido a configurar filtros avanzados usando FacetWP. Hemos creado una página de coches y una página de recetas, cada una con sus propios filtros y opciones. Aunque los estilos deben ajustarse mejor, el código básico es muy sencillo y fácil de implementar.
