Feature: Implement store open/closed status with override
This commit introduces functionality to display the store's open/closed status based on a schedule, with an override mechanism for holidays or emergencies. Changes include: - : Added IDs to hours paragraphs for easier manipulation. - : Refactored to be more robust and moved its logic to to prevent race conditions. Removed for status updates from . Fixed lightbox navigation. - : Added (boolean) and (string) fields to allow overriding the default status. - : Consolidated all status logic. It now acts as a gatekeeper: - If in is , it displays and ensures hours are visible. - If is , it runs the scheduled open/closed logic (originally from ) and updates the status every minute, ensuring hours are always visible. - : Reverted accidental changes and ensured only necessary status-related styles were added. This ensures: - The store's current open/closed status is always displayed. - An override message can be shown for special closures. - Store hours are always visible.
This commit is contained in:
parent
0505f0a641
commit
721bf65ed3
@ -112,9 +112,9 @@
|
||||
|
||||
<p class="has-text-centered is-size-1">Shop Hours</p>
|
||||
<p id="status" class="has-text-centered"></p>
|
||||
<p class="has-text-centered">Tuesday - Friday: 10:00 - 5:00</p>
|
||||
<p class="has-text-centered">Saturday: 9:00 - 3:00</p>
|
||||
<p class="has-text-centered">Sunday - Monday: Closed</p>
|
||||
<p id="hours-tuesday-friday" class="has-text-centered">Tuesday - Friday: 10:00 - 5:00</p>
|
||||
<p id="hours-saturday" class="has-text-centered">Saturday: 9:00 - 3:00</p>
|
||||
<p id="hours-sunday-monday" class="has-text-centered">Sunday - Monday: Closed</p>
|
||||
|
||||
<iframe style="border:none;width:100%;" id="contact-us-vjz40v" src="https://forms.beachpartyballoons.com/forms/contact-us-vjz40v"></iframe><script type="text/javascript" onload="initEmbed('contact-us-vjz40v')" src="https://forms.beachpartyballoons.com/widgets/iframe.min.js"></script>
|
||||
|
||||
|
||||
69
script.js
69
script.js
@ -1,3 +1,4 @@
|
||||
let statusInterval;
|
||||
|
||||
// Mobile NavBar
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
@ -68,12 +69,20 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
lightbox.className = "lightbox";
|
||||
lightbox.innerHTML = `
|
||||
<a href="#" class="close">×</a>
|
||||
<a href="#" class="prev">‹</a>
|
||||
<a href="#" class="next">›</a>
|
||||
<img id="lightbox-img" src="" alt="">
|
||||
<p id="lightbox-caption" class="caption" style="color: white; text-align: center; margin-top: 10px;"></p>
|
||||
`;
|
||||
document.body.appendChild(lightbox);
|
||||
}
|
||||
|
||||
// Ensure the close button listener is always attached when lightbox is opened
|
||||
document.querySelector(".lightbox .close").addEventListener("click", function(event) {
|
||||
event.preventDefault();
|
||||
document.getElementById("lightbox").style.display = "none";
|
||||
});
|
||||
|
||||
let lightboxImg = document.getElementById("lightbox-img");
|
||||
let lightboxCaption = document.getElementById("lightbox-caption");
|
||||
let caption = images[currentIndex].parentElement.querySelector(".caption").textContent;
|
||||
@ -82,8 +91,8 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
lightboxCaption.textContent = caption;
|
||||
lightbox.style.display = "flex";
|
||||
|
||||
// document.getElementById("prev").onclick = () => navigateLightbox(-1);
|
||||
// document.getElementById("next").onclick = () => navigateLightbox(1);
|
||||
document.querySelector(".lightbox .prev").onclick = () => navigateLightbox(-1);
|
||||
document.querySelector(".lightbox .next").onclick = () => navigateLightbox(1);
|
||||
}
|
||||
|
||||
function navigateLightbox(direction) {
|
||||
@ -168,63 +177,13 @@ function scrollFunction() {
|
||||
}
|
||||
}
|
||||
|
||||
// When the user clicks on the button, scroll to the top of the document
|
||||
function topFunction() {
|
||||
document.body.scrollTop = 0; // For Safari
|
||||
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
|
||||
}
|
||||
|
||||
|
||||
//open/closed sign
|
||||
|
||||
function updateBusinessHours() {
|
||||
const now = new Date();
|
||||
if (document.body.scrollTop > 130 || document.documentElement.scrollTop > 130) {
|
||||
mybutton.style.display = "block";
|
||||
} else {
|
||||
mybutton.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
// When the user clicks on the button, scroll to the top of the document
|
||||
function topFunction() {
|
||||
document.body.scrollTop = 0; // For Safari
|
||||
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE, and Opera
|
||||
}
|
||||
|
||||
// Open/closed sign function
|
||||
function checkStatus() {
|
||||
const now = new Date();
|
||||
const checkHour = now.getHours();
|
||||
let isOpen = false;
|
||||
|
||||
// Define days of operation
|
||||
const daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
|
||||
const currentDay = daysOfWeek[now.getDay()];
|
||||
|
||||
const operatingHours = {
|
||||
"Saturday": { start: 9, end: 15 },
|
||||
"Tuesday": { start: 10, end: 17 },
|
||||
"Wednesday": { start: 10, end: 17 },
|
||||
"Thursday": { start: 10, end: 17 }
|
||||
};
|
||||
|
||||
if (currentDay === "Sunday") {
|
||||
isOpen = false; // Store is closed on Sundays
|
||||
} else if (operatingHours[currentDay]) {
|
||||
const { start, end } = operatingHours[currentDay];
|
||||
isOpen = checkHour >= start && checkHour < end;
|
||||
}
|
||||
|
||||
// Update the status in the HTML
|
||||
const statusElement = document.getElementById("status");
|
||||
if (statusElement) {
|
||||
statusElement.textContent = isOpen ? "We are currently OPEN" : "We are currently CLOSED";
|
||||
}
|
||||
}
|
||||
|
||||
// Update status every second
|
||||
setInterval(checkStatus, 1000);
|
||||
// The open/closed sign function is now in update.js
|
||||
|
||||
function injectPlausibleScript() {
|
||||
const plausibleDomain = "beachpartyballoons.com";
|
||||
@ -250,5 +209,5 @@ function injectPlausibleScript() {
|
||||
console.log('Plausible script and function have been injected into the head.');
|
||||
}
|
||||
|
||||
// Run the function when the window loads.
|
||||
window.onload = injectPlausibleScript;
|
||||
// Run the function when the DOM is ready.
|
||||
document.addEventListener('DOMContentLoaded', injectPlausibleScript);
|
||||
|
||||
60
update.js
60
update.js
@ -1,24 +1,72 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const message = document.getElementById('message');
|
||||
const statusElement = document.getElementById('status');
|
||||
const hoursTuesdayFriday = document.getElementById('hours-tuesday-friday');
|
||||
const hoursSaturday = document.getElementById('hours-saturday');
|
||||
const hoursSundayMonday = document.getElementById('hours-sunday-monday');
|
||||
|
||||
let statusInterval;
|
||||
|
||||
function checkStatus() {
|
||||
const now = new Date();
|
||||
const checkHour = now.getHours();
|
||||
let isOpen = false;
|
||||
|
||||
const daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
|
||||
const currentDay = daysOfWeek[now.getDay()];
|
||||
|
||||
const operatingHours = {
|
||||
"Sunday": { start: 0, end: 0 },
|
||||
"Monday": { start: 0, end: 0 },
|
||||
"Tuesday": { start: 10, end: 17 },
|
||||
"Wednesday": { start: 10, end: 17 },
|
||||
"Thursday": { start: 10, end: 17 },
|
||||
"Friday": { start: 10, end: 17 },
|
||||
"Saturday": { start: 9, end: 15 }
|
||||
};
|
||||
|
||||
if (operatingHours[currentDay]) {
|
||||
const { start, end } = operatingHours[currentDay];
|
||||
isOpen = checkHour >= start && checkHour < end;
|
||||
}
|
||||
|
||||
if (statusElement) {
|
||||
statusElement.textContent = isOpen ? "We are currently OPEN" : "We are currently CLOSED";
|
||||
}
|
||||
}
|
||||
|
||||
fetch('update.json')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
|
||||
const update = data[0];
|
||||
|
||||
// Handle the top message
|
||||
if (update.message && update.message.trim() !== "") {
|
||||
message.textContent = update.message;
|
||||
|
||||
const updateElement = document.querySelector('.update'); // safer than getElementsByClassName
|
||||
if (update.message === "") {
|
||||
} else {
|
||||
const updateElement = document.querySelector('.update');
|
||||
if (updateElement) {
|
||||
updateElement.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
// Handle the closed override and regular status
|
||||
if (update.isClosed) {
|
||||
if (statusInterval) {
|
||||
clearInterval(statusInterval);
|
||||
}
|
||||
if (statusElement) {
|
||||
statusElement.textContent = update.closedMessage;
|
||||
}
|
||||
} else {
|
||||
checkStatus(); // Initial check
|
||||
statusInterval = setInterval(checkStatus, 60000); // Update every minute
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching data:', error);
|
||||
businessCard.innerHTML = '<p>Error loading data. Check the console.</p>'; // Display an error message
|
||||
if (statusElement) {
|
||||
statusElement.textContent = 'Error loading status.';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
[
|
||||
{
|
||||
"message": ""
|
||||
"message": "",
|
||||
"isClosed": false,
|
||||
"closedMessage": "We are temporarily closed. Please check back later for updates."
|
||||
}
|
||||
]
|
||||
Loading…
x
Reference in New Issue
Block a user