ba-block-cli
Version:
Auto-create blocks for WordPress ACF
228 lines (203 loc) • 10.8 kB
JavaScript
// DOM content loaded event listener
document.addEventListener('DOMContentLoaded', function() {
var calculators = document.querySelectorAll('.calculator-section');
if (calculators && calculators.length) {
calculators.forEach(function (calculator) {
calculatePrice(calculator);
var inputs = calculator.querySelectorAll('.js-calculator-form input, .js-calculator-form select');
if (inputs && inputs.length) {
inputs.forEach(function (input) {
input.addEventListener('input', function() {
calculatePrice(calculator);
});
});
}
// Toggle description
var toggls = calculator.querySelectorAll('.js-toggle');
if (toggls && toggls.length) {
toggls.forEach(function(toggle) {
toggle.addEventListener('click', function() {
var description = this.parentNode.querySelector('.description');
if (description) {
if (description.classList.contains('d-none')) {
description.classList.remove('d-none')
} else {
description.classList.add('d-none')
}
}
})
});
}
/**
* Calculate the price
* @param {DOMElement} calculator
*/
function calculatePrice(calculator) {
var cBasePrice = parseInt(calculator.querySelector('.js-type').value),
cGlobalFields = calculator.querySelectorAll('.js-global-field'),
cRelatedFields = calculator.querySelectorAll('.js-related-field'),
cPeriod = calculator.querySelector('.js-period-field'),
cHalfPrice = calculator.querySelector('.js-half-price'),
cHalfPriceField = calculator.querySelector('.js-half-price-field'),
cFixPrice = calculator.querySelector('.js-fix-price'),
cMonthlyPrice = calculator.querySelector('.js-monthly-price'),
cMonthlyPriceMessage = calculator.querySelector('.js-monthly-price-message'),
cMonthlyContainer = calculator.querySelector('.js-monthly-price-container'),
monthlyPriceDescription = calculator.querySelector('.js-monthly-price-description'),
descriptions = monthlyPriceDescription.querySelectorAll('.decription-wrapper'),
fixedPrice = cBasePrice,
monthlyPrice = 30;
/*
console.log({
cBasePrice: cBasePrice,
cGlobalFields: cGlobalFields,
cRelatedFields: cRelatedFields,
cPeriod: cPeriod,
cHalfPrice: cHalfPrice,
cFixPrice: cFixPrice,
cMonthlyPrice: cMonthlyPrice,
cMonthlyPriceMessage: cMonthlyPriceMessage,
cMonthlyContainer: cMonthlyContainer,
fixedPrice: fixedPrice,
monthlyPrice: monthlyPrice
});
*/
// Set Global field values
cGlobalFields.forEach(function(globalField) {
if (globalField.checked) {
fixedPrice += parseInt(globalField.value);
}
});
// Related fields action
cRelatedFields.forEach(function(cRelatedField) {
var trigger = parseInt(cRelatedField.getAttribute('data-trigger'));
if (trigger && trigger == cBasePrice) {
cRelatedField.parentNode.classList.remove('d-none');
if (cRelatedField.checked) {
fixedPrice += parseInt(cRelatedField.value);
}
} else {
cRelatedField.parentNode.classList.add('d-none');
}
});
// Set monthly price
if (cBasePrice > 300) {
monthlyPrice = cBasePrice / 10;
}
// Show / hide period message
var currentMessage = calculator.querySelector('.js-period .form-text:not(.d-none)'),
selectedPeriod = cPeriod.options[cPeriod.selectedIndex];
if (currentMessage) {
currentMessage.classList.add('d-none');
}
if (selectedPeriod) {
var messageSelector = selectedPeriod.getAttribute('data-selector'),
newMessage = calculator.querySelector(messageSelector);
if (newMessage) {
newMessage.classList.remove('d-none');
}
}
// Set period
cMonthlyPriceMessage.textContent = (parseInt(cPeriod.value) > 0) ?
cMonthlyPriceMessage.getAttribute('data-message').replace('[y]', parseInt(cPeriod.value)) :
'';
// Without maintenance
if (parseInt(cPeriod.value) < 1) {
// Disable all related fields
cHalfPriceField.setAttribute('disabled', true);
cHalfPrice.classList.add('disabled');
cMonthlyContainer.classList.add('d-none');
monthlyPriceDescription.classList.add('d-none');
// Set fixed price
fixedPrice = (fixedPrice * 2);
} else {
// Enable all related options
cHalfPriceField.removeAttribute('disabled');
cHalfPrice.classList.remove('disabled');
cMonthlyContainer.classList.remove('d-none');
monthlyPriceDescription.classList.remove('d-none');
// Check for related input values
if (parseInt(cPeriod.value) < 2) {
// Disable all related fields
cHalfPriceField.setAttribute('disabled', true);
cHalfPrice.classList.add('disabled');
// Calculate monthly value
monthlyPrice += Math.ceil(parseInt(monthlyPrice / 2));
} else {
// Enable all related options
cHalfPriceField.removeAttribute('disabled');
cHalfPrice.classList.remove('disabled');
// Check for half price, and calculate monthly value
if (cHalfPriceField.checked) {
fixedPrice = Math.ceil(fixedPrice / 2);
monthlyPrice += Math.ceil(parseInt((cBasePrice / 2) / 10));
}
// Reduce monthly price
monthlyPrice = monthlyPrice - parseInt(cPeriod.value) + 2;
}
}
// Set prices
cFixPrice.textContent = fixedPrice;
cMonthlyPrice.textContent= monthlyPrice;
// Fill the contact form
var calculatorData = document.getElementById('calculatorData');
if (calculatorData) {
// Set data
var data = '',
inputs = calculator.getElementsByTagName('input'),
selects = calculator.getElementsByTagName('select');
// Fetch the value from all fields
// Loop over the <select> elements
for (let i = 0; i < selects.length; i++) {
const select = selects[i],
label = findLabelForElement(select);
data = `${data} ${label ? label.trim() : select.name}: ${select.options[select.selectedIndex].text.trim()} \n`;
}
// Loop over the <input> elements
for (let i = 0; i < inputs.length; i++) {
const input = inputs[i];
if (input.type === "checkbox" && !input.checked) {
continue;
}
const label = findLabelForElement(input);
data = `${data} ${label ? label.trim() : input.name}: ${input.type === "checkbox" ? '✓' : input.value.trim()} \n`;
}
// Helper function to find the label for an input/select element
function findLabelForElement(element) {
let parent = element.parentNode,
label = parent.querySelector('label');
while (!label) {
parent = parent.parentNode,
label = parent.querySelector('label');
}
console.log(label);
return label.textContent;
}
// Add calculated price
data = `${data} Uplata na početku: ${fixedPrice}€ \n`;
// Without maintenance
if (parseInt(cPeriod.value)) {
data = `${data} Mesečno održavanje: ${monthlyPrice}€`;
}
// Add the data to the contact form
calculatorData.value = data;
}
// Set monthly price description
var set = false;
if (descriptions && descriptions.length) {
descriptions.forEach(description => {
var min = parseInt(description.getAttribute('data-min')),
max = parseInt(description.getAttribute('data-max'));
// console.log(min, max, monthlyPrice, set);
if (!set && monthlyPrice >= min && monthlyPrice <= max) {
description.classList.remove('d-none');
set = true;
} else {
description.classList.add('d-none');
}
});
}
}
});
}
});