Sistema de navegación y filtrado dinámico

Proyecto: Viatges Guitour

Diseño de un sistema de navegación dinámica que permite localizar rápidamente alojamientos mediante filtros dependientes y una arquitectura preparada para crecer sin modificar la aplicación.

|> WordPress · JetEngine · JetSmartFilters · Query Builder · Ajax

Problema

La web debía permitir localizar fácilmente un alojamiento entre un catálogo cada vez mayor de establecimientos, evitando largos listados y reduciendo el tiempo necesario para encontrar la información deseada.

Además, el sistema tenía que ser fácilmente ampliable, permitiendo incorporar nuevos servicios e información sin modificar el desarrollo existente.

El objetivo no era únicamente mostrar resultados, sino construir una navegación intuitiva que facilitara la búsqueda tanto a los visitantes como a los propios administradores del sitio.

Análisis

Un buscador tradicional resultaba insuficiente.

Era necesario diseñar una estructura que permitiera combinar distintos criterios de búsqueda manteniendo una navegación sencilla y ofreciendo resultados inmediatos.

La arquitectura debía contemplar tres aspectos fundamentales:

Organización lógica de la información.
Filtrado dinámico entre criterios relacionados.
Escalabilidad para incorporar nuevos servicios sin necesidad de realizar modificaciones técnicas.

También era importante evitar que el usuario encontrara combinaciones sin resultados, guiando la búsqueda de forma natural conforme iba seleccionando cada criterio.

Solución

Se desarrolló un sistema de navegación basado en JetEngine, JetSmartFilters, Query Builder y Listings, utilizando carga dinámica mediante AJAX para actualizar los resultados sin recargar la página.

Los filtros se diseñaron como dependientes, de manera que la selección de una provincia limita automáticamente las poblaciones disponibles y muestra únicamente los alojamientos correspondientes a dicha selección.

La navegación permite combinar diferentes criterios como:

Provincia
Población
Categoría del alojamiento
Servicios disponibles

Para la gestión de servicios se creó una Taxonomía personalizada, permitiendo asociar a cada servicio un icono SVG de Font Awesome.

Gracias a esta arquitectura, añadir un nuevo servicio resulta tan sencillo como crear un nuevo término dentro de la taxonomía, asignarle su icono y relacionarlo con los alojamientos correspondientes, sin necesidad de modificar plantillas ni código, manteniendo una experiencia homogénea para el usuario.

Antes vs Después

Funcionamiento inicial del sistema

La búsqueda debía realizarse recorriendo listados completos de alojamientos, dificultando la localización de un establecimiento concreto cuando aumentaba el volumen de información.

Sistema de filtrado dinámico

Los resultados se actualizan dinámicamente conforme el usuario selecciona cada criterio de búsqueda, mostrando únicamente la información relevante.La incorporación de nuevos servicios puede realizarse directamente desde el panel de administración, reutilizando automáticamente la misma estructura visual y funcional en toda la aplicación.

Gestión desde WordPress

Uno de los objetivos principales era evitar soluciones específicas para cada caso.

Por ello, tanto la estructura de filtros como el modelo de taxonomías fueron diseñados para poder reutilizarse en diferentes tipos de contenido, manteniendo una navegación consistente y simplificando el mantenimiento futuro del proyecto.

Este enfoque permite que nuevas categorías, servicios o criterios de clasificación puedan incorporarse sin alterar la arquitectura existente.

Valor aportado

Tecnologías

Encontrar la información adecuada también forma parte del diseño.

También puede interesarte

Cabeceras visuales dinámicas con JetEngine

Cómo convertir una cabecera estática en un sistema visual dinámico y administrable sin modificar las plantillas de la web.

Cabeceras visuales dinámicas con JetEngine

Cómo convertir una cabecera estática en un sistema visual dinámico y administrable sin modificar las plantillas de la web.

Cabeceras visuales dinámicas con JetEngine

Cómo convertir una cabecera estática en un sistema visual dinámico y administrable sin modificar las plantillas de la web.

638 75 58 24

638 75 58 24