Agenda tu valoración personalizada

Plan: Mejora de Enlaces WhatsApp y Contacto

Resumen

Se deben realizar 2 tipos de mejoras en los enlaces:

1. Enlaces WhatsApp existentes: Asegurar que todos usen la clase lead_whatsapp para funcionar con la configuración JS centralizada
2. Enlaces a Contacto: Cambiarlos para que dirijan directamente a WhatsApp

Análisis Técnico

Configuración Actual de WhatsApp

El archivo js/main.js contiene la configuración centralizada:

const SR_CONFIG = {
  whatsapp: {
    phone: "573214173787",
    message: "..."
  }
};

// El JS busca elementos con clase .lead_whatsapp o id #lead_whatsapp
const links = document.querySelectorAll(".lead_whatsapp, #lead_whatsapp");

Patrón Correcto según _includes/button.html

<a
  href="#"
  rel="nofollow noopener noreferrer"
  title="Contacto con la clínica SR Expertos en piel y Metabolismo de Bogotá Colombia"
  class="boton lead_whatsapp"
  target="_blank"
  ></a
>

Características clave:

• href="#" - El JS se encarga de construir la URL real
• class="lead_whatsapp" - Clase que el JS busca para aplicar la configuración
• target="_blank" - Abre en nueva pestaña
• rel="nofollow noopener noreferrer" - Atributos de seguridad

Cambios Requeridos

1. Archivo landing.html

Problema: 3 enlaces usan href="" sin la clase lead_whatsapp

Líneas afectadas: 34, 85, 126

Cambio:

<!-- ANTES -->
<a href="" class="boton">Consulta Gratuita</a>

<!-- DESPUÉS -->
<a href="#" class="boton lead_whatsapp" target="_blank" rel="nofollow noopener noreferrer" title="WhatsApp SR Expertos en Piel">Consulta Gratuita</a>

2. Archivo _includes/nav.html

Problema: Enlace a página de contacto debe dirigir a WhatsApp

Línea afectada: 203

Cambio:

<!-- ANTES -->
<a href="/contacto/" title="Contacto clínica SR Expertos en piel">Contacto</a>

<!-- DESPUÉS -->
<a href="#" class="lead_whatsapp" target="_blank" rel="nofollow noopener noreferrer" title="WhatsApp SR Expertos en Piel">Contacto</a>

3. Archivo _includes/footer.html

Problema: Enlace a página de contacto debe dirigir a WhatsApp

Línea afectada: 10

Cambio:

<!-- ANTES -->
<a href="/contacto/" title="Contacto SR">
  <svg>...</svg>
  Contacto
</a>

<!-- DESPUÉS -->
<a href="#" class="lead_whatsapp" target="_blank" rel="nofollow noopener noreferrer" title="WhatsApp SR Expertos en Piel">
  <svg>...</svg>
  Contacto
</a>

4. Archivo _layouts/post.html

Problema: Enlace a página de contacto debe dirigir a WhatsApp

Línea afectada: 90

Cambio:

<!-- ANTES -->
<a href="/contacto/" class="boton" title="Contacto y agenda - SR Expertos en Piel Bogotá">Agenda tu consulta</a>

<!-- DESPUÉS -->
<a href="#" class="boton lead_whatsapp" target="_blank" rel="nofollow noopener noreferrer" title="WhatsApp SR Expertos en Piel Bogotá">Agenda tu consulta</a>

5. Archivo _servicios/slim-fit-perdida-peso.html

Problema: Enlace a página de contacto debe dirigir a WhatsApp

Línea afectada: 163

Cambio:

<!-- ANTES -->
<h3><a href="/contacto/" title="Agenda tu consulta">Consulta de Valoración</a></h3>

<!-- DESPUÉS -->
<h3><a href="#" class="lead_whatsapp" target="_blank" rel="nofollow noopener noreferrer" title="WhatsApp SR Expertos en Piel">Consulta de Valoración</a></h3>

Archivos que NO requieren cambios

Los siguientes archivos YA tienen la clase lead_whatsapp correcta:

• contacto.html - línea 56
• medicina-funcional-y-homeopatica.html - líneas 59, 74, 94
• tratamientos-esteticos.html - líneas 40, 58, 76
• _includes/nav.html - línea 220 (botón Pide tu consulta)
• _includes/footer.html - línea 14 (botón WhatsApp)
• _includes/whatsapp.html - línea 1
• Todos los archivos en _servicios/ que ya tienen class="lead_whatsapp"

Notas Importantes

1. Directorio _site/: No requiere cambios manuales - se regenera automáticamente con Jekyll
2. Consistencia: Todos los enlaces WhatsApp usarán la misma configuración centralizada
3. SEO y Seguridad: Se mantienen los atributos rel="nofollow noopener noreferrer" y target="_blank"

Diagrama de Flujo

flowchart TD
    A[Usuario hace clic en enlace] --> B{¿Tiene clase lead_whatsapp?}
    B -->|Sí| C[JS intercepta el clic]
    C --> D[Construye URL WhatsApp con SR_CONFIG]
    D --> E[Abre wa.me con teléfono y mensaje]
    B -->|No| F[Comportamiento por defecto]
    F --> G[Navega a href original]

Lista de Verificación

• Modificar landing.html - 3 enlaces
• Modificar _includes/nav.html - 1 enlace contacto
• Modificar _includes/footer.html - 1 enlace contacto
• Modificar _layouts/post.html - 1 enlace contacto
• Modificar _servicios/slim-fit-perdida-peso.html - 1 enlace contacto
• Probar que los enlaces funcionan correctamente
• Regenerar sitio Jekyll para actualizar _site/

Cambios Realizados

1. landing.html

• Línea 34: Cambiado href="" a href="#" con clase lead_whatsapp
• Línea 85: Cambiado href="" a href="#" con clase lead_whatsapp
• Línea 126: Cambiado href="" a href="#" con clase lead_whatsapp

2. _includes/nav.html

• Línea 203: Cambiado enlace /contacto/ a WhatsApp con clase lead_whatsapp

3. _includes/footer.html

• Línea 10: Cambiado enlace /contacto/ a WhatsApp con clase lead_whatsapp

4. _layouts/post.html

• Línea 90: Cambiado enlace /contacto/ a WhatsApp con clase lead_whatsapp

5. _servicios/slim-fit-perdida-peso.html

• Línea 163: Cambiado enlace /contacto/ a WhatsApp con clase lead_whatsapp