Introducción #
El componente Breadcrumb permite mostrar la ubicación del usuario dentro del sitio web, facilitando la navegación hacia niveles superiores. En el caso del plugin, este componente es especialmente útil en páginas de detalle de inmuebles, ya que permite regresar fácilmente a resultados de búsqueda anteriores, organizados por tipo de negocio, tipo de propiedad, ciudad y barrio.
Este es un ejemplo visual del componente:
Cada uno de los elementos es dinámico y se construye con base en los datos del inmueble que se está visualizando. Además, el primer ítem del breadcrumb incluye un botón de “Volver” que redirige al usuario a la página anterior.
Código del Componente #
A continuación, se presenta el código base del componente, que puedes copiar, editar y sobrescribir siguiendo la estructura recomendada dentro de la carpeta visualinmueble/templates/inmuebles/componentes/detalleInmueble de tu tema.
<nav aria-label="breadcrumb" id="breadcrums" onclick="gtag('event', 'breadcrum_open', {
'origin': 'propert',
'label': 'breadcrum_open'
});">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a style=" font-weight: bold;" href="<?php echo $page["back"]; ?>"><i class="icon icon-uniEA40"></i> Volver</a></li>
<?php if(isset($inmueble)){ ?>
<li class="breadcrumb-item"><a target="_blank" href="<?php echo visualinmu_route_search([
"type_bussiness" => $inmueble->gestion()->nombre()
]); ?>"><?php echo $inmueble->gestion()->nombre(); ?></a></li>
<li class="breadcrumb-item"><a target="_blank" href="<?php echo visualinmu_route_search([
"type_bussiness" => $inmueble->gestion()->nombre(),
"type_property" => $inmueble->tipoInmueble()->nombre()
]); ?>"><?php echo $inmueble->tipoInmueble()->nombre(); ?></a></li>
<li class="breadcrumb-item"><a target="_blank" href="<?php echo visualinmu_route_search([
"type_bussiness" => $inmueble->gestion()->nombre(),
"type_property" => $inmueble->tipoInmueble()->nombre(),
"city" => $inmueble->ciudad()->nombre()
]); ?>"><?php echo $inmueble->ciudad()->nombre(); ?></a></li>
<li class="breadcrumb-item"><a target="_blank" href="<?php echo visualinmu_route_search([
"type_bussiness" => $inmueble->gestion()->nombre(),
"type_property" => $inmueble->tipoInmueble()->nombre(),
"city" => $inmueble->ciudad()->nombre(),
"neighborhood" => $inmueble->barrio()->nombre()
]); ?>"><?php echo $inmueble->barrio()->nombre(); ?></a></li>
<?php
}
?>
</ol>
</nav>Este componente se encuentra en la carpeta componentes dentro de detalleinmueble. Desde allí, puedes sobrescribirlo siguiendo la estructura adecuada en tu tema.
Conclusión #
Este componente se encuentra en la ruta:componentes/detalleinmueble/breadcrumb.php
Para personalizarlo sin perder tus cambios tras futuras actualizaciones del plugin, copia el archivo a tu tema siguiendo esta estructura:
visualinmueble/
├── templates/
│ └── inmuebles/
│ └── componentes/
│ └── detalleInmueble/
│ └── breadcrumb.php
Desde allí puedes:
- Cambiar el orden o contenido de los ítems del breadcrumb
- Personalizar el botón de “Volver” (texto, ícono, estilo o comportamiento)
- Traducir o modificar las etiquetas mostradas en cada nivel de navegación
- Aplicar estilos personalizados con clases CSS propias
- Agregar o quitar niveles de navegación según la lógica del sitio
- Adaptar los enlaces para que se ajusten a tus rutas personalizadas o filtros adicionales
📌 Recuerda: cualquier personalización dentro de tu tema será persistente, incluso tras actualizar el plugin, siempre que no edites directamente los archivos del núcleo.
