UTM

public/buyModal.js

@@ -1,5 +1,32 @@
 const WEBHOOK_URL = "https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c76e6b4e-af2f-4bc3-9875-6460d0ffc8e3";
 
+// 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;
+}
+
+// Add UTM fields to form
+function addUtmFields(form) {
+    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] || "";
+    });
+}
+
 function createModal() {
     const modal = document.createElement("div");
     modal.id = "buyNowModal";
@@ -120,7 +147,6 @@ function createModal() {
     return modal;
 }
 
-
 function openModal(productHref) {
     const modal = document.getElementById("buyNowModal");
     modal.style.display = "flex";
@@ -140,8 +166,8 @@ function openModal(productHref) {
         const parts = productHref.split("/").filter(Boolean);
         id = parts[0] || "";
         price = parts[1] || "0";
-        product = parts.slice(2).join("/"); // Join remaining parts for product name
+        product = parts.slice(2).join("/"); 
-        product = decodeURIComponent(product); // Decode URL-encoded spaces etc.
+        product = decodeURIComponent(product);
     }
 
     // Show/hide location select if ID starts with "_"
@@ -152,15 +178,15 @@ function openModal(productHref) {
     } else {
         locationSelect.style.display = "none";
         locationSelect.removeAttribute("required");
-        locationSelect.value = ""; // reset
+        locationSelect.value = ""; 
     }
 
     // Set hidden inputs
-    modal.querySelector('input[name="product"]').value = product;
+    form.querySelector('input[name="product"]').value = product;
-    modal.querySelector('input[name="price"]').value = price;
+    form.querySelector('input[name="price"]').value = price;
 
     // Add or update hidden input for ID
-    let idInput = modal.querySelector('input[name="id"]');
+    let idInput = form.querySelector('input[name="id"]');
     if (!idInput) {
         idInput = document.createElement("input");
         idInput.type = "hidden";
@@ -169,11 +195,13 @@ function openModal(productHref) {
     }
     idInput.value = id;
 
+    // Update product text
     modal.querySelector("#productText").textContent = `You will buy ${product} for $${price}.`;
+
+    // Add/update UTM fields
+    addUtmFields(form);
 }
 
-
-
 function handleFormSubmit() {
     const form = document.getElementById("buyForm");
     const confirmation = document.getElementById("confirmation");
@@ -184,9 +212,11 @@ function handleFormSubmit() {
     }
 
     form.addEventListener("submit", async (e) => {
-        console.log("handler");
         e.preventDefault();
 
+        // Refresh UTM fields just before submitting
+        addUtmFields(form);
+
         const data = {};
         new FormData(form).forEach((value, key) => (data[key] = value));