Deneme

wa.js

<script>
(() => {
  const config = {
    title: "WhatsApp ile Satın Al",
    description: "Sepetinizdeki ürünleri WhatsApp üzerinden satın almak ister misiniz?",
    cartSelector: ".cart-container", // Sepet ana container
    itemSelector: ".cart-item", // Ürün elemanlarının seçicisi
    itemTitleSelector: ".item-title", // Ürün başlığının seçicisi
    itemUrlSelector: ".item-title a", // Ürün URL'sinin seçicisi
    phone: "+905060600772", // WhatsApp numarası
    message: "Bu ürünleri almak istiyorum:", // Mesaj başlangıcı
    delay: 2, // Popup gösterim gecikmesi (saniye)
    cartPageUrl: "/cart", // Sepet sayfasının URL'si (tam URL gerekmez, kısmî eşleşme)
  };

  // Dinamik olarak CSS ekle
  const injectStyles = () => {
    const styleContent = `
      .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 {
        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%;
        position: relative;
      }
      .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;
      }
      .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;
      }
      .wa-purchase-btn {
        background-color: #25d366;
        color: white;
        padding: 10px 15px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 10px;
      }
      .wa-purchase-btn:hover {
        background-color: #1ebe57;
      }
    `;
    const style = document.createElement("style");
    style.type = "text/css";
    style.textContent = styleContent;
    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>
  `;

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

    closeButtons.forEach((btn) =>
      btn.addEventListener("click", () => {
        popup.classList.remove("show");
      })
    );

    sendButton.addEventListener("click", () => {
      const items = document.querySelectorAll(config.itemSelector);
      let waMessage = config.message + "\n\n";
      items.forEach((item) => {
        const title = item.querySelector(config.itemTitleSelector)?.textContent.trim();
        const url = item.querySelector(config.itemUrlSelector)?.getAttribute("href");
        if (title && url) {
          waMessage += `- ${title}\n${window.location.origin}${url}\n`;
        }
      });
      window.open(
        `https://api.whatsapp.com/send?phone=${config.phone}&text=${encodeURIComponent(waMessage)}`,
        "_blank"
      );
    });
  };

  // Popup oluştur ve ekle
  const createPopup = () => {
    const popup = document.createElement("div");
    popup.innerHTML = createPopupHTML();
    document.body.appendChild(popup);
    addPopupEventListeners(popup);
    return popup;
  };

  // Sepet sayfası kontrolü ve buton ekleme
  const initializeWhatsAppButton = () => {
    if (window.location.pathname.includes(config.cartPageUrl)) {
      const popup = createPopup();
      setTimeout(() => {
        popup.querySelector(".wa-popup-overlay").classList.add("show");
      }, config.delay * 1000);

      const cartContainers = document.querySelectorAll(config.cartSelector);
      cartContainers.forEach((cart) => {
        const waButton = document.createElement("button");
        waButton.textContent = "WhatsApp ile Satın Al";
        waButton.className = "wa-purchase-btn";
        waButton.addEventListener("click", () => {
          popup.querySelector(".wa-popup-overlay").classList.add("show");
        });
        cart.appendChild(waButton);
      });
    }
  };

  // Başlat
  injectStyles();
  initializeWhatsAppButton();
})();
</script>