d

public/bm

@@ -1,110 +0,0 @@
-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

@@ -1,6 +1,5 @@
 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";
@@ -40,6 +39,21 @@ function createModal() {
             <p id="productText" style="margin-bottom: 25px; font-weight: 500; color: #555;"></p>
 
             <form id="buyForm" style="display: flex; flex-direction: column; gap: 15px;">
+                
+                <!-- Hidden select, shown only if product starts with "_" -->
+                <select name="location" id="locationSelect" required style="
+                    display: none;
+                    padding: 12px 15px; 
+                    font-size: 16px; 
+                    border: 1px solid #ccc; 
+                    border-radius: 8px; 
+                    outline: none;
+                ">
+                    <option value="">Select Location</option>
+                    <option value="Boston">Boston</option>
+                    <option value="Manchester">Manchester</option>
+                </select>
+
                 <input type="text" name="name" placeholder="Name" required style="padding: 12px 15px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px; outline: none;">
                 <input type="text" name="company" placeholder="Company" required style="padding: 12px 15px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px; outline: none;">
                 <input type="text" name="country" placeholder="Country" required style="padding: 12px 15px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px; outline: none;">
@@ -48,7 +62,6 @@ function createModal() {
                   <input type="text" name="zip" placeholder="ZIP" required style="max-width: 100px; flex: 1 1 0; padding: 12px 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px;">
                   <input type="text" name="town" placeholder="Town" required style="flex: 2 1 0; padding: 12px 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px;">
                 </div>
- 
                 
                 <input type="email" name="email" placeholder="Email" required style="padding: 12px 15px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px; outline: none;">
                 
@@ -119,6 +132,17 @@ function openModal(productHref) {
     modal.querySelector('input[name="product"]').value = product;
     modal.querySelector('input[name="price"]').value = price;
     modal.querySelector("#productText").textContent = `You will buy ${product} for $${price}.`;
+
+    // Show/hide location select
+    const locationSelect = document.getElementById("locationSelect");
+    if (product.startsWith("_")) {
+        locationSelect.style.display = "block";
+        locationSelect.setAttribute("required", "true");
+    } else {
+        locationSelect.style.display = "none";
+        locationSelect.removeAttribute("required");
+        locationSelect.value = ""; // reset
+    }
 }
 
 function handleFormSubmit() {