hmm

public/bm

@@ -0,0 +1,110 @@
+const WEBHOOK_URL = "https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c76e6b4e-af2f-4bc3-9875-6460d0ffc8e3";
+
+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: 25px; border-radius: 12px; max-width: 450px; width: 95%; position: relative; font-family: sans-serif; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
+            <span id="closeModal" style="position: absolute; top: 10px; right: 15px; cursor: pointer; font-weight: bold; font-size: 20px;">&times;</span>
+            <h2 style="margin-bottom: 10px;">Order Details</h2>
+            <p id="productText" style="margin-bottom: 20px; font-weight: 500;"></p>
+ 
+           <form id="buyForm" style="display: flex; flex-direction: column; gap: 12px;">
+                <input type="text" name="name" placeholder="Name" required>
+                <input type="text" name="company" placeholder="Company" required>
+                <input type="text" name="country" placeholder="Country" required>
+                <input type="text" name="street" placeholder="Street" required>
+                <div style="display: flex; gap: 10px;">
+                    <input type="text" name="zip" placeholder="ZIP" required style="flex: 1;">
+                    <input type="text" name="town" placeholder="Town" required style="flex: 2;">
+                </div>
+                <input type="email" name="email" placeholder="Email" required>
+                <input type="hidden" name="product">
+                <input type="hidden" name="price">
+                <button type="submit" style="padding: 10px; background: #007BFF; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 16px;">Submit</button>
+            </form>
+        </div>
+    `;
+
+    document.body.appendChild(modal);
+    document.getElementById("closeModal").onclick = () => { modal.style.display = "none"; };
+    modal.onclick = (e) => { if (e.target === modal) modal.style.display = "none"; };
+    return modal;
+}
+
+function openModal(productHref) {
+    const modal = document.getElementById("buyNowModal");
+    modal.style.display = "flex";
+
+    let product = productHref;
+    let price = "";
+    if (productHref.includes("/")) {
+        const parts = productHref.split("/").filter(Boolean);
+        product = parts[parts.length - 2] || "Product";
+        price = parts[parts.length - 1] || "0";
+    }
+
+    modal.querySelector('input[name="product"]').value = product;
+    modal.querySelector('input[name="price"]').value = price;
+    modal.querySelector("#productText").textContent = `You will buy ${product} for $${price}.`;
+}
+
+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.");
+        }
+    });
+}
+
+function attachButtons() {
+    const buttons = Array.from(document.querySelectorAll("button, a"));
+    buttons.forEach(btn => {
+        const text = btn.textContent.trim();
+        if (text === "Buy Now" || text === "Book Now") {
+            btn.addEventListener("click", (e) => {
+                e.preventDefault();
+                const href = btn.getAttribute("href") || btn.dataset.product || "Unknown/0";
+                openModal(href);
+            });
+        }
+    });
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    createModal();
+    handleFormSubmit();
+    attachButtons();
+});
+

public/buyModal.js

@@ -117,15 +117,21 @@ function openModal(productHref) {
 }
 
 function handleFormSubmit() {
+console.log("handelFormSubmit")
     const form = document.getElementById("buyForm");
     const confirmation = document.getElementById("confirmation");
+console.log("A")
+    form.addEventListener("submit", async (e) => {i
+console.log("handler")
 
-    form.addEventListener("submit", async (e) => {
         e.preventDefault();
         const data = {};
         new FormData(form).forEach((value, key) => (data[key] = value));
+console.log("b")
 
         try {
+console.log("c")
+
             const res = await fetch(WEBHOOK_URL, {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
@@ -133,9 +139,11 @@ function handleFormSubmit() {
             });
 
             if (res.ok) {
-                form.style.display = "none";
+console.log("ASS")
+
                 confirmation.style.display = "block";
                 form.reset();
+                document.getElementById("buyNowModal").style.display = "none";
             } else {
                 alert("Failed to submit form.");
             }