https://olivedrab-salamander-613735.hostingersite.com/wp-content/p…/assets/gwp2.js?ver=2.0.0

1(function () {
2
3  function $(sel, root) {
4    return (root || document).querySelector(sel);
5  }
6
7  function $all(sel, root) {
8    return Array.from((root || document).querySelectorAll(sel));
9  }
10
11  function fmtINR(n) {
12    try {
13      return new Intl.NumberFormat("en-IN").format(n);
14    } catch (e) {
15      return n;
16    }
17  }
18
19  // Classic GiveWP (legacy) amount input
20  function getGiveAmountInput(form) {
21    return form.querySelector('input[name="give-amount"]');
22  }
23
24  // GiveWP Visual Form (React) amount input (from your inspector screenshots)
25  function getGiveVisualAmountInput(root) {
26    return (
27      (root || document).querySelector("#amount-custom") ||
28      (root || document).querySelector(".givewp-fields-amount__input")
29    );
30  }
31
32  function triggerAmountEvents(el) {
33    if (!el) return;
34    try { el.dispatchEvent(new Event("input", { bubbles: true })); } catch (e) {}
35    try { el.dispatchEvent(new Event("change", { bubbles: true })); } catch (e) {}
36    try { el.dispatchEvent(new Event("keyup", { bubbles: true })); } catch (e) {}
37    try { el.dispatchEvent(new Event("blur", { bubbles: true })); } catch (e) {}
38  }
39
40  function ensureHiddenInputs(form) {
41    let prod = form.querySelector('input[name="gwp2_products_json"]');
42    if (!prod) {
43      prod = document.createElement("input");
44      prod.type = "hidden";
45      prod.name = "gwp2_products_json";
46      form.appendChild(prod);
47    }
48
49    let cid = form.querySelector('input[name="gwp2_cause_id"]');
50    if (!cid) {
51      cid = document.createElement("input");
52      cid.type = "hidden";
53      cid.name = "gwp2_cause_id";
54      form.appendChild(cid);
55    }
56
57    return { prod, cid };
58  }
59
60  function initCause(cause) {
61    const causeId = cause.dataset.causeId;
62    const cards = $all(".gwp2-card", cause);
63    const totalBar = $(".gwp2-total", cause);
64
65    // This is the GiveWP form rendered under the products (your PHP outputs do_shortcode)
66    const form = cause.querySelector("form");
67    if (!form) return;
68
69    const classicAmountInput = getGiveAmountInput(form); // may exist on some forms
70    const visualAmountInput = getGiveVisualAmountInput(cause) || getGiveVisualAmountInput(document);
71
72    // If neither input exists, we can't sync
73    if (!classicAmountInput && !visualAmountInput) return;
74
75    let cart = {};
76
77    function recalc() {
78      let total = 0;
79
80      Object.keys(cart).forEach((pid) => {
81        const card = cause.querySelector(`.gwp2-card[data-product-id="${pid}"]`);
82        if (!card) return;
83        const price = parseInt(card.dataset.price || "0", 10);
84        total += price * cart[pid];
85      });
86
87      // Update your custom UI
88      if (totalBar) {
89        totalBar.textContent = "₹" + fmtINR(total);
90      }
91
92      // --- IMPORTANT: push amount into GiveWP ---
93      if (classicAmountInput) {
94        classicAmountInput.value = total;
95        triggerAmountEvents(classicAmountInput);
96      }
97
98      if (visualAmountInput) {
99        visualAmountInput.value = total;
100        triggerAmountEvents(visualAmountInput);
101      }
102
103      // Metadata (used by your PHP hooks)
104      const h = ensureHiddenInputs(form);
105      h.prod.value = JSON.stringify(cart);
106      h.cid.value = causeId;
107    }
108
109    function setQty(card, qty) {
110      const pid = card.dataset.productId;
111
112      const addBtn = $(".gwp2-add", card);
113      const qtyBox = $(".gwp2-qty", card);
114      const count = $(".gwp2-count", card);
115
116      if (qty <= 0) {
117        delete cart[pid];
118        if (qtyBox) qtyBox.hidden = true;
119        if (addBtn) addBtn.hidden = false;
120      } else {
121        cart[pid] = qty;
122        if (count) count.textContent = qty;
123        if (qtyBox) qtyBox.hidden = false;
124        if (addBtn) addBtn.hidden = true;
125      }
126
127      recalc();
128    }
129
130    cards.forEach((card) => {
131      const add = $(".gwp2-add", card);
132      const minus = $(".gwp2-minus", card);
133      const plus = $(".gwp2-plus", card);
134
135      if (add) add.addEventListener("click", () => setQty(card, 1));
136
137      if (minus) {
138        minus.addEventListener("click", () =>
139          setQty(card, (cart[card.dataset.productId] || 1) - 1)
140        );
141      }
142
143      if (plus) {
144        plus.addEventListener("click", () =>
145          setQty(card, (cart[card.dataset.productId] || 0) + 1)
146        );
147      }
148    });
149
150    // Final safety sync before submit
151    form.addEventListener("submit", recalc);
152
153    // initial
154    recalc();
155  }
156
157  document.addEventListener("DOMContentLoaded", () => {
158    $all(".gwp2-cause").forEach(initCause);
159  });
160
161})();