Personalización de Componente “perfilAsesor”

🧩 Introducción #

El componente "perfilAsesor" forma parte del sistema de visualización de asesores dentro de la ficha de un inmueble, y está diseñado para mostrar de forma clara y accesible la información de contacto del asesor responsable del inmueble publicado. Este componente permite al usuario final establecer contacto mediante distintos canales como WhatsApp, llamada telefónica o correo electrónico.

Además de su funcionalidad principal, el componente está preparado para ser personalizado o sobrescrito desde un tema hijo, facilitando su adaptación a las necesidades gráficas y funcionales del sitio web.

Esta documentación detalla la estructura del componente, su ubicación dentro del plugin, cómo sobrescribirlo correctamente y qué elementos pueden ser personalizados.

---

👁️ Vista del Componente #

El componente muestra:

• Foto del asesor.
• Nombre del asesor con enlace a su perfil.
• Botón para abrir WhatsApp con mensaje predefinido.
• Enlace para realizar llamada directa al número del asesor.
• Opción de enviar un correo electrónico con datos del inmueble prellenados.

---

🧱 Código del Componente #

<?php visualinmu_load_template("asesores/componentes/asesores/foto.php", ["asesor" => $asesor]); ?>

<a href="<?php echo visualinmu_route_detalleAsesor($asesor->slug()) ?>"
   onclick="gtag('event', 'open_advisor_detail', {
       'origin': 'property_advisor',
       'label': 'Abrir perfil asesor',
       'value': '<?php echo  $asesor->nombre(); ?>'
   });"
   target="_blank">
    <h5 class="card-title"><?php echo $asesor->nombre(); ?></h5>
</a>

<ul class="list-group list-group-flush">
    <li class="list-group-item">
        <a onclick="gtag('event', 'wp_open_advisor', {
            'origin': 'property_advisor',
            'label': 'Whatsapp Abir perfil asesor',
            'value': '<?php echo  $asesor->nombre(); ?>'
        });"
        href="<?php echo visualinmu_redsocial_url([
            "nombre" => "whatsapp",
            "phone" => $asesor->telefono(),
            "texto" => "Buen día, encontré esto en su página web y estoy interesado en " . $nombre . " código: " . $codigo
        ], $route) ?>"
        target="_blank">
            <i class="fab fa-whatsapp"></i> Hablar por WhatsApp
        </a>
    </li>

    <?php if (visualinmueble_valida_dato_contacto('telefono', $asesor->telefono())): ?>
        <li class="list-group-item">
            <a onclick="gtag('event', 'phone_open', {
                'origin': 'property_advisor',
                'label': 'phone_open',
                'value': '<?php echo $asesor->nombre(); ?>'
            });"
            href="tel:<?php echo visualinmu_formatear_telefono($asesor->telefono()); ?>"
            target="_blank">
                <i class="fas fa-mobile-alt"></i> Hablar por celular
            </a>
        </li>
    <?php endif; ?>

    <?php if (visualinmueble_valida_dato_contacto('email', $asesor->email())): ?>
        <li class="list-group-item">
            <a onclick="gtag('event', 'email_open', {
                'origin': 'property_advisor',
                'label': 'email_open',
                'value': '<?php echo $asesor->nombre(); ?>'
            });"
            href="mailto:<?php echo $asesor->email(); ?>?subject=Estoy interesado en el inmueble <?php echo $nombre; ?>&body=Buen día, mi nombre es (nombre solicitante), mi celular es (celular) y estoy interesado en el inmueble <?php echo $nombre; ?> - <?php echo $codigo; ?> <?php echo visualinmu_route_detalleInmueble($slug); ?>"
            target="_blank">
                <i class="fas fa-envelope"></i> Enviar correo
            </a>
        </li>
    <?php endif; ?>
</ul>

---

🛠️ ¿Qué se puede personalizar? #

A continuación, se listan los elementos y funcionalidades que puedes modificar o adaptar según tus necesidades:

1. Foto del asesor
   • Puedes sobrescribir la plantilla foto.php que se carga con visualinmu_load_template(...), para ello sigue la siguiente documentación:
     Personalización de componente anidado “foto”
2. Nombre del asesor y enlace a su perfil
   • Puedes cambiar el diseño del título (<h5>) o reemplazarlo por otro tipo de encabezado o formato.
3. Tracking de eventos (gtag)
   • Cada acción del usuario está enlazada con eventos de Google Analytics. Puedes modificar los eventos o eliminarlos si no los necesitas.
4. Texto y comportamiento del botón de WhatsApp
   • Mensaje predeterminado personalizable desde el helper visualinmu_redsocial_url(...).
5. Validación y formato de teléfono
   • Puedes ajustar las validaciones con visualinmueble_valida_dato_contacto(...) y el formato del número.
6. Correo electrónico y contenido prellenado
   • El cuerpo del email incluye información del inmueble y puede adaptarse fácilmente.
7. Estructura HTML y clases CSS
   • Puedes personalizar clases Bootstrap como list-group, card-title, etc., para adaptar estilos.

---

📁 Ruta del Componente #

Ubicación original en el plugin:

componentes/detalleInmueble/perfilAsesor.php

Ruta para sobrescribirlo en tu tema hijo:

visualinmueble/
└── templates/
    └── inmuebles/
        └── componentes/
            └── detalleInmueble/
                └── perfilAsesor.php

📌 Importante: Para que la sobrescritura funcione correctamente, asegúrate de mantener la misma estructura de carpetas y nombre de archivo en tu tema hijo.