Personalización Componente “card-default”

🔍 Introducción #

El archivo “card-default.php” es el núcleo visual de cada inmueble en las vistas de resultados o listados. Aquí se define la estructura HTML, estilos inline, etiquetas (tags) como Destacado o Verificado, y se invocan otras plantillas internas para mostrar características (features.php) y el contacto del asesor (advisor.php).

---

🖼️ Vista del componente #

---

🧱 Código base del componente #

<div class="card card-space" style="width: 100%;">
    <a target="_blank" onclick="gtag('event', 'property_open', {
        'origin': 'card',
        'label': 'property_open',
        'value': '<?php echo $inmueble->nombre(); ?>'
    });" 
    href="<?php echo visualinmu_route_detalleInmueble($inmueble->slug()); ?>" class="inmueblelink">

        <div class="imagenportada portada<?php echo $cont; ?>"
            style="background: url(<?php echo $inmueble->fotoPortada(); ?>); background-size: cover; background-position: center;">

            <?php foreach ($inmueble->tags() as $tag) { ?>
                <?php if ($tag->key() === "VISUALINMU_DESTACADO" || $tag->key() == "DESTACADO") { ?>
                    <span class="badge rounded-pill bg-primary badgePropiedadDestacada">Propiedad destacada</span>
                <?php } ?>
                <?php if ($tag->key() === "VISUALINMU_DELUJO") { ?>
                    <span class="badge rounded-pill bg-primary badgePropiedadDeLujo">Propiedad de lujo</span>
                <?php } ?>
                <?php if ($tag->key() === "VISUALINMU_VERIFICADO") { ?>
                    <span class="badge rounded-pill bg-primary badgePropiedadverificada" data-bs-toggle="tooltip"
                          title="Este inmueble y sus propietarios fueron previamente verificados...">
                        <i class="icon icon-uniE9AF"></i> Propiedad verificada
                    </span>
                <?php } ?>
            <?php } ?>
        </div>
    </a>

    <div class="card-body">
        <div class="card-inmueble-container">
            <div class="card-inmueble-caracteristicas">
                <?php visualinmu_load_template("inmuebles/componentes/card/features.php", get_defined_vars()); ?>
            </div>
            <div class="card-inmueble-contacto">
                <div class="row justify-content-center text-center">
                    <?php if (method_exists($inmueble, "asesor") && $inmueble->asesor()) { ?>
                        <div class="col-md-12 card-btn">
                            <?php visualinmu_load_template("inmuebles/componentes/card/advisor.php", get_defined_vars()); ?>
                        </div>
                    <?php } ?>
                </div>
            </div>
        </div>
    </div>
</div>

---

🗂️ Ruta del Componente #

Ubicación original del plugin:

inmuebles/componentes/card-default.php

Ruta para sobrescribirlo en tu tema hijo:

visualinmueble/
├── templates/
│   └── inmuebles/
│       └── componentes/
│           └── card-default.php

---

🧩 Plantillas internas relacionadas #

Este componente incluye dos subcomponentes importantes que puedes editar individualmente:

Archivo	Función
features.php	Muestra el precio, tipo de operación, código, ubicación, m², habitaciones, baños, etc.
advisor.php	Muestra la información del asesor/contacto

---

📋 ¿Qué se puede editar? #

Elemento	Descripción
Imagen de portada	Puedes cambiar la lógica del background-image, aplicar filtros, overlays
Etiquetas (tags)	Puedes cambiar colores, texto o agregar nuevos tags
features.php	Personaliza los datos clave como precio, área, habitaciones, íconos, etc.
advisor.php	Personaliza el contacto, avatar, botón de WhatsApp, etc.
Clases CSS	Puedes modificar o añadir clases de diseño fácilmente
Tracking con gtag	Puedes quitarlo, cambiar eventos o usar otra herramienta de analítica

---

📎 Enlaces recomendados (añádelos si documentas en Notion u otra herramienta) #

• features.php: Plantilla de características del inmueble.
• advisor.php: Plantilla de asesor/contacto.