Sergio Queral Tolós

Te ayudaremos a la mayor brevedad posible

<div class="whatsapp-container">
  <div id="whatsapp-text-bubble" class="whatsapp-text-bubble"></div>
  
  <a id="whatsapp-link-dinamic" href="#" aria-label="Contactar a Stel Order por WhatsApp">
    <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="Icono de contacto de WhatsApp de Stel Order" width="60" />
  </a>
</div>



<script>
(function() {
  // ==================================================================
  // ========= LÓGICA DEL WIDGET DINÁMICO - STEL ORDER ==========
  // ==================================================================

  // ------------------------------------------------------------------
  //                  ZONA DE CONFIGURACIÓN
  // ------------------------------------------------------------------
  // Esta es la única sección que se debe editar para ajustar
  // el comportamiento del widget a las necesidades de Stel Order.

  const config = {
    // IMPORTANTE: Reemplazar con el número de teléfono oficial de Stel Order.
    // Formato: prefijo de país + número, sin '+' ni espacios.
    phoneNumber: '34610932115',

    // REGLA POR DEFECTO: Mensajes que se mostrarán en cualquier página
    // que NO coincida con una de las reglas específicas de abajo.
    default: {
      bubbleText: "¿Necesitas ayuda?",
      whatsappText: "Hola, tengo una consulta general sobre Stel Order."
    },

    // REGLAS ESPECÍFICAS POR PÁGINA:
    // El script las evalúa en orden. La primera que coincida será la que se aplique.
    pageRules: [
      {
        // REGLA 1: PÁGINAS DE PRODUCTO
        // Se activa si la ruta de la URL comienza con '/store/' (ej. /store/producto-a).
        pathStartsWith: '/store/',
        isProductPage: true, // Marca esta regla como especial para productos. No tocar.
        bubbleText: "¿Dudas sobre este producto?",
        // Marcadores dinámicos que el script reemplazará automáticamente:
        // {productName}: Se convierte en el nombre del producto (extraído de la URL).
        // {productUrl}: Se convierte en el enlace completo a la página del producto.
        whatsappText: "Hola, tengo una duda sobre el producto: {productName} ({productUrl})"
      },
      {
        // REGLA 2: PÁGINA DEL CARRITO
        // Se activa si la ruta de la URL es exactamente '/cart'.
        pathIs: '/cart',
        bubbleText: "¿Ayuda con tu pedido?",
        whatsappText: "Hola, necesito ayuda para finalizar mi compra en el carrito."
      },
      {
        // REGLA 3: PÁGINA GENERAL DE LA TIENDA
        // Se activa si la ruta de la URL es exactamente '/store'.
        pathIs: '/store',
        bubbleText: "¿Buscas algo en concreto?",
        whatsappText: "Hola, tengo una pregunta sobre los productos de la tienda."
      },
      {
        // REGLA 4: PÁGINA DE PERFIL DE USUARIO
        // Se activa si la ruta de la URL es exactamente '/profile'.
        pathIs: '/profile',
        bubbleText: "¡Hola! ¿Ayuda con tu cuenta?",
        whatsappText: "Hola, tengo una pregunta sobre mi cuenta de Stel Order."
      }
      // EJEMPLO PARA AÑADIR NUEVAS REGLAS:
      // Copia y pega una regla anterior y modifica los valores.
      // {
      //   pathIs: '/contacto',
      //   bubbleText: '¿Prefieres llamarnos?',
      //   whatsappText: 'Hola, he visto la página de contacto y quería hacer una consulta.'
      // }
    ]
  };

  // ------------------------------------------------------------------
  //                  ZONA DE LÓGICA AVANZADA
  //              (No modificar a menos que sea necesario)
  // ------------------------------------------------------------------
  
  // Función auxiliar que convierte un 'slug' de URL (ej. "mi-nuevo-producto")
  // en un nombre formateado (ej. "Mi Nuevo Producto").
  function formatProductName(slug) {
    if (!slug) return '';
    const textWithSpaces = slug.replace(/-/g, ' ');
    return textWithSpaces.replace(/\b\w/g, char => char.toUpperCase());
  }

  // Función principal que se ejecuta en cada carga o cambio de página.
  function updateWidget() {
    const link = document.getElementById('whatsapp-link-dinamic');  
    const bubble = document.getElementById('whatsapp-text-bubble');
    
    // Medida de seguridad: si los elementos HTML no existen, la función se detiene.
    if (!link || !bubble) return;

    const path = window.location.pathname;
    let activeRule = config.default; // Empezamos asumiendo la regla por defecto.

    // Itera sobre las reglas para encontrar la primera que coincida con la URL actual.
    for (const rule of config.pageRules) {
      const isExactMatch = rule.pathIs && rule.pathIs === path;
      const isStartsWithMatch = rule.pathStartsWith && path.startsWith(rule.pathStartsWith) && path.length > rule.pathStartsWith.length;
      
      if (isExactMatch || isStartsWithMatch) {
        activeRule = rule;
        break; // Optimización: una vez encontrada la regla, no es necesario seguir buscando.
      }
    }

    let finalWhatsAppText = activeRule.whatsappText;
    
    // Si la regla es de producto, realiza la sustitución de los marcadores.
    if (activeRule.isProductPage) {
      const productSlug = path.substring(activeRule.pathStartsWith.length);
      const formattedName = formatProductName(productSlug);
      const productUrl = window.location.href;

      finalWhatsAppText = activeRule.whatsappText
        .replace('{productName}', formattedName)
        .replace('{productUrl}', productUrl);
    }
    
    // Actualiza el contenido visible de la burbuja.
    bubble.textContent = activeRule.bubbleText;

    // Define la acción de clic en el enlace.
    link.onclick = function(event) {
      event.preventDefault(); // Previene la navegación por defecto del enlace '#'.
      const encodedMessage = encodeURIComponent(finalWhatsAppText);
      const whatsappUrl = `https://wa.me/${config.phoneNumber}?text=${encodedMessage}`;
      window.open(whatsappUrl, '_blank', 'noopener,noreferrer'); // Abre en nueva pestaña de forma segura.
    };
  }

  // Observador de mutaciones: pieza clave para webs modernas (SPAs).
  // Detecta cambios en el título de la página, un indicador común de que el usuario ha navegado
  // a una nueva vista sin recargar la página, y vuelve a ejecutar la lógica.
  const titleObserver = new MutationObserver(updateWidget);
  const titleElement = document.querySelector('title');
  if (titleElement) {
    titleObserver.observe(titleElement, { childList: true });
  }

  // Ejecuta la función por primera vez cuando el DOM está completamente cargado.
  document.addEventListener('DOMContentLoaded', updateWidget);

})();
</script>

Olvídate del mantenimiento, ¡disfrútalo! En SIRVE, expertos en piscinas de las Terres de l'Ebre, nos encargamos de todo. Limpieza, mantenimiento, reparaciones… para una piscina perfecta, sin preocupaciones.

TU ALIADO PARA UNA PISCINA PERFECTA

SERVICIOS DE REPARACIÓN, MANTENIMIENTO Y REFORMA

Contacta con nosotros