Skip to content

Instantly share code, notes, and snippets.

@aliosmanyuksel

aliosmanyuksel/wa.js

Last active January 4, 2025 23:43
Download ZIP

Revisions

  1. aliosmanyuksel revised this gist Jan 4, 2025. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions wa.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,4 @@
    <script>
    (() => {
    const config = {
    title: "WhatsApp ile Satın Al",
    @@ -171,3 +172,4 @@
    injectStyles();
    initializeWhatsAppButton();
    })();
    </script>
  2. aliosmanyuksel revised this gist Jan 4, 2025. 1 changed file with 64 additions and 148 deletions.
    212 changes: 64 additions & 148 deletions wa.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,36 +1,20 @@
    // 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;
    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 styleId = 'wa-popup-styles';
    if (document.getElementById(styleId)) return;

    const style = document.createElement("style");
    style.id = styleId;
    style.type = "text/css";
    style.textContent = `
    const styleContent = `
    .wa-popup-overlay {
    position: fixed;
    top: 0;
    @@ -47,14 +31,14 @@
    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%;
    position: relative;
    }
    .wa-popup h2 {
    font-size: 18px;
    @@ -75,10 +59,6 @@
    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;
    @@ -94,17 +74,23 @@
    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;
    .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);
    };

    @@ -123,135 +109,65 @@
    </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();
    }
    });
    closeButtons.forEach((btn) =>
    btn.addEventListener("click", () => {
    popup.classList.remove("show");
    })
    );

    // 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();
    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 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);
    }

    const popup = document.createElement("div");
    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", () => {
    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);
    });
    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);
    }
    })();
    injectStyles();
    initializeWhatsAppButton();
    })();
  3. aliosmanyuksel created this gist Jan 4, 2025.
    257 changes: 257 additions & 0 deletions wa.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,257 @@
    // 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);
    }
    })();