Personalización Página De Detalle De Inmueble - Visual Inmueble Herramienta Para Páginas Web
View Categories

Personalización página de detalle de inmueble

3 minutos de lectura

En este manual te explicaremos cómo personalizar la página de detalle 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:

  1. Crea una carpeta llamada “visualinmueble” en la raíz del tema que estás utilizando en tu página web.
  2. Dentro de la carpeta “visualinmueble”, crea otra carpeta llamada “templates”.
  3. Dentro de la carpeta “templates”, crea una nueva carpeta llamada “inmuebles”.
  4. Ahora, dentro de la carpeta “inmuebles”, crea un archivo llamado “detalleInmueble.php”. Este archivo reemplazará al archivo predeterminado del plugin que muestra el listado de barrios destacados.
  5. Abre el archivo “search-inmuebles.php” y encontrarás el siguiente código:
<div class="container visualinmueble-detalle-inmueble">
    <div class="row">
        <?php if (isset($inmueble)) : ?>
        <div class="col-xl-9 col-lg-9 col-md-8">
            <div class="row">
                <div class="col-md-12 breadcrumbSection">
                    <!-- BREADCRUMB -->
                    <?php visualinmu_load_template('inmuebles/componentes/detalleInmueble/breadcrumb.php', ['page' => $page, 'nombre' => $inmueble->nombre()]); ?>
                </div>
                <div class="col-md-12">
                    <!-- TITULO -->
                    <?php visualinmu_load_template('inmuebles/componentes/detalleInmueble/titulo.php', ['codigo' => $inmueble->codigo(), 'barrio' => $inmueble->barrio()->nombre(), 'ciudad' => $inmueble->ciudad()->nombre(), 'departamento' => $inmueble->departamento()->nombre(), 'nombre' => $inmueble->nombre()]); ?>
                    <div class="tagsSection">
                        <!-- TAGS -->
                        <?php visualinmu_load_template('inmuebles/componentes/detalleInmueble/tags.php', ['tags' => $inmueble->tags()]); ?>
                    </div> <!-- TIPO DE GESTIÓN -->
                    <?php visualinmu_load_template('inmuebles/componentes/detalleInmueble/gestion.php', [
                        'gestion' => $inmueble->gestion(),
                        'valores' => [
                            'canon' => $inmueble->valorCanon(true),
                            'venta' => $inmueble->valorVenta(true),
                            'administracion_format' => $inmueble->valorAdmin(true),
                            'administracion' => $inmueble->valorAdmin(true),
                        ],
                        'precioConAdmin' => $inmueble->precioConAdministracion(),
                    ]); ?>
                </div>
            </div>
            <div class="row">
                <!-- SLIDERS-->
                <?php visualinmu_load_template('inmuebles/componentes/detalleInmueble/sliders.php', ['nombre' => $inmueble->nombre(), 'slider' => ['fotos' => $inmueble->imagenes(), 's360' => $inmueble->imagenes360(), 'video' => $inmueble->video(), 'video360' => $inmueble->video360()]]); ?>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <visualinmueble-narracion></visualinmueble-narracion>
                    <script type="text/javascript">
                        window.VISUALINMUEBLE_INMUEBLE = <?php echo $inmuebleJson; ?>;
                    </script>
                    <!-- REDES SOCIALES -->
                    <?php visualinmu_load_template('inmuebles/componentes/detalleInmueble/redesSociales.php', ['nombre' => $inmueble->nombre(), 'codigo' => $inmueble->codigo(), 'descripcion' => $inmueble->descripcion(), 'route' => visualinmu_route_detalleInmueble($inmueble->slug())]); ?>

                </div>
                <div class="col-md-12 sectionDescripcion">
                    <!-- DESCRIPCIÓN-->
                    <?php visualinmu_load_template('inmuebles/componentes/detalleInmueble/descripcion.php', ['descripcion' => $inmueble->descripcion()]); ?>
                </div>
                <div class="col-md-12 sectionMapa">
                    <!-- UBICACIÓN-->
                    <?php visualinmu_load_template('inmuebles/componentes/detalleInmueble/ubicacion.php', ['nombre' => $inmueble->nombre(), 'mapa' => ['latitud' => $inmueble->latitud(), 'longitud' => $inmueble->longitud(), 'propiedadesSimilares' => $similaresJson]]); ?>
                </div>
                <div class="col-md-12 sectionCarcateristicasPrincipales">
                    <!-- CARACTERÍSTICAS PRINCIPALES-->
                    <?php visualinmu_load_template('inmuebles/componentes/detalleInmueble/caracteristicasPrincipales.php', ['nombre' => $inmueble->nombre(), 'caracteristicas' => ['areaLote' => $inmueble->areaLote(), 'areaConstruida' => $inmueble->areaConstruida(), 'banos' => $inmueble->nBaños(), 'alcobas' => $inmueble->nAlcobas(), 'garajes' => $inmueble->nGarajes(), 'estrato' => $inmueble->estrato(), 'edad' => $inmueble->edad()]]); ?>
                </div>



                <div class="col-md-12 sectionCaracaresticas">
                    <!-- CARACTERÍSTICAS-->
                    <?php visualinmu_load_template('inmuebles/componentes/detalleInmueble/caracteristicas.php', ['nombre' => $inmueble->nombre(), 'inmueble' => $inmueble]); ?>
                </div>

            </div>
        </div>
        <div class="col-xl-3 col-lg-3 col-md-4 barra-lateral-visual-inmueble">
            <div class="row">
                <div class="col-md-12">
                    <div class="card sectionPerfil" style="width: 100%;">
                        <div class="card-body">
                            <?php if ($inmueble->asesor() != null) : ?>
                            <!-- PERFIL ASESOR-->
                            <?php visualinmu_load_template('inmuebles/componentes/detalleInmueble/perfilAsesor.php', ['asesor' => $inmueble->asesor(), 'nombre' => $inmueble->nombre(), 'codigo' => $inmueble->codigo(), 'slug' => $inmueble->slug(), 'route' => visualinmu_route_detalleInmueble($inmueble->slug())]); ?>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 d-block">
                    <!-- FORMULARIO DE LEADS-->
                    <?php visualinmu_load_template('inmuebles/componentes/detalleInmueble/formularios-leads.php', ['codigo' => $inmueble->codigo()]); ?>
                </div>
                <div class="col-md-12">
                    <?php if (visualinmu_is_sidebar_active("lateral_pagina_detalle_visual_inmueble")): ?>
                    <?php dynamic_sidebar('lateral_pagina_detalle_visual_inmueble'); ?>
                    <?php endif; ?>
                </div>
            </div>
        </div>
        <?php if (isset($similares) && count($similares) > 0) : ?>
        <div class="col-xl-12 col-md-12 section-propiedades-similares">
            <!-- PROPIEDADES SIMILARES -->
            <div class="row">
                <div class="col-md-12">
                    <h2 class="visualinmueble-titulos-propiedades-similares h3">Inmuebles <span
                            style="text-transform: lowercase;">similares al <?php echo $inmueble->nombre(); ?></span></h2>
                </div>
                <?php if (count($similares) > 0) {
                                    /** CARDS **/
                                    visualinmu_load_template("inmuebles/componentes/search/cards.php", ["inmuebles" => $similares]);
                                } else { ?>
                <label> Sin Resultados </label>
                <?php } ?>
            </div>
        </div>
        <?php endif; ?>
    </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 inmueble o podrá implementar nuevas clases personalizadas según tus necesidades editanto el css.

Funciona con BetterDocs