diff --git a/public/buyModal.js b/public/buyModal.js index d3d85f7..99889a5 100644 --- a/public/buyModal.js +++ b/public/buyModal.js @@ -1,263 +1,198 @@ -const WEBHOOK_URL = "https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c76e6b4e-af2f-4bc3-9875-6460d0ffc8e3"; +// --- Category Configuration --- +const CATEGORY_CONFIG = { + 3: { showLocation: true, webhook: "https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c76e6b4e-af2f-4bc3-9875-6460d0ffc8e3" }, // services + 4: { showLocation: true, webhook: "https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c76e6b4e-af2f-4bc3-9875-6460d0ffc8e3" }, // hosting + 5: { showLocation: true, webhook: "https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c76e6b4e-af2f-4bc3-9875-6460d0ffc8e3" }, // Workshops + 7: { showLocation: false, webhook: "https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c76e6b4e-af2f-4bc3-9875-6460d0ffc8e3" }, // modules + // Add more categories as needed +}; -// Get URL parameters as an object +// --- Get URL parameters as an object --- function getUrlParams() { - const params = {}; - window.location.search.substring(1).split("&").forEach(pair => { - const [key, value] = pair.split("="); - if (key) params[decodeURIComponent(key)] = decodeURIComponent(value || ""); - }); - return params; + return Object.fromEntries(new URLSearchParams(window.location.search).entries()); } -// Add UTM fields to form +// --- Add UTM fields to form --- function addUtmFields(form) { - const utmParams = ["utm_source", "utm_medium", "utm_campaign", "utm_term", "utm_content"]; - const urlParams = getUrlParams(); + const utmParams = ["utm_source", "utm_medium", "utm_campaign", "utm_term", "utm_content"]; + const urlParams = getUrlParams(); - utmParams.forEach(param => { - let input = form.querySelector(`input[name="${param}"]`); - if (!input) { - input = document.createElement("input"); - input.type = "hidden"; - input.name = param; - form.appendChild(input); - } - input.value = urlParams[param] || ""; - }); + utmParams.forEach(param => { + let input = form.querySelector(`input[name="${param}"]`); + if (!input) { + input = document.createElement("input"); + input.type = "hidden"; + input.name = param; + form.appendChild(input); + } + input.value = urlParams[param] || ""; + }); } +// --- Create Modal --- 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.6)"; - modal.style.display = "none"; - modal.style.justifyContent = "center"; - modal.style.alignItems = "center"; - modal.style.zIndex = "1000"; + const modal = document.createElement("div"); + modal.id = "buyNowModal"; + Object.assign(modal.style, { + position: "fixed", + top: "0", + left: "0", + width: "100%", + height: "100%", + backgroundColor: "rgba(0,0,0,0.6)", + display: "none", + justifyContent: "center", + alignItems: "center", + zIndex: "1000" + }); - modal.innerHTML = ` -
- × - -

Order Details

-

