Personalización Componente “search-header”

🔍 Introducción #

El componente “search-header.php” define la barra superior de resultados del módulo de búsqueda de inmuebles. Incluye:

• Botón para mostrar/ocultar filtros.
• Conmutador entre vista de listado y mapa.
• Cantidad total de inmuebles encontrados.
• Botones de orden ascendente o descendente.

Es clave para la experiencia del usuario, ya que permite interactuar con los filtros y la visualización de resultados en tiempo real.

---

🖼️ Vista del Componente #

---

🧱 Código del Componente #

<div class="clearfix mb-3 visualinmu-search-header ">
    <div class="float-start d-flex">
        <a class="btn btn-primary" id="vi-btn-filtros" data-bs-toggle="offcanvas"
           href="#offcanvasWithBothOptions" role="button"
           aria-controls="offcanvasWithBothOptions">
            <i class="icon icon-uniE9B7"></i> Filtros
        </a>

        <ul class="nav nav-pills mx-2 border rounded" id="vi-bts-gridmap" role="tablist">
            <li class="nav-item" role="presentation">
                <a class="nav-link" id="btn-listab" data-bs-toggle="pill" data-bs-target="#listtab"
                   type="button" role="tab" aria-controls="listtab" aria-selected="true"
                   onclick="gtag('event', 'search_list_tab', {
                       'origin': 'search',
                       'label': 'Mostrar Listado inmuebles'
                   });">
                    <i class="icon icon-uniE911"></i> <?php echo __("Inmuebles en Listado", "visualinmueble"); ?>
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link d-block" id="btn-mapatab" data-bs-toggle="pill"
                   data-bs-target="#mapa-tab" href="#mapa-tab" type="button" role="tab"
                   aria-controls="listtab" aria-selected="true"
                   onclick="gtag('event', 'search_map_tab', {
                       'origin': 'search',
                       'label': 'Mostrar Mapas inmuebles'
                   });">
                    <i class="icon icon-uniE9C1"></i> <?php echo __("Inmuebles en Mapa", "visualinmueble"); ?>
                </a>
            </li>
        </ul>
    </div>

    <div class="float-end d-flex align-items-center">
        <?php if (isset($paginador) && !is_null($paginador)): ?>
            <div class="mx-2 fst-italic text-muted">
                <small><?php echo number_format($paginador->getTotalItems(), 0, ',', '.') . " inmuebles encontrados " ?></small>
            </div>
        <?php endif; ?>

        <div class="visualinmu-btns-order">
            <a class="btn btn-primary btn-sm" type="button"
               href="<?php echo visualinmu_url_parameters_append(['direccion_order' => 'asc']); ?>"
               data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-custom-class="custom-tooltip"
               title="Menor a mayor">
                <i class="icon icon-uniEA3E"></i>
            </a>
            <a class="btn btn-primary btn-sm" type="button"
               href="<?php echo visualinmu_url_parameters_append(['direccion_order' => 'desc']); ?>"
               data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-custom-class="custom-tooltip"
               title="Mayor a menor">
                <i class="icon icon-uniEA3A"></i>
            </a>
        </div>
    </div>
</div>

---

🗂️ Ruta del Componente #

Ubicación en el plugin:

inmuebles/componentes/search/search-header.php

Ruta para sobrescribirlo en tu tema hijo:

visualinmueble/
├── templates/
│   └── inmuebles/
│       └── componentes/
│           └── search/
│               └── search-header.php

---

🛠️ ¿Qué se puede editar? #

Puedes modificar según necesidad:

• Botón de Filtros: Texto, estilos (btn-primary), icono (icon-uniE9B7).
• Pestañas de vista: Etiquetas, íconos o añadir nuevas vistas si el sistema lo soporta.
• Contador de inmuebles: Formato de número, texto, ubicación.
• Botones de orden: Cambiar comportamiento, estilos o tooltip.