dereklseitz
/
BloomValleyNursery
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update script.js 

Added Demo notification to index page upon landing
This commit is contained in:
Derek 2025-02-11 21:14:32 -06:00 committed by GitHub
parent 36a63efb07
commit 6c5b28f362
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 103 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

186
script.js
View File

@ -1,106 +1,126 @@
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
// Shopper Perks Carousel // ================== DEMO NOTICE MODAL ==================
const perks = document.querySelectorAll(".perk-item"); if (!sessionStorage.getItem("demoNoticeAcknowledged")) {
let currentIndexPerks = 0; let modal = document.createElement("div");
modal.id = "demoModal";
modal.style.position = "fixed";
modal.style.left = "0";
modal.style.top = "0";
modal.style.width = "100%";
modal.style.height = "100%";
modal.style.background = "rgba(0, 0, 0, 0.7)";
modal.style.display = "flex";
modal.style.alignItems = "center";
modal.style.justifyContent = "center";
modal.style.zIndex = "1000";
function showNextPerk() { let modalContent = document.createElement("div");
// Hide all perks modalContent.style.background = "white";
perks.forEach(perk => { modalContent.style.padding = "20px";
perk.classList.remove("visible"); // Hide by removing 'visible' class modalContent.style.borderRadius = "10px";
perk.style.display = "none"; // Set display to none modalContent.style.textAlign = "center";
}); modalContent.style.width = "80%";
modalContent.style.maxWidth = "400px";
// Show the current perk let heading = document.createElement("h2");
perks[currentIndexPerks].classList.add("visible"); // Show current perk by adding 'visible' class heading.innerText = "Demo Notice";
perks[currentIndexPerks].style.display = "block"; // Explicitly set display to block
console.log(`Showing perk ${currentIndexPerks}`); // Debugging line let message = document.createElement("p");
message.innerText =
"This site is for demonstration purposes only and is not a real e-commerce store. No purchases can be made.";
// Move to the next perk, loop back to the start if at the end let closeButton = document.createElement("button");
currentIndexPerks = (currentIndexPerks + 1) % perks.length; closeButton.innerText = "I Understand";
} closeButton.style.padding = "10px 20px";
closeButton.style.marginTop = "15px";
closeButton.style.border = "none";
closeButton.style.background = "#007bff";
closeButton.style.color = "white";
closeButton.style.fontSize = "16px";
closeButton.style.cursor = "pointer";
closeButton.style.borderRadius = "5px";
// Show the first perk initially closeButton.addEventListener("click", function () {
showNextPerk(); modal.style.display = "none";
sessionStorage.setItem("demoNoticeAcknowledged", "true");
});
// Set an interval to cycle through the perks every 2.25 seconds (2250ms) modalContent.appendChild(heading);
setInterval(showNextPerk, 2250); modalContent.appendChild(message);
modalContent.appendChild(closeButton);
modal.appendChild(modalContent);
document.body.appendChild(modal);
}
// Customer Highlights Carousel // ================== SHOPPER PERKS CAROUSEL ==================
const testimonials = document.querySelectorAll(".testimonial"); const perks = document.querySelectorAll(".perk-item");
let currentIndexTestimonials = 0; let currentIndexPerks = 0;
console.log("Testimonials found: ", testimonials.length); // Debugging line function showNextPerk() {
perks.forEach(perk => {
perk.classList.remove("visible");
perk.style.display = "none";
});
function showNextTestimonial() { perks[currentIndexPerks].classList.add("visible");
// Hide all testimonials perks[currentIndexPerks].style.display = "block";
testimonials.forEach(testimonial => {
testimonial.classList.remove("visible"); // Remove 'visible' class
testimonial.style.display = "none"; // Set display to none
});
// Show the current testimonial currentIndexPerks = (currentIndexPerks + 1) % perks.length;
testimonials[currentIndexTestimonials].classList.add("visible"); // Add 'visible' class to show current testimonial }
testimonials[currentIndexTestimonials].style.display = "block"; // Explicitly set display to block
console.log(`Showing testimonial ${currentIndexTestimonials}`); // Debugging line showNextPerk();
setInterval(showNextPerk, 2250);
// Move to the next testimonial, loop back to the start if at the end // ================== CUSTOMER HIGHLIGHTS CAROUSEL ==================
currentIndexTestimonials = (currentIndexTestimonials + 1) % testimonials.length; const testimonials = document.querySelectorAll(".testimonial");
} let currentIndexTestimonials = 0;
// Show the first testimonial initially function showNextTestimonial() {
showNextTestimonial(); testimonials.forEach(testimonial => {
testimonial.classList.remove("visible");
testimonial.style.display = "none";
});
// Set an interval to cycle through the testimonials every 3.5 seconds (3500ms) testimonials[currentIndexTestimonials].classList.add("visible");
setInterval(showNextTestimonial, 3500); testimonials[currentIndexTestimonials].style.display = "block";
// Featured Items Carousel currentIndexTestimonials = (currentIndexTestimonials + 1) % testimonials.length;
const featuredItems = document.querySelectorAll("#featured-images .featured-item"); }
let currentIndex = 0;
function showNextItem() { showNextTestimonial();
// Remove the 'active' class from the current image setInterval(showNextTestimonial, 3500);
featuredItems[currentIndex].classList.remove("active");
// Move to the next index, looping back to the start if necessary // ================== FEATURED ITEMS CAROUSEL ==================
currentIndex = (currentIndex + 1) % featuredItems.length; const featuredItems = document.querySelectorAll("#featured-images .featured-item");
let currentIndex = 0;
function showNextItem() {
featuredItems[currentIndex].classList.remove("active");
currentIndex = (currentIndex + 1) % featuredItems.length;
featuredItems[currentIndex].classList.add("active");
}
// Add the 'active' class to the next image
featuredItems[currentIndex].classList.add("active"); featuredItems[currentIndex].classList.add("active");
} setInterval(showNextItem, 3000);
// Initially show the first image by adding 'active' class // ================== UPDATED FEATURED ITEMS CAROUSEL ==================
featuredItems[currentIndex].classList.add("active"); let currentIndexFeatured = 0;
// Cycle through images every 3 seconds function updateFeaturedImages() {
setInterval(showNextItem, 3000); featuredItems.forEach((item, index) => {
const text = item.closest('a');
if (text) text.style.display = (index === currentIndexFeatured ? "block" : "none");
const image = item;
image.style.display = (index === currentIndexFeatured ? "block" : "none");
});
}
function showNextFeatured() {
currentIndexFeatured = (currentIndexFeatured + 1) % featuredItems.length;
updateFeaturedImages();
}
updateFeaturedImages();
setInterval(showNextFeatured, 3000);
}); });
// Featured Items Carousel
const featuredItems = document.querySelectorAll("#featured-images .featured-item");
let currentIndexFeatured = 0;
function updateFeaturedImages() {
featuredItems.forEach((item, index) => {
// Hide the text inside each <a> tag by setting the text's display to 'none'
const text = item.closest('a');
if (text) text.style.display = (index === currentIndexFeatured ? "block" : "none");
// Show only the active image by setting display to block for the current image
const image = item;
image.style.display = (index === currentIndexFeatured ? "block" : "none");
});
}
// Show next featured image
function showNextFeatured() {
currentIndexFeatured = (currentIndexFeatured + 1) % featuredItems.length; // Loop to the start
updateFeaturedImages();
}
// Initialize featured items carousel by showing the first image
updateFeaturedImages();
// Set up automatic cycling every 3 seconds
setInterval(showNextFeatured, 3000);