Add files via upload

BloomValleyNursery_FullProjectFiles/gallery-carousel.js

@@ -0,0 +1,127 @@
+// Gallery Carousel .js
+const products = {
+  trees: [
+    { id: 1, name: "Maple Tree", description: "Beautiful maple tree.", price: 55.00, image: "images/trees/MapleTree.png" },
+    { id: 2, name: "Birch Tree", description: "Sturdy birch tree.", price: 45.00, image: "images/trees/BirchTree.png" },
+    { id: 3, name: "Apple Tree", description: "Fruitful apple tree.", price: 35.00, image: "images/trees/AppleTree.png" }
+  ],
+  indoor: [
+    { id: 4, name: "Aloe Plant", description: "Thrives with 6-8 hours of direct sunlight a day.", price: 15.00, image: "images/indoor/AloePlant.png" },
+    { id: 5, name: "Spider Plant", description: "Low-maintenance and perfect for spaces with lots of natural light.", price: 12.50, image: "images/indoor/SpiderPlant.png" },
+    { id: 6, name: "String-of-Pearls Plant", description: "Best placed in east-facing windows or on shaded patios and balconies.", price: 20.00, image: "images/indoor/StringofPearls.png" }
+  ],
+  tools: [
+    { id: 7, name: "Watering Can", description: "Galvanized aluminum watering can.", price: 15.00, image: "images/accessories/WateringCan.png" },
+    { id: 8, name: "Potting Soil", description: "Premium-blend of nutrient-rich potting soil - 10 lb bag.", price: 8.00, image: "images/accessories/PottingSoil.png" },
+    { id: 9, name: "Bird House", description: "Handmade wooden bird house for hanging or mounting.", price: 11.00, image: "images/accessories/BirdHouse.png" }
+  ]
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+  console.log("DOM fully loaded and parsed"); // Check if the DOM is ready
+
+  const productCarousel = document.getElementById('product-carousel');
+  const scrollLeftButton = document.getElementById('scroll-left');
+  const scrollRightButton = document.getElementById('scroll-right');
+  const categoryButtons = document.querySelectorAll('.cat-btn');
+
+  // Scroll button functionality
+  scrollLeftButton.addEventListener('click', () => {
+    productCarousel.scrollBy({ left: -300, behavior: 'smooth' });
+  });
+
+  scrollRightButton.addEventListener('click', () => {
+    productCarousel.scrollBy({ left: 300, behavior: 'smooth' });
+  });
+
+  // Map buttons to categories
+  categoryButtons.forEach(button => {
+    button.addEventListener('click', (event) => {
+      event.preventDefault(); // Prevent default navigation
+      const url = new URL(button.href); // Parse the URL
+      const category = url.searchParams.get('category'); // Get category from the query parameter
+      updateProductList(category); // Update the product list
+    });
+  });
+
+  // Load default category or the one from the current URL
+  const currentUrl = new URL(window.location.href);
+  const defaultCategory = currentUrl.searchParams.get('category') || 'trees';
+  updateProductList(defaultCategory);
+});
+
+function updateScrollButtons() {
+  const scrollLeftButton = document.getElementById('scroll-left');
+  const scrollRightButton = document.getElementById('scroll-right');
+  const productCarousel = document.getElementById('product-carousel');
+
+  scrollLeftButton.style.display = productCarousel.scrollLeft === 0 ? 'none' : 'block';
+  scrollRightButton.style.display =
+    productCarousel.scrollWidth - productCarousel.clientWidth === productCarousel.scrollLeft
+      ? 'none'
+      : 'block';
+}
+
+function updateProductList(category) {
+  const productList = document.getElementById("product-list");
+  if (!productList) {
+    console.error("Element with ID 'product-list' not found in the DOM.");
+    return;
+  }
+
+  productList.innerHTML = ""; // Clear existing products
+  console.log(`Updating product list for category: ${category}`);  // Debugging line
+
+  const selectedProducts = products[category];
+
+  if (selectedProducts) {
+    selectedProducts.forEach(product => {
+      const productCard = document.createElement("div");
+      productCard.className = "product-card";
+
+      console.log(`Creating product card for: ${product.name}`); // Debugging line
+
+      productCard.innerHTML = `
+        <img src="${product.image}" alt="${product.name}">
+        <h3>${product.name}</h3>
+        <p>${product.description}</p>
+        <p>$${product.price}</p>
+        <button class="add-to-cart-btn" data-product-id="${product.id}">Add to Cart</button>
+      `;
+      productList.appendChild(productCard);
+
+      // Add event listener for "Add to Cart" button
+      const addToCartButton = productCard.querySelector('.add-to-cart-btn');
+      addToCartButton.addEventListener('click', () => {
+        addToCart(product.id);
+      });
+    });
+  } else {
+    console.error(`No products found for category: ${category}`);
+  }
+}
+
+function addToCart(productId) {
+  const product = findProductById(productId);
+  if (product) {
+    let cart = JSON.parse(sessionStorage.getItem('cart')) || [];
+    const existingProduct = cart.find(item => item.id === productId);
+
+    if (existingProduct) {
+      existingProduct.quantity++;
+    } else {
+      cart.push({ ...product, quantity: 1 });
+    }
+
+    sessionStorage.setItem('cart', JSON.stringify(cart));
+    alert(`${product.name} has been added to your cart!`);
+  }
+}
+
+function findProductById(productId) {
+  for (let category in products) {
+    const product = products[category].find(item => item.id === productId);
+    if (product) return product;
+  }
+  return null;
+}