Deneme

wa.js

// WhatsApp ile Satın Al Popup Entegrasyonu
(() => {
  const config = {
    title: "WhatsApp ile Satın Al",
    description: "Sepetinizdeki ürünleri WhatsApp üzerinden satın almak ister misiniz?",
    cartSelector: ".cart-container",
    itemSelector: ".cart-item",
    itemTitleSelector: ".item-title",
    itemUrlSelector: ".item-title a",
    phone: "+905060600772",
    message: "Bu ürünleri almak istiyorum:",
    delay: 2,
    cartPageUrl: "/cart", // Sadece path kullanılacak
  };

  // Telefon numarası validasyonu
  const validateConfig = () => {
    if (!/^\+[1-9]\d{1,14}$/.test(config.phone)) {
      console.error("Geçersiz telefon numarası formatı");
      return false;
    }
    return true;
  };

  // Dinamik olarak CSS ekle
  const injectStyles = () => {
    const styleId = 'wa-popup-styles';
    if (document.getElementById(styleId)) return;

    const style = document.createElement("style");
    style.id = styleId;
    style.type = "text/css";
    style.textContent = `
      .wa-popup-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 1000;
      }
      .wa-popup-overlay.show {
        display: flex;
      }
      .wa-popup {
        position: relative;
        background: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        text-align: center;
        max-width: 400px;
        width: 90%;
      }
      .wa-popup h2 {
        font-size: 18px;
        margin-bottom: 10px;
      }
      .wa-popup-content {
        margin-bottom: 20px;
        font-size: 14px;
      }
      .wa-popup-actions {
        display: flex;
        gap: 10px;
        justify-content: center;
      }
      .wa-popup-btn {
        padding: 10px 15px;
        font-size: 14px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: opacity 0.2s;
      }
      .wa-popup-btn:hover {
        opacity: 0.9;
      }
      .wa-popup-btn:first-child {
        background-color: #25d366;
        color: white;
      }
      .wa-popup-btn:last-child {
        background-color: #f1f1f1;
        color: black;
      }
      .wa-popup-close {
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
        font-size: 18px;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        border-radius: 50%;
        background: #f1f1f1;
      }
      .wa-popup-close:hover {
        background: #e1e1e1;
      }
    `;
    document.head.appendChild(style);
  };

  // Popup HTML oluştur
  const createPopupHTML = () => `
    <div class="wa-popup-overlay">
      <div class="wa-popup">
        <h2>${config.title}</h2>
        <span class="wa-popup-close">&times;</span>
        <div class="wa-popup-content">${config.description}</div>
        <div class="wa-popup-actions">
          <button id="wa-send" class="wa-popup-btn">WhatsApp ile Gönder</button>
          <button class="wa-popup-btn wa-popup-close">Kapat</button>
        </div>
      </div>
    </div>
  `;

  // Sepetteki ürünleri topla
  const collectCartItems = () => {
    const items = document.querySelectorAll(config.itemSelector);
    let waMessage = config.message + "\n\n";
    
    items.forEach((item) => {
      try {
        const title = item.querySelector(config.itemTitleSelector)?.textContent?.trim() || 'Ürün';
        const url = item.querySelector(config.itemUrlSelector)?.getAttribute("href");
        
        if (title && url) {
          const fullUrl = url.startsWith('http') ? url : `${window.location.origin}${url}`;
          waMessage += `- ${title}\n${fullUrl}\n\n`;
        }
      } catch (error) {
        console.error('Ürün bilgileri alınırken hata:', error);
      }
    });

    return waMessage;
  };

  // Popup olaylarını ekle
  const addPopupEventListeners = (popup) => {
    const overlay = popup.querySelector(".wa-popup-overlay");
    const closeButtons = popup.querySelectorAll(".wa-popup-close");
    const sendButton = popup.querySelector("#wa-send");

    const closePopup = () => {
      overlay.classList.remove("show");
    };

    // Overlay tıklama ile kapatma
    overlay.addEventListener("click", (e) => {
      if (e.target === overlay) {
        closePopup();
      }
    });

    // Kapatma butonları
    closeButtons.forEach((btn) => {
      btn.addEventListener("click", closePopup);
    });

    // ESC tuşu ile kapatma
    document.addEventListener("keydown", (e) => {
      if (e.key === "Escape" && overlay.classList.contains("show")) {
        closePopup();
      }
    });

    // WhatsApp gönder butonu
    sendButton.addEventListener("click", () => {
      const waMessage = collectCartItems();
      const waUrl = `https://api.whatsapp.com/send?phone=${config.phone}&text=${encodeURIComponent(waMessage)}`;
      window.open(waUrl, "_blank");
      closePopup();
    });
  };

  // Popup oluştur ve ekle
  const createPopup = () => {
    const popupId = 'wa-popup-container';
    let popup = document.getElementById(popupId);
    
    if (!popup) {
      popup = document.createElement("div");
      popup.id = popupId;
      popup.innerHTML = createPopupHTML();
      document.body.appendChild(popup);
      addPopupEventListeners(popup);
    }
    
    return popup;
  };

  // WhatsApp butonunu oluştur
  const createWhatsAppButton = () => {
    const button = document.createElement("button");
    button.textContent = "WhatsApp ile Satın Al";
    button.className = "wa-purchase-btn wa-popup-btn";
    button.style.cssText = `
      background-color: #25d366;
      color: white;
      padding: 10px 15px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      margin-top: 10px;
      width: 100%;
    `;
    return button;
  };

  // Sepet sayfası kontrolü ve buton ekleme
  const initializeWhatsAppButton = () => {
    const isCartPage = window.location.pathname.includes(config.cartPageUrl);
    
    if (!isCartPage) return;

    const popup = createPopup();
    const carts = document.querySelectorAll(config.cartSelector);

    if (carts.length === 0) {
      console.warn('Sepet elementi bulunamadı');
      return;
    }

    carts.forEach((cart) => {
      const waButton = createWhatsAppButton();
      waButton.addEventListener("click", () => {
        popup.querySelector(".wa-popup-overlay").classList.add("show");
      });
      cart.appendChild(waButton);
    });

    // Otomatik popup gösterimi
    setTimeout(() => {
      popup.querySelector(".wa-popup-overlay").classList.add("show");
    }, config.delay * 1000);
  };

  // Başlat
  try {
    if (validateConfig()) {
      injectStyles();
      initializeWhatsAppButton();
    }
  } catch (error) {
    console.error('WhatsApp entegrasyonu başlatılırken hata:', error);
  }
})();