Hi fellow developpers,
I am struggling with a piece of custom code from the following template: Template Price Calculator - Airbnb Model - Free to Clone - Webflow
The goal is to calculate the number of nights between two dates and then multiply it with a price. The whole calculation should be triggered as soon as two dates are selected
I switched out the date picker to the one from flatpickr, however I cannot get it to work, I think it is connected with the trigger not working properly and unfortunately I do not fully understand this part of the code so I do not know how to adjust it.
Example:
date-1: 19.11.2022
date-2: 20.11.2022
Price = 50
nights = 1
Price * nights = 50
fee = 0.1 * 50 = 5
Total 55
Header:
<script>
var Webflow = Webflow || [];
Webflow.push(function () {
document.getElementsByClassName('date').flatpickr({
enableTime: false,
dateFormat: "d.m.Y",
// This outputs in the format of Month Day, Year HH:MM
// There are a LOT of ways to format and it's super easy to swap.
// See here: https://flatpickr.js.org/formatting/
});
});
</script>
<script>
var Webflow = Webflow || [];
Webflow.push(function () {
document.getElementsByClassName('time').flatpickr({
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
// This outputs in the format of Month Day, Year HH:MM
// There are a LOT of ways to format and it's super easy to swap.
// See here: https://flatpickr.js.org/formatting/
});
});
</script>
Body:
<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.estimator_close-dropdown').forEach(trigger => {
trigger.addEventListener('click', function(){
document.querySelectorAll('.estimator_people-dropdow-toggle.w-dropdown-toggle.w--open').forEach(target => target.classList.remove('w--open'));
document.querySelectorAll('.estimator_people-dropdown-list.w-dropdown-list.w--open').forEach(target => target.classList.remove('w--open'));
});
});
});
</script>
<script>
var day1, day2, Arrival, Departure, Days, Price, Subtotal, Services, Total;
Price = 0;
Subtotal = 0;
Services = 0;
Total = 0;
function Calculation() {
Price = '{{wf {"path":"rate-for-overnight-dog-hosting","type":"Number"\} }}'
Subtotal = Price * Days
Services = Subtotal * 0.1
Total = Subtotal + Services
document.getElementById('price').innerHTML = Price;
document.getElementById('price-2').innerHTML = Price;
document.getElementById('services').innerHTML = Services;
document.getElementById('subtotal').innerHTML = Subtotal;
document.getElementById('total').innerHTML = Total;
if (Days == 1 || 0 )
{$("#night-plural").hide();}
else
{$("#night-plural").show();}
}
$('[name="Date-1"]').change(function (){
day1 = document.getElementById("date-1").value
Arrival = Date.parse(day1);
Days = Math.abs(Departure - Arrival)/(1000 * 3600 * 24);
document.getElementById('night').innerHTML = Days;
Calculation ();
});
$('[name="Date-2"]').change(function (){
day2 = document.getElementById("date-2").value;
Departure = Date.parse(day2)
Days = Math.abs(Departure - Arrival)/(1000 * 3600 * 24)
;
document.getElementById('night').innerHTML = Days;
Calculation ();
});
</script>
Would be grateful for any times or also other easier code snippets I can use!
Thank you very much!!
Happy weekend!
Here is my site Read-Only: [LINK]