buymodal

2025-10-02 19:51:52 -03:00
parent f3b715f87c
commit f29022d6e0
2 changed files with 116 additions and 0 deletions
--- a/public/buyModal.js
+++ b/public/buyModal.js
@@ -0,0 +1,116 @@
+// =======================
+// CONFIGURATION
+// =======================
+const WEBHOOK_URL = "https://your-webhook-url.com"; // <-- Set your webhook here
+
+// =======================
+// HELPER FUNCTIONS
+// =======================
+
+// Create the modal form HTML
+function createModal() {
+    const modal = document.createElement("div");
+    modal.id = "buyNowModal";
+    modal.style.position = "fixed";
+    modal.style.top = "0";
+    modal.style.left = "0";
+    modal.style.width = "100%";
+    modal.style.height = "100%";
+    modal.style.backgroundColor = "rgba(0,0,0,0.5)";
+    modal.style.display = "none";
+    modal.style.justifyContent = "center";
+    modal.style.alignItems = "center";
+    modal.style.zIndex = "1000";
+
+    modal.innerHTML = `
+        <div style="background: #fff; padding: 20px; border-radius: 8px; max-width: 400px; width: 90%; position: relative;">
+            <span id="closeModal" style="position: absolute; top: 10px; right: 15px; cursor: pointer; font-weight: bold;">&times;</span>
+            <h2>Buy Product</h2>
+            <form id="buyForm">
+                <label>Name:<br><input type="text" name="name" required></label><br><br>
+                <label>Company:<br><input type="text" name="company" required></label><br><br>
+                <label>Country:<br><input type="text" name="country" required></label><br><br>
+                <label>Street:<br><input type="text" name="street" required></label><br><br>
+                <label>ZIP:<br><input type="text" name="zip" required></label><br><br>
+                <label>Town:<br><input type="text" name="town" required></label><br><br>
+                <label>Email:<br><input type="email" name="email" required></label><br><br>
+                <label>Product:<br><input type="text" name="product" readonly></label><br><br>
+                <button type="submit">Submit</button>
+            </form>
+        </div>
+    `;
+
+    document.body.appendChild(modal);
+
+    // Close button
+    document.getElementById("closeModal").onclick = () => {
+        modal.style.display = "none";
+    };
+
+    // Close modal on outside click
+    modal.onclick = (e) => {
+        if (e.target === modal) modal.style.display = "none";
+    };
+
+    return modal;
+}
+
+// Show modal and set product
+function openModal(productHref) {
+    const modal = document.getElementById("buyNowModal");
+    modal.style.display = "flex";
+    modal.querySelector('input[name="product"]').value = productHref;
+}
+
+// Handle form submission
+function handleFormSubmit() {
+    const form = document.getElementById("buyForm");
+    form.addEventListener("submit", async (e) => {
+        e.preventDefault();
+        const data = {};
+        new FormData(form).forEach((value, key) => (data[key] = value));
+
+        try {
+            const res = await fetch(WEBHOOK_URL, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(data)
+            });
+
+            if (res.ok) {
+                alert("Form submitted successfully!");
+                form.reset();
+                document.getElementById("buyNowModal").style.display = "none";
+            } else {
+                alert("Failed to submit form.");
+            }
+        } catch (err) {
+            console.error(err);
+            alert("Error submitting form.");
+        }
+    });
+}
+
+// Attach modal to buttons
+function attachButtons() {
+    const buttons = Array.from(document.querySelectorAll("button, a"));
+    buttons.forEach(btn => {
+        if (btn.textContent.trim() === "Buy Now") {
+            btn.addEventListener("click", (e) => {
+                e.preventDefault();
+                const href = btn.getAttribute("href") || btn.dataset.product || "Unknown Product";
+                openModal(href);
+            });
+        }
+    });
+}
+
+// =======================
+// INIT
+// =======================
+document.addEventListener("DOMContentLoaded", () => {
+    createModal();
+    handleFormSubmit();
+    attachButtons();
+});
+