tier-range-slider-calulator
Global
document.addEventListener("DOMContentLoaded", () => {
const sliders = document.querySelectorAll(".credit-slider");
// Event listener for each slider to update fill color
sliders.forEach((slider) => {
slider.addEventListener("input", function () {
const max = this.max || 100; // Default max if not specified
const percentage = ((this.value - this.min) / (max - this.min)) * 100;
// Update CSS variables for fill color and percentage
this.style.setProperty("--slider-fill-percentage", `${percentage}%`);
});
});
// Elements for displaying total and suggested tier
const totalOutput = document.getElementById("total-credits");
const suggestedTierOutput = document.getElementById("suggested-tier-output"); // Make sure to replace with your actual element ID
// Slider configurations
const slidersConfig = {
monthlyInvoices: {
slider: document.getElementById("monthly-invoices-slider"),
outputLabel: document.getElementById("monthly-invoices-value"),
},
invoicesPercentage: {
slider: document.getElementById("invoices-percentage-slider"),
outputLabel: document.getElementById("invoices-percentage-value"),
},
bankStatements: {
slider: document.getElementById("bank-statements-slider"),
outputLabel: document.getElementById("bank-statements-value"),
},
};
// Function to update the value display of each slider
const updateSliderDisplay = (slider, outputLabel) => {
outputLabel.childNodes[0].textContent = slider.value;
};
// Add event listeners to sliders
Object.values(slidersConfig).forEach(({ slider, outputLabel }) => {
slider.addEventListener("input", () => {
updateSliderDisplay(slider, outputLabel);
updateTotalAndTier();
});
});
// Function to calculate total credits
function calculateTotal() {
const { monthlyInvoices, invoicesPercentage, bankStatements } =
slidersConfig;
const monthlyInvoicesValue = +monthlyInvoices.slider.value;
const invoicesPercentageValue = +invoicesPercentage.slider.value / 100;
const bankStatementsValue = +bankStatements.slider.value;
return Math.round(
monthlyInvoicesValue * invoicesPercentageValue +
monthlyInvoicesValue +
bankStatementsValue * 3
);
}
// Function to determine and update the suggested tier
function updateSuggestedTier(total) {
let tierName;
// Tier logic (adjust according to your requirements)
if (total <= 0) tierName = "None";
else if (total < 50) tierName = "Bronze";
else if (total < 100) tierName = "Silver";
else if (total < 200) tierName = "Gold";
else if (total < 500) tierName = "Platinum";
else if (total < 1500) tierName = "Diamond";
else if (total < 2500) tierName = "Sapphire";
else tierName = "Please book a demo for a customised package";
suggestedTierOutput.textContent = tierName;
}
// Function to update total credits and suggested tier
function updateTotalAndTier() {
const total = calculateTotal();
totalOutput.textContent = total;
updateSuggestedTier(total);
}
// Initialize by setting initial values
updateTotalAndTier();
});
default_first_tab_published_site
Global
// Get all the 'w-tabs' elements on the page
var allTabs = document.querySelectorAll(".w-tabs");
// Loop through each 'w-tabs' element
allTabs.forEach(function(tabs) {
// Select the first tab link and the first tab pane within this specific 'w-tabs' container
var firstTab = tabs.querySelector(".w-tab-link:first-child");
var firstTabPane = tabs.querySelector(".w-tab-pane:first-child");
// Check if the elements exist to avoid errors
if (firstTab && firstTabPane) {
// Add the 'w--current' class to the first tab link and pane to make them active
firstTab.classList.add("w--current");
firstTabPane.classList.add("w--current");
}
});ae-countdown-cms
Global
// Ensure the latest version of moment-timezone is loaded
const script = document.createElement('script');
script.src =
'https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.34/moment-timezone-with-data.min.js';
document.head.appendChild(script);
// Converts a given date string to the ISO8601 format more reliably
function convertToISO8601(dateStr) {
const [date, time] = dateStr.split(' ');
return `${date}T${time}:00Z`; // Ensure it ends with 'Z' for UTC time
}
// Updates the deadline based on the 'data-countdown' attribute
function updateDeadline() {
const sourceElement = document.querySelector('[data-countdown="new-deadline-cms"]');
if (!sourceElement) {
console.error('Source element not found');
return;
}
const dateString = sourceElement.textContent.trim();
const isoDateString = convertToISO8601(dateString);
const targetElement = document.querySelector('[data-countdown="new-deadline"]');
if (!targetElement) {
console.error('Target element not found');
return;
}
targetElement.textContent = isoDateString;
}
// Calculate the time remaining until a deadline, considering time zone specifics
function getTimeRemaining(endtime, deadlineTimeZone, userTimeZone) {
const userCurrentTime = moment().tz(userTimeZone);
const deadlineTime = moment.tz(endtime, deadlineTimeZone);
console.log("User Current Time:", userCurrentTime.format());
console.log("Deadline Time:", deadlineTime.format());
let timeDiffMilliseconds = deadlineTime.diff(userCurrentTime);
console.log("Time Difference in Milliseconds:", timeDiffMilliseconds);
if (timeDiffMilliseconds < 0) {
return { days: 0, hours: 0, minutes: 0, seconds: 0, total: 0, expired: true };
}
return {
days: Math.floor(timeDiffMilliseconds / (1000 * 60 * 60 * 24)),
hours: Math.floor((timeDiffMilliseconds / (1000 * 60 * 60)) % 24),
minutes: Math.floor((timeDiffMilliseconds / 1000 / 60) % 60),
seconds: Math.floor((timeDiffMilliseconds / 1000) % 60),
total: timeDiffMilliseconds,
expired: false
};
}
// Updates the countdown display on the webpage
function updateCountdownDisplay(time) {
document.querySelector('[data-countdown="js-clock-days"]').innerText = time.days.toString()
.padStart(2, '0');
document.querySelector('[data-countdown="js-clock-hours"]').innerText = time.hours.toString()
.padStart(2, '0');
document.querySelector('[data-countdown="js-clock-minutes"]').innerText = time.minutes.toString()
.padStart(2, '0');
document.querySelector('[data-countdown="js-clock-seconds"]').innerText = time.seconds.toString()
.padStart(2, '0');
if (time.expired) {
document.querySelector('[data-countdown="js-clock"]').style.display = 'none';
document.querySelector('[data-countdown="after-deadline"]').style.display = 'block';
document.querySelector('[data-countdown="banner"]').style.display = 'none';
}
}
// Main function to start and manage the countdown timer
function clock(endtime, deadlineTimeZone, userTimeZone) {
clearInterval(window.timeinterval);
window.timeinterval = setInterval(() => {
const time = getTimeRemaining(endtime, deadlineTimeZone, userTimeZone);
if (time.total <= 0) {
clearInterval(window.timeinterval);
updateCountdownDisplay(time);
} else {
updateCountdownDisplay(time);
}
}, 1000);
}
// Start the countdown
function startCountdown() {
const newDeadlineElement = document.querySelector('[data-countdown="new-deadline"]');
const deadlineTimeZoneElement = document.querySelector('[data-countdown="deadline-zone"]');
const userTimeZone = moment.tz.guess();
if (newDeadlineElement && deadlineTimeZoneElement) {
const deadline = newDeadlineElement.textContent.trim();
// Assume the time zone information is the second part after splitting and strip any additional info or spaces
let deadlineTimeZone = deadlineTimeZoneElement.textContent.trim().split(":")[2].trim();
console.log("Starting countdown to:", deadline, "in time zone:", deadlineTimeZone);
console.log("User's current time zone:", userTimeZone);
clock(deadline, deadlineTimeZone, userTimeZone);
} else {
console.error("Deadline element or deadline time zone element not found.");
}
}
updateDeadline();
startCountdown();
ae-countdown-convert-cms-date
Global
function convertToISO8601(dateStr) {
// Properly format the string to ISO 8601 by inserting 'T' and adding ':00' for seconds
return dateStr.replace(' ', 'T') + ':00';
}
function updateDeadline() {
// Select the element with the 'new-deadline-cms' attribute
const sourceElement = document.querySelector('[data-countdown="new-deadline-cms"]');
const dateString = sourceElement.textContent.trim();
const isoDateString = convertToISO8601(dateString);
// Select the element where the new ISO date should be set
const targetElement = document.querySelector('[data-countdown="new-deadline"]');
// Update the text content of the target element with the new formatted date
targetElement.textContent = isoDateString;
// Optionally, you might want to update the display or log to console
console.log(isoDateString); // Outputs the new formatted date
// targetElement.textContent = isoDateString; // Uncomment if you want to display it
}
// Call the function when appropriate, e.g., after the document has loaded
updateDeadline();
ae-multi-swiper-slider-news-insights
Global
function initializeSwiper(selector, nextEl, prevEl) {
return new Swiper(selector, {
loop: true,
slidesPerView: 1,
spaceBetween: 16,
allowTouchMove: false,
navigation: {
nextEl: nextEl,
prevEl: prevEl
},
breakpoints: {
767: {
slidesPerView: 3
}
}
});
}
const articlesSlider = initializeSwiper(".swiper.is-articles", ".swiper-btn-next-article",
".swiper-btn-prev-article");
const caseStudiesSlider = initializeSwiper(".swiper.is-case-studies", ".swiper-btn-next-case-study",
".swiper-btn-prev-case-study");
const newsSlider = initializeSwiper(".swiper.is-news", ".swiper-btn-next-news",
".swiper-btn-prev-news");
const makingTaxDigitalSlider = initializeSwiper(".swiper.is-making-tax-digital",
".swiper-btn-next-tax-digital", ".swiper-btn-prev-tax-digital");
ae-pricing-toggle.js
Global
// Select the input element that will trigger the toggle
const accountantSwitch = document.querySelector('input[switch="accountants-business"]');
// Set the default checked state to true if you want the accountant elements hidden and business elements shown
accountantSwitch.checked =
true; // Business elements shown and active, accountant elements hidden by default
// Correcting the attribute selector to match intended elements
const businessElements = document.querySelectorAll('[switch="business"]');
const accountantElements = document.querySelectorAll('[switch="accountants"]');
// Select the elements that need to have their 'active' class toggled
const triggerAccountantElement = document.querySelector('[switch="trigger_accountants"]');
const triggerBusinessElement = document.querySelector('[switch="trigger_businesses"]');
// Attach a change event listener to the switch
accountantSwitch.addEventListener('change', function () {
// Toggle visibility for business and accountant elements
businessElements.forEach(element => {
element.classList.toggle('active', !this.checked);
element.classList.toggle('hidden', this.checked); // Now also toggles 'active'
});
accountantElements.forEach(element => {
element.classList.toggle('active', this.checked);
element.classList.toggle('hidden', !this.checked); // Now also toggles 'active'
});
// Directly toggle 'active' class on trigger elements based on the checkbox's checked state
if (triggerAccountantElement) {
triggerAccountantElement.classList.toggle('active', !this.checked);
}
if (triggerBusinessElement) {
triggerBusinessElement.classList.toggle('active', this.checked);
}
});
// Initialize the 'active' class for triggerBusinessElement
if (triggerBusinessElement) {
triggerBusinessElement.classList.add('active'); // Ensures it starts active
}
// Manually trigger the change event to sync the initial state
accountantSwitch.dispatchEvent(new Event('change'));
ae-swiper-slider-accountants-bookkeepers
function initializeSwiper(selector, nextEl, prevEl) {
return new Swiper(selector, {
loop: true,
slidesPerView: 1,
spaceBetween: 16,
allowTouchMove: false,
navigation: {
nextEl: nextEl,
prevEl: prevEl
},
pagination: { // Moved out of 'navigation'
el: '.swiper-pagination',
},
breakpoints: {
767: {
slidesPerView: 1 // This is only needed if different from the default
}
}
});
}
initializeSwiper(
".swiper.is-testimonial-accountants-bookkeepers",
".swiper-button.swiper-btn-next-testimonial-accountants-bookkeepers",
".swiper-button.swiper-btn-prev-testimonial-accountants-bookkeepers"
);
ae-tracking-get-demo-get-for-free-ctas
Global
// Function to track button click events
function trackButton(button) {
var buttonText = button.textContent || button.innerText; // Get the button text
var destinationUrl = button.getAttribute('href') || '#'; // Default destination URL
// Adjust destination URL for specific buttons
if (button.id === 'sales-call') {
destinationUrl = 'Special handling for sales-call popup'; // Adjust based on your logic
}
// Send the data using Tealium's utag.link method
utag.link({
"event_name": "cta_click",
"destination_url": destinationUrl, // Dynamically filled
"element_text": buttonText, // Dynamically filled
"element_id": button.id || '', // Dynamically filled
"element_class": button.className, // Dynamically filled
"event_category": "component", // Updated category
"event_action": "button_click",
"event_label": buttonText, // Dynamically filled
"event_name_level_2": window.location.href // Current page URL
});
// Console log for debugging
console.log('CTA click tracked:', buttonText, destinationUrl);
}
// Function to add event listener to a button
function addButtonListener(button) {
button.addEventListener('click', function (event) {
trackButton(this);
}, false); // The 'false' parameter ensures the event is captured in the bubbling phase
}
// Select CTA buttons using the shared class '.btn-default.x-outline' and the new classes '.w-button.tracked-cta', then add event listeners
var buttons = document.querySelectorAll('.btn-default.x-outline, .w-button.tracked-cta');
buttons.forEach(addButtonListener);
No Used - ae-make-fist-tab-default.js
Global
// Not in used - solution in codesandbox
// Get all the 'w-tabs' elements on the page
var allTabs = document.querySelectorAll(".w-tabs");
// Loop through each 'w-tabs' element
allTabs.forEach(function (tabs) {
// Select the first tab link and the first tab pane within this specific 'w-tabs' container
var firstTab = tabs.querySelector(".w-tab-link:first-child");
var firstTabPane = tabs.querySelector(".w-tab-pane:first-child");
// Check if the elements exist to avoid errors
if (firstTab && firstTabPane) {
// Add the 'w--current' class to the first tab link and pane to make them active
firstTab.classList.add("w--current");
firstTabPane.classList.add("w--current");
}
});
Commented -ae-tracking-contact-page-cta.js
Global
/*function trackButton(button) {
var buttonText = button.textContent || button.innerText; // Get the button text
var destinationUrl = button.getAttribute('href') || '#'; // Default destination URL
// Adjust destination URL for specific buttons
if (button.id === 'sales-call') {
destinationUrl = 'Special handling for sales-call popup'; // Adjust based on your logic
}
// Send the data using Tealium's utag.link method
utag.link({
"event_name": "cta_click",
"destination_url": destinationUrl, // Now dynamically filled
"element_text": buttonText, // Now dynamically filled
"element_id": button.id || '', // Now dynamically filled
"element_class": button.className, // Now dynamically filled
"event_category": "component", // Updated category
"event_action": "button_click",
"event_label": buttonText, // Now dynamically filled
"event_name_level_2": window.location.href // Current page URL
});
// Console log for debugging
console.log('CTA click tracked:', buttonText, destinationUrl);
}
// Function to add event listener to a button
function addButtonListener(button) {
button.addEventListener('click', function (event) {
trackButton(this);
}, false); // The 'false' parameter ensures the event is captured in the bubbling phase
}
// Select CTA buttons using the shared class combo '.btn-default.x-outline' and add event listeners
var buttons = document.querySelectorAll('.btn-default.x-outline');
buttons.forEach(addButtonListener);
*/