Personalización de Componente caracteristicasPrincipales

El componente caracteristicasPrincipales se utiliza para mostrar la información clave de un inmueble, como el área, número de baños, garajes, estrato, entre otros datos específicos. Estos datos se extraen dinámicamente del array $caracteristicas, que debe estar configurado previamente en el backend del sistema.

A continuación, un ejemplo visual de cómo se renderiza este componente:

---

#

El siguiente es el código utilizado para el componente característicasPrincipales:

<div class="d-flex flex-md-row flex-wrap">
    <?php
        if($caracteristicas["areaLote"] > 0){
    ?>
    <div class=" itemCaracteristica caracteristicaAreaLote">
        <div class="flex d-flex align-items-center">
            <i class="icon icon-uniE914"></i>
            <span class="" >Área lote: <?php echo $caracteristicas["areaLote"]; ?> M<sup>2</sup></span>
        </div>
    </div>
    <?php 
    }
    ?>
    <?php
    if($caracteristicas["areaConstruida"] > 0){
    ?>
    <div class="itemCaracteristica caracteristicaAreaConstruida">
        <div class="flex d-flex align-items-center">
            <i class="icon icon-uniE95E"></i>
            <span>Área cons: <?php echo $caracteristicas["areaConstruida"]; ?> M<sup>2</sup></span>            
        </div>
    </div>
    <?php 
    }
    ?>
     <?php
    if( $caracteristicas["banos"] > 0){
    ?>
    <div class="itemCaracteristica caracteristicaAreaLote">
        <div class="flex d-flex align-items-center">
            <i class="icon icon-uniE93E"></i>
            <span ><?php echo ($caracteristicas["banos"] === 1) ? "Baño: " . $caracteristicas["banos"] : "Baños: " . $caracteristicas["banos"]; ?></span>
        </div>
    </div>
    <?php 
    }
    ?>
    <?php
    if( $caracteristicas["alcobas"] > 0){
    ?>
    <div class="itemCaracteristica caracteristicaAlcobas">
        <div class="flex d-flex align-items-center">
            <i class="icon icon-uniE951"></i>
            <span ><?php echo ($caracteristicas["alcobas"] === 1) ? "Alcoba: " . $caracteristicas["alcobas"] : "Alcobas: " . $caracteristicas["alcobas"]; ?></span>
        </div>
    </div>
    <?php 
    }
    ?>
     <?php
    if( $caracteristicas["garajes"] > 0){
    ?>
    <div class="itemCaracteristica caracteristicaGarajes">
        <div class="flex d-flex align-items-center">
            <i class="icon icon-uniE9A5"></i>
            <span><?php echo ($caracteristicas["garajes"] === 1) ? "Garaje: " . $caracteristicas["garajes"] : "Garajes: " . $caracteristicas["garajes"]; ?></span>
        </div>
    </div>
    <?php 
    }
    ?>
     <?php
    if( $caracteristicas["estrato"] > 0){
    ?>
    <div class="itemCaracteristica caracteristicaEstrato">
        <div class="flex d-flex align-items-center">
           <i class="icon icon-uniE9AF"></i></span>
           <span> Estrato: <?php echo $caracteristicas["estrato"]; ?></span>
        </div>
    </div>
    <?php 
    }
    ?>
     <?php
    if( $caracteristicas["edad"] > 0){
    ?>
    <div class="itemCaracteristica caracteristicaEdad">
        <div class="flex d-flex align-items-center">
            <i class="icon icon-uniE9C0"></i>
            <span>Edad: <?php echo ($caracteristicas["edad"] === 1) ? $caracteristicas["edad"] . " año" : $caracteristicas["edad"] . " años"; ?></span>
        </div>
    </div>
    <?php 
    }
    ?>
</div>

---

Ruta del Archivo #

El archivo del componente característicasPrincipales se encuentra en la siguiente ubicación:

componentes/detalleInmueble/caracteristicasPrincipales.php

Para personalizar este componente de forma segura y evitar perder los cambios en futuras actualizaciones del plugin, copia el archivo en tu tema activo, siguiendo esta estructura:

CopiarEditarvisualinmueble/
├── templates/
│   └── inmuebles/
│       └── componentes/
│            └── detalleInmueble/
│                └── caracteristicasPrincipales.php

---

Qué Puedes Personalizar #

El componente es altamente personalizable y permite ajustes en:

1. Estilos Visuales
   • Agregar clases CSS personalizadas para ajustar el diseño, colores o tipografía.
   • Cambiar el ícono (<i class="icon..."></i>) por otros de tu preferencia.
2. Estructura
   • Modificar las etiquetas HTML (por ejemplo, usar <p> en lugar de <span>).
   • Agregar etiquetas adicionales como encabezados o descripciones.
3. Condiciones de Renderizado
   • Ajustar las condiciones para mostrar cada característica (por ejemplo, incluir valores por defecto si están vacíos).
4. Nuevas Características
   • Incluir nuevas propiedades en $caracteristicas para mostrarlas dinámicamente.

---

Nota Importante #

Los valores del array $caracteristicas son proporcionados desde el backend del plugin. No intentes modificar el contenido directamente en este archivo, ya que esto podría ocasionar errores.