| 1 |
/** |
| 2 |
* Storefront plan selector (free) — simple products. |
| 3 |
* |
| 4 |
* Pick a plan group (radio card), then a term (buttons). The chosen plan-term id |
| 5 |
* is written to a hidden field that posts with add-to-cart. Simple products only; |
| 6 |
* Pro adds variable-product support + extra plan types on top. Pure DOM, no API. |
| 7 |
*/ |
| 8 |
(function () { |
| 9 |
"use strict"; |
| 10 |
|
| 11 |
var box = document.querySelector("[data-subscrpt-buybox]"); |
| 12 |
if (!box) { |
| 13 |
return; |
| 14 |
} |
| 15 |
|
| 16 |
/** |
| 17 |
* Write the chosen plan-term id into the hidden field that posts with |
| 18 |
* add-to-cart. |
| 19 |
*/ |
| 20 |
function syncPlanId() { |
| 21 |
var hidden = box.querySelector("[data-subscrpt-plan-id]"); |
| 22 |
if (!hidden) { |
| 23 |
return; |
| 24 |
} |
| 25 |
var checked = box.querySelector('input[name="subscrpt_plan_group"]:checked'); |
| 26 |
var card = checked ? checked.closest("[data-subscrpt-card]") : null; |
| 27 |
var planId = ""; |
| 28 |
if (card) { |
| 29 |
var activeBtn = card.querySelector("[data-subscrpt-term-btn].is-active"); |
| 30 |
if (activeBtn) { |
| 31 |
planId = activeBtn.getAttribute("data-term-id"); |
| 32 |
} else if (card.hasAttribute("data-subscrpt-single-term")) { |
| 33 |
planId = card.getAttribute("data-subscrpt-single-term"); |
| 34 |
} |
| 35 |
} |
| 36 |
hidden.value = planId || ""; |
| 37 |
} |
| 38 |
|
| 39 |
// Selecting a card (radio) marks it and syncs the posted plan id. |
| 40 |
box.addEventListener("change", function (e) { |
| 41 |
if (e.target.name !== "subscrpt_plan_group") { |
| 42 |
return; |
| 43 |
} |
| 44 |
box.querySelectorAll("[data-subscrpt-card]").forEach(function (card) { |
| 45 |
card.classList.remove("is-selected"); |
| 46 |
}); |
| 47 |
var card = e.target.closest("[data-subscrpt-card]"); |
| 48 |
if (card) { |
| 49 |
card.classList.add("is-selected"); |
| 50 |
} |
| 51 |
syncPlanId(); |
| 52 |
}); |
| 53 |
|
| 54 |
// Choosing a term button updates that card's note and selects the card. |
| 55 |
box.addEventListener("click", function (e) { |
| 56 |
var btn = e.target.closest("[data-subscrpt-term-btn]"); |
| 57 |
if (!btn) { |
| 58 |
return; |
| 59 |
} |
| 60 |
e.preventDefault(); |
| 61 |
var wrap = btn.closest("[data-subscrpt-card]"); |
| 62 |
if (!wrap) { |
| 63 |
return; |
| 64 |
} |
| 65 |
|
| 66 |
wrap.querySelectorAll("[data-subscrpt-term-btn]").forEach(function (b) { |
| 67 |
b.classList.remove("is-active"); |
| 68 |
}); |
| 69 |
btn.classList.add("is-active"); |
| 70 |
|
| 71 |
var noteEl = wrap.querySelector("[data-subscrpt-note]"); |
| 72 |
if (noteEl) { |
| 73 |
// Note is server-built HTML (may include a struck-through regular price). |
| 74 |
noteEl.innerHTML = btn.getAttribute("data-note") || ""; |
| 75 |
} |
| 76 |
|
| 77 |
var radio = wrap.querySelector('input[name="subscrpt_plan_group"]'); |
| 78 |
if (radio && !radio.checked) { |
| 79 |
radio.checked = true; |
| 80 |
radio.dispatchEvent(new Event("change", { bubbles: true })); |
| 81 |
} |
| 82 |
syncPlanId(); |
| 83 |
}); |
| 84 |
|
| 85 |
// Initialise the hidden plan id from the pre-selected (first) card. |
| 86 |
syncPlanId(); |
| 87 |
})(); |
| 88 |
|
