Personalizacion De Componente Breadcrumb - Homlity Herramienta Para Páginas Web
View Categories

Personalizacion de Componente breadcrumb

1 minutos de lectura

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:

breadcrum Homlity Herramienta para páginas web

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.

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.

Al personalizar el breadcrumb, puedes modificar estilos, etiquetas, rutas o eventos JavaScript según las necesidades del proyecto.
Recuerda siempre replicar la ruta del archivo correctamente dentro de visualinmueble/templates para que el plugin use tu versión personalizada en lugar del archivo original.

📌 En futuras actualizaciones del plugin, las personalizaciones realizadas dentro del tema se conservarán, siempre que no modifiques directamente los archivos del núcleo del plugin.

Funciona con BetterDocs