Oliver/ODOO4projects.com
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pricing: remove monthly/yearly billing toggle, default to yearly

Browse Source 
- Remove billing-toggle-wrap HTML (switch + labels)
- Update all 4 pricing cards to show yearly prices by default
  with / year period and save percentage
- Simplify openOrderWidget() to always use yearly pricing only
- Remove billing toggle JS block (updatePrices, setBilling, event listeners)
- Remove billing toggle CSS (billing-toggle-wrap, .toggle-*, .toggle-switch)
- Update order widget default display to / year
- Update CTA note to 'Save money, less administration'
This commit is contained in:
reef
2026-08-20 10:38:03 +00:00
parent 3e9a6d5c4b
commit a2cfa09558
3 changed files with 24 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files
script.js
+6 -88
View File
@@ -112,7 +112,6 @@ var si = 0,
var orderPopupShown = false;
function openOrderWidget(
plan,
monthlyPrice,
yearlyPrice,
isEmpire,
) {
@@ -120,28 +119,15 @@ var si = 0,
"block";
var widget = document.getElementById("orderWidgetOverlay");
document.getElementById("orderPlanTitle").textContent = plan;
var yearly = yearlyMode;
var price = yearly ? yearlyPrice : monthlyPrice;
var price = yearlyPrice;
var amountEl = document.getElementById("orderPlanPrice");
var prefix = isEmpire ? ">$" : "$";
amountEl.textContent = prefix + " " + price.toFixed(2);
document.getElementById("orderPlanPeriod").textContent = yearly
? "/ year"
: "/ month";
var prefix = isEmpire ? ">" : "";
amountEl.textContent = prefix + "$ " + price.toFixed(2);
document.getElementById("orderPlanPeriod").textContent = "/ year";
var couponMsg = document.getElementById("orderCouponMsg");
var yearlySave = document.getElementById("orderYearlySave");
if (!yearly) {
couponMsg.style.display = "block";
yearlySave.style.display = "none";
} else {
couponMsg.style.display = "none";
yearlySave.style.display = "block";
var saved = Math.round(
(1 - yearlyPrice / (monthlyPrice * 12)) * 100,
);
document.getElementById("orderSavePercent").textContent =
saved;
}
couponMsg.style.display = "none";
yearlySave.style.display = "block";
var buyBtn = document.getElementById("orderBuyBtn");
var loc = document.getElementById("orderServerLocation").value;
buyBtn.href =
@@ -203,74 +189,6 @@ var si = 0,
}
status.style.display = "block";
}
/* ---- Billing Toggle ---- */
var yearlyMode = false;
var biSwitch = document.getElementById("billingSwitch");
var labels = document.querySelectorAll(".toggle-label");
var monthlyLabel = document.querySelector(".toggle-label-monthly");
var yearlyLabel = document.querySelector(".toggle-label-yearly");
function updatePrices(yearly) {
var amounts = document.querySelectorAll(".price-amount");
for (var k = 0; k < amounts.length; k++) {
var el = amounts[k];
var val = yearly
? el.getAttribute("data-yearly")
: el.getAttribute("data-monthly");
var prefix =
el.textContent.trim().charAt(0) === ">" ? ">" : "";
el.textContent = prefix + "$ " + parseFloat(val).toFixed(2);
}
var periods = document.querySelectorAll(".price-period");
for (var k = 0; k < periods.length; k++) {
periods[k].textContent = yearly ? "/ year" : "/ month";
}
var saves = document.querySelectorAll(".price-save");
for (var k = 0; k < saves.length; k++) {
var s = saves[k];
if (yearly) {
s.style.display = "block";
s.textContent = s.getAttribute("data-yearly-text");
} else {
s.style.display = "block";
s.textContent = s.getAttribute("data-monthly-text");
}
}
var ctaNote = document.getElementById("pricingCtaNote");
if (ctaNote) {
ctaNote.innerHTML = yearly
? "Save money, less administration"
: "Perfect for trial, termination any time";
}
}
function setBilling(yearly) {
yearlyMode = yearly;
if (yearly) {
biSwitch.classList.add("yearly");
monthlyLabel.classList.remove("active");
yearlyLabel.classList.add("active");
} else {
biSwitch.classList.remove("yearly");
monthlyLabel.classList.add("active");
yearlyLabel.classList.remove("active");
}
updatePrices(yearly);
}
biSwitch.addEventListener("click", function () {
setBilling(!yearlyMode);
});
monthlyLabel.addEventListener("click", function () {
setBilling(false);
});
yearlyLabel.addEventListener("click", function () {
setBilling(true);
});
/* init billing display to monthly */
updatePrices(false);
/* ---- Blog Module ---- */
var blogState = {
allPosts: [],