En este manual te explicaremos cómo personalizar la página de resultado de búsqueda de inmueble en el sitio web. Este práctico código permitirá cambiar toda la distribución de las secciones, iconos y textos dando mayor libertad a la hora de personalizar la página web, proporcionando a tus usuarios una rápida acción para encontrar el inmueble de sus sueños. A continuación, te explicaré los pasos para personalizar este widget:
- Crea una carpeta llamada “visualinmueble” en la raíz del tema que estás utilizando en tu página web.
- Dentro de la carpeta “visualinmueble”, crea otra carpeta llamada “templates”.
- Dentro de la carpeta “templates”, crea una nueva carpeta llamada “inmuebles”.
- Ahora, dentro de la carpeta “inmuebles”, crea un archivo llamado “search.php”. Este archivo reemplazará al archivo predeterminado del plugin que muestra el listado de inmuebles destacados.
- Abre el archivo “search.php” y encontrarás el siguiente código:
<div>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Filtros</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<?php visualinmu_load_template("inmuebles/componentes/search/search-form-sidebar.php", get_defined_vars()); ?>
</div>
</div>
<div class="container-fluid contenedor-visual-inmueble">
<?php if (isset($error)) : ?>
<div class="row">
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Información: </strong> <?php echo $error; ?>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
<?php endif; ?>
<div class="row">
<div class="col-md">
<div class="cuerpo-grilla-inmuebles">
<div class="row">
<div class="col-md-12">
<div class="clearfix mb-3 ">
<a class="btn float-start" data-bs-toggle="offcanvas" href="#offcanvasWithBothOptions" role="button" aria-controls="offcanvasWithBothOptions"><i class="icon icon-uniE9B7"></i>
Filtros</a>
<a class="float-end" type="button" href="<?php echo visualinmu_url_parameters_append(['direccion_order' => 'asc', 'column_order' => 'price']); ?>" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-custom-class="custom-tooltip" title="Menor a mayor">
<i class="btn icon icon-uniEA3E"></i>
</a>
<a class="float-end" type="button" href="<?php echo visualinmu_url_parameters_append(['direccion_order' => 'desc', 'column_order' => 'price']); ?>" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-custom-class="custom-tooltip" title="Mayor a menor">
<i class="btn icon icon-uniEA3A"></i></a>
</div>
</div>
</div>
<div class="row">
<?php if (isset($inmuebles)) : ?>
<?php if (count($inmuebles) > 0) {
/** CARDS **/
visualinmu_load_template("inmuebles/componentes/search/cards.php", ["inmuebles" => $inmuebles]);
} else { ?>
<h3> No existen resultados para esta búsqueda.</h3>
<br>
<h5>Envíenos el inmueble que busca y nosotros <strong>le notificamos!</strong></h5>
<?php visualinmu_load_template("inmuebles/componentes/search/search-widgets.php"); ?>
<?php } ?>
<?php endif; ?>
<?php if (isset($paginador)) {
/** PAGINADOR */
visualinmu_load_template("inmuebles/componentes/search/paginator-form.php", ["paginador" => $paginador]);
} ?>
</div>
</div>
</div>
<?php if (isset($inmuebles)) : ?>
<div class="col-md-3" id="mapasearch">
<?php if (count($inmuebles) > 0) { ?>
<?php visualinmu_load_template("inmuebles/componentes/search/mapa.php", ["inmuebles" => $inmueblesJson]); ?>
<?php } ?>
</div>
<?php endif; ?>
</div>
</div>
</div>
Ahora, si deseas configurar los estilos visuales del detalle del inmueble desde cualquier apartado de edición de css podrás implementar los estilos con css a las clases que por defecto trae las etiquetas del detalle del inmue