+ modal.innerHTML = ` +
+ × +

Order Details

+

-
- - - + + - - - - -
- - -
- - - - - - - -
- -
-

Thank you for your purchase! 🎉

- -
+ + + + +
+ +
- `; + + + + + - document.body.appendChild(modal); + + - // Close modal - document.getElementById("closeModal").onclick = () => { document.getElementById("buyNowModal").style.display = "none"; }; - document.getElementById("closeConfirmation").onclick = () => { - document.getElementById("confirmation").style.display = "none"; - document.getElementById("buyNowModal").style.display = "none"; - }; - modal.onclick = (e) => { if (e.target === modal) modal.style.display = "none"; }; + +
+ `; - return modal; + document.body.appendChild(modal); + document.getElementById("closeModal").onclick = () => modal.style.display = "none"; + document.getElementById("closeConfirmation").onclick = () => { + document.getElementById("confirmation").style.display = "none"; + modal.style.display = "none"; + }; + modal.onclick = e => { if (e.target === modal) modal.style.display = "none"; }; + return modal; } +// --- Open Modal --- function openModal(productHref) { - const modal = document.getElementById("buyNowModal"); - modal.style.display = "flex"; + const modal = document.getElementById("buyNowModal"); + const form = modal.querySelector("#buyForm"); + const confirmation = modal.querySelector("#confirmation"); + modal.style.display = "flex"; + form.style.display = "flex"; + confirmation.style.display = "none"; - // Reset form display for repeated orders - const form = modal.querySelector("#buyForm"); - const confirmation = modal.querySelector("#confirmation"); - form.style.display = "flex"; - confirmation.style.display = "none"; + // Parse URL //// + const parts = productHref.split("/").filter(Boolean); + const [id, price, category, ...productParts] = parts; + const product = decodeURIComponent(productParts.join("/")); + const categoryNum = parseInt(category, 10); + const config = CATEGORY_CONFIG[categoryNum] || { showLocation: false, webhook: "" }; - // Parse productHref - let product = "Unknown"; - let price = "0"; - let id = ""; + // Handle location field visibility + const locationSelect = document.getElementById("locationSelect"); + if (config.showLocation) { + locationSelect.style.display = "block"; + locationSelect.setAttribute("required", "true"); + } else { + locationSelect.style.display = "none"; + locationSelect.removeAttribute("required"); + locationSelect.value = ""; + } - if (productHref.includes("/")) { - const parts = productHref.split("/").filter(Boolean); - id = parts[0] || ""; - price = parts[1] || "0"; - product = parts.slice(2).join("/"); - product = decodeURIComponent(product); - } + // Update form fields + form.querySelector('input[name="id"]').value = id || ""; + form.querySelector('input[name="price"]').value = price || "0"; + form.querySelector('input[name="category"]').value = category || ""; + form.querySelector('input[name="product"]').value = product || "Unknown"; - // Show/hide location select if ID starts with "_" - const locationSelect = document.getElementById("locationSelect"); - if (id.startsWith("_")) { - locationSelect.style.display = "block"; - locationSelect.setAttribute("required", "true"); - } else { - locationSelect.style.display = "none"; - locationSelect.removeAttribute("required"); - locationSelect.value = ""; - } + // Store webhook dynamically for submission + form.dataset.webhook = config.webhook || ""; - // Set hidden inputs - form.querySelector('input[name="product"]').value = product; - form.querySelector('input[name="price"]').value = price; + // Update display text + modal.querySelector("#productText").textContent = `You will buy ${product} for $${price}.`; - // Add or update hidden input for ID - let idInput = form.querySelector('input[name="id"]'); - if (!idInput) { - idInput = document.createElement("input"); - idInput.type = "hidden"; - idInput.name = "id"; - form.appendChild(idInput); - } - idInput.value = id; - - // Update product text - modal.querySelector("#productText").textContent = `You will buy ${product} for $${price}.`; - - // Add/update UTM fields - addUtmFields(form); + // Add UTM fields + addUtmFields(form); } +// --- Handle Form Submit --- function handleFormSubmit() { - const form = document.getElementById("buyForm"); - const confirmation = document.getElementById("confirmation"); + const form = document.getElementById("buyForm"); + const confirmation = document.getElementById("confirmation"); - if (!form) { - console.error("Form not found!"); - return; + form.addEventListener("submit", async (e) => { + e.preventDefault(); + addUtmFields(form); + + const data = Object.fromEntries(new FormData(form).entries()); + const webhookUrl = form.dataset.webhook; + + if (!webhookUrl) { + alert("No webhook configured for this category."); + return; } - form.addEventListener("submit", async (e) => { - e.preventDefault(); + try { + const res = await fetch(webhookUrl, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(data), + }); - // Refresh UTM fields just before submitting - addUtmFields(form); - - 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) { - form.style.display = "none"; - confirmation.style.display = "block"; - form.reset(); - } else { - alert("Failed to submit form."); - } - } catch (err) { - console.error(err); - alert("Error submitting form."); - } - }); + if (res.ok) { + form.style.display = "none"; + confirmation.style.display = "block"; + form.reset(); + } else { + alert("Failed to submit form."); + } + } catch (err) { + console.error(err); + alert("Error submitting form."); + } + }); } +// --- Attach Buttons --- 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); - }); - } - }); + 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/0"; + openModal(href); + }); + } + }); } +// --- Initialize --- document.addEventListener("DOMContentLoaded", () => { - createModal(); - handleFormSubmit(); - attachButtons(); + createModal(); + handleFormSubmit(); + attachButtons(); }); diff --git a/public/buyModal.min.js b/public/buyModal.min.js new file mode 100644 index 0000000..06a5a93 --- /dev/null +++ b/public/buyModal.min.js @@ -0,0 +1 @@ +const CATEGORY_CONFIG={3:{showLocation:!0,webhook:"https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c76e6b4e-af2f-4bc3-9875-6460d0ffc8e3"},4:{showLocation:!0,webhook:"https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c76e6b4e-af2f-4bc3-9875-6460d0ffc8e3"},5:{showLocation:!0,webhook:"https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c76e6b4e-af2f-4bc3-9875-6460d0ffc8e3"},7:{showLocation:!1,webhook:"https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c76e6b4e-af2f-4bc3-9875-6460d0ffc8e3"}};function getUrlParams(){return Object.fromEntries(new URLSearchParams(window.location.search).entries())}function addUtmFields(e){const t=getUrlParams();["utm_source","utm_medium","utm_campaign","utm_term","utm_content"].forEach(o=>{let n=e.querySelector(`input[name="${o}"]`);n||(n=document.createElement("input"),n.type="hidden",n.name=o,e.appendChild(n)),n.value=t[o]||""})}function createModal(){const e=document.createElement("div");return e.id="buyNowModal",Object.assign(e.style,{position:"fixed",top:"0",left:"0",width:"100%",height:"100%",backgroundColor:"rgba(0,0,0,0.6)",display:"none",justifyContent:"center",alignItems:"center",zIndex:"1000"}),e.innerHTML='\n
\n ×\n

Order Details

\n

\n\n
\n \n\n \n \n \n \n
\n \n \n
\n \n \n \n \n \n\n \n
\n\n \n
\n ',document.body.appendChild(e),document.getElementById("closeModal").onclick=()=>e.style.display="none",document.getElementById("closeConfirmation").onclick=()=>{document.getElementById("confirmation").style.display="none",e.style.display="none"},e.onclick=t=>{t.target===e&&(e.style.display="none")},e}function openModal(e){const t=document.getElementById("buyNowModal"),o=t.querySelector("#buyForm"),n=t.querySelector("#confirmation");t.style.display="flex",o.style.display="flex",n.style.display="none";const d=e.split("/").filter(Boolean),[r,i,a,...c]=d,p=decodeURIComponent(c.join("/")),l=parseInt(a,10),s=CATEGORY_CONFIG[l]||{showLocation:!1,webhook:""},u=document.getElementById("locationSelect");s.showLocation?(u.style.display="block",u.setAttribute("required","true")):(u.style.display="none",u.removeAttribute("required"),u.value=""),o.querySelector('input[name="id"]').value=r||"",o.querySelector('input[name="price"]').value=i||"0",o.querySelector('input[name="category"]').value=a||"",o.querySelector('input[name="product"]').value=p||"Unknown",o.dataset.webhook=s.webhook||"",t.querySelector("#productText").textContent=`You will buy ${p} for $${i}.`,addUtmFields(o)}function handleFormSubmit(){const e=document.getElementById("buyForm"),t=document.getElementById("confirmation");e.addEventListener("submit",async o=>{o.preventDefault(),addUtmFields(e);const n=Object.fromEntries(new FormData(e).entries()),d=e.dataset.webhook;if(d)try{(await fetch(d,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(n)})).ok?(e.style.display="none",t.style.display="block",e.reset()):alert("Failed to submit form.")}catch(e){console.error(e),alert("Error submitting form.")}else alert("No webhook configured for this category.")})}function attachButtons(){Array.from(document.querySelectorAll("button, a")).forEach(e=>{const t=e.textContent.trim();"Buy Now"!==t&&"Book Now"!==t||e.addEventListener("click",t=>{t.preventDefault();openModal(e.getAttribute("href")||e.dataset.product||"Unknown/0/0")})})}document.addEventListener("DOMContentLoaded",()=>{createModal(),handleFormSubmit(),attachButtons()}); \ No newline at end of file diff --git a/public/minify b/public/minify new file mode 100755 index 0000000..ce6571c --- /dev/null +++ b/public/minify @@ -0,0 +1,4 @@ +#!/bin/bash +npm install -g terser +terser buyModal.js -o buyModal.min.js -c -m +