Personalización de Componente «caracteristicas»

Este componente muestra un listado de características adicionales del inmueble, como acabados, ubicación, servicios cercanos, tipo de piso, entre otros. Se visualiza como una lista de ítems con íconos y (opcionalmente) un valor asociado.

🖼️ Ejemplo Visual #

📁 Ruta del Componente para Personalizar #

Ubicación en la estructura del plugin:

componentes/detalleInmueble/caracteristicas.php

Para personalizar sin perder cambios en actualizaciones, copia el archivo a tu tema hijo siguiendo esta ruta:

visualinmueble/
├── templates/
│   └── inmuebles/
│       └── componentes/
│           └── detalleInmueble/
│               └── caracteristicas.php

🧩 Código Base del Componente #

El componente agrupa las características del inmueble dinámicamente en columnas, mostrando un botón para expandirlas si exceden cierto número:

<?php
$columns = 4;
$totalFeatures = $inmueble->caracteristicas();
$cars = $inmueble->caracteristicasPorColumnas($columns);
$conteo = count($cars);
if ($conteo > 0) {
    if (count($totalFeatures) > $columns) {
        ?>
        <section class="mt-4">
            <div class="collapse collapse-preview" id="collap-feature">
                <div class="d-flex flex-md-row flex-wrap justify-content-between">
                    <?php foreach ($cars as $grupo) {
                        foreach ($grupo as $caracteristica) { ?>
                            <div class="item-caracteristicas">
                                <i class="icon icon-uniE954"></i>
                                <?php echo $caracteristica->nombre() .
                                    ((!empty($caracteristica->valor()) && $caracteristica->valor()) != '0' ? ': ' . $caracteristica->valor() : '') ?>
                            </div>
                        <?php }
                    } ?>
                </div>
            </div>
            <div class="text-center">
                <a onclick="gtag('event', 'prop_feature_more', {
    'origin': 'property',
    'label': 'Mostrar mas caracteristicas',
    'value': 1 // Este valor puede ser un número
  });" class="" data-bs-toggle="collapse" href="#collap-feature" role="button" aria-expanded="false"
                    aria-controls="Mostrar mas características">
                    <span id="chevron-feature">&#x2193;</span> <!-- Aquí irá la flecha --> <span
                        class="text-decoration-underline">Mostrar todas las características</span>
                </a>
            </div>

        </section>
        <?php
    } else {
        ?>
        <section class="mt-4">
            <div class="d-flex flex-md-row flex-wrap justify-content-between">
                <?php foreach ($cars as $grupo) {
                    foreach ($grupo as $caracteristica) { ?>
                        <div class="item-caracteristicas">
                            <i class="icon icon-uniE954"></i>
                            <?php echo $caracteristica->nombre() .
                                ((!empty($caracteristica->valor()) && $caracteristica->valor()) != '0' ? ': ' . $caracteristica->valor() : '') ?>
                        </div>
                    <?php }
                } ?>
            </div>
        </section>
        <?php
    }
}
?>

🎨 ¿Qué puedes personalizar? #

💡 Sugerencias de Mejora #

• Puedes incluir encabezados por categoría si accedes a metainformación adicional del $caracteristica.
• Agrega tooltips para características técnicas con terminología compleja.
• Personaliza los íconos para diferenciar visualmente por tipo (ubicación, seguridad, acabados, etc.).