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

Feat, Fix, and Refactor: Consolidate index page changes

Browse Source 
Feat: Refactor index.njk to be data-driven and fix related rendering issues.

Fix: Resolve layout and functionality bugs, including broken JavaScript for the featured item carousel, layout shifts in category navigation, and CSS issues with the testimonial carousel.

Refactor: Centralize global styles using CSS custom property variables and clean up redundant CSS rules.
This commit is contained in:
Derek L. Seitz
2025-09-06 19:29:59 -05:00
parent e166edb44a
commit f30c846e9e
14 changed files with 395 additions and 448 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/scripts/script.js
View File

@@ -52,27 +52,27 @@ document.addEventListener("DOMContentLoaded", () => {
document.body.appendChild(modal);
}
// ================== SHOPPER PERKS CAROUSEL ==================
const perks = document.querySelectorAll(".perk-item");
let currentIndexPerks = 0;
// ================== SHOPPER PROMO CAROUSEL ==================
const promo = document.querySelectorAll(".promo-item");
let currentIndexPromo = 0;
function showNextPerk() {
perks.forEach(perk => {
perk.classList.remove("visible");
perk.style.display = "none";
function showNextPromo() {
promo.forEach(promo => {
promo.classList.remove("visible");
promo.style.display = "none";
});
perks[currentIndexPerks].classList.add("visible");
perks[currentIndexPerks].style.display = "block";
promo[currentIndexPromo].classList.add("visible");
promo[currentIndexPromo].style.display = "block";
currentIndexPerks = (currentIndexPerks + 1) % perks.length;
currentIndexPromo = (currentIndexPromo + 1) % promo.length;
}
showNextPerk();
setInterval(showNextPerk, 2250);
showNextPromo();
setInterval(showNextPromo, 2250);
// ================== CUSTOMER HIGHLIGHTS CAROUSEL ==================
const testimonials = document.querySelectorAll(".testimonial");
const testimonials = document.querySelectorAll(".testimonial-item");
let currentIndexTestimonials = 0;
function showNextTestimonial() {
@@ -91,7 +91,7 @@ document.addEventListener("DOMContentLoaded", () => {
setInterval(showNextTestimonial, 3500);
// ================== FEATURED ITEMS CAROUSEL ==================
const featuredItems = document.querySelectorAll("#featured-images .featured-item");
/*const featuredItems = document.querySelectorAll("#featured-images .featured-item");
let currentIndex = 0;
function showNextItem() {
@@ -101,12 +101,13 @@ document.addEventListener("DOMContentLoaded", () => {
}
featuredItems[currentIndex].classList.add("active");
setInterval(showNextItem, 3000);
setInterval(showNextItem, 3000);*/
// ================== UPDATED FEATURED ITEMS CAROUSEL ==================
const featuredItems = document.querySelectorAll(".featured-card");
let currentIndexFeatured = 0;
function updateFeaturedImages() {
function updateFeaturedItems() {
featuredItems.forEach((item, index) => {
const text = item.closest('a');
if (text) text.style.display = (index === currentIndexFeatured ? "block" : "none");
@@ -118,9 +119,9 @@ document.addEventListener("DOMContentLoaded", () => {
function showNextFeatured() {
currentIndexFeatured = (currentIndexFeatured + 1) % featuredItems.length;
updateFeaturedImages();
updateFeaturedItems();
}
updateFeaturedImages();
updateFeaturedItems();
setInterval(showNextFeatured, 3000);
});