please write js to make things work in this page as they should:
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{name}} - Loveessential</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    <!-- <link rel="stylesheet" href="/styles.css"> -->
    <link rel="apple-touch-icon" sizes="76x76" href="/static/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon/favicon-16x16.png">
    <link rel="manifest" href="/static/favicon/site.webmanifest">
    <link rel="mask-icon" href="/static/favicon/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
    <link rel="stylesheet" href="/static/css/page.css">

  </head>
  <body>
    <header>
      <nav class="container">
        <a href="/" class="logo">Loveessential</a>
        <div class="nav-links">
          <a href="/">Home</a>
          <a href="/about.html">About Us</a>
          <a href="/contact">Contact</a>
          <a href="/cart" id="cartIcon" class="cart-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="9" cy="21" r="1"></circle>
              <circle cx="20" cy="21" r="1"></circle>
              <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
            </svg>
            <span class="cart-count">0</span>
          </a>
        </div>
        <div class="search-bar">
          <input type="text" placeholder="Search...">
          <button>Search</button>
        </div>
      </nav>
    </header>
    <main class="container">
     
      <div class="product-container">
        <div class="product-images">
          <div class="media-container">
            <img src="{{image}}" alt="{{name}}" class="main-image" id="main-image">
            <iframe id="youtube-video" width="560" height="315" src="https://www.youtube.com/embed/wsPpEit1Fsw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen style="display:none;"></iframe>
          </div>
          <div class="thumbnail-container">
            <img src="{{image}}" alt="{{name}} thumbnail 1" class="thumbnail" onclick="changeMainImage(this.src)">
            <img src="{{image}}" alt="{{name}} thumbnail 2" class="thumbnail" onclick="changeMainImage(this.src)">
            <img src="{{image}}" alt="{{name}} thumbnail 3" class="thumbnail" onclick="changeMainImage(this.src)">
            <div class="video-thumbnail thumbnail" onclick="showVideo()">
              <img src="https://img.youtube.com/vi/wsPpEit1Fsw/0.jpg" alt="Product Video Thumbnail">
              <i class="fas fa-play-circle"></i>
            </div>
          </div>
        </div>
        <div class="product-info">
          <h1 class="product-title">{{name}}</h1>
          <p class="product-price">{{price}} Ksh</p>
          <div class="product-description">
            <p>{{description}}</p>
          </div>
          <div class="product-features">
            <h3>Key Features:</h3>
            <ul>
              <li>Feature 1</li>
              <li>Feature 2</li>
              <li>Feature 3</li>
            </ul>
          </div>
          <div class="add-to-cart-container">
            <div class="quantity-input">
              <button id="decrease-quantity">-</button>
              <input type="number" id="quantity" value="1" min="1">
              <button id="increase-quantity">+</button>
            </div>
            <button class="add-to-cart" data-product-id="${{id}}">Add to Cart</button>
          </div>
          <div class="product-meta">
            <p>Category: {{category}}</p>
            <p>Stock: {{stock}}</p>
          </div>
        </div>
      </div>

      <section class="reviews-section">
        <h2>Customer Reviews</h2>
        <!-- Reviews go here -->
      </section>

      <section class="related-products">
        <h2>Related Products</h2>
        <div class="product-grid">
          <!-- Related products dynamically generated -->
        </div>
      </section>
    </main>
    <div id="customAlert" class="custom-alert"></div>
    <footer>
      <div class="container footer-content">
        <div class="footer-section">
          <h3>Quick Links</h3>
          <ul>
            <li><a href="/">All Products</a></li>
            <li><a href="/about.html">About Us</a></li>
            <li><a href="/contact">Contact</a></li>
            <li><a href="/faq">FAQ</a></li>
          </ul>
        </div>
        <div class="footer-section">
          <h3>Customer Service</h3>
          <ul>
            <li><a href="/shipping">Shipping Information</a></li>
            <li><a href="/returns">Returns & Exchanges</a></li>
            <li><a href="/privacy">Privacy Policy</a></li>
            <li><a href="/terms">Terms of Service</a></li>
          </ul>
        </div>
        <div class="footer-section">
          <h3>Connect With Us</h3>
          <ul>
            <li><a href="https://facebook.com/Loveessential">Facebook</a></li>
            <li><a href="https://instagram.com/Loveessential">Instagram</a></li>
            <li><a href="https://twitter.com/Loveessential">Twitter</a></li>
            <li><a href="https://pinterest.com/Loveessential">Pinterest</a></li>
          </ul>
        </div>
        <div class="footer-section newsletter">
          <h3>Subscribe to Our Newsletter</h3>
          <form>
            <input type="email" placeholder="Enter your email">
            <button type="submit">Subscribe</button>
          </form>
        </div>
      </div>
    </footer>
    
    <script>
    function showVideo() {
      document.getElementById('main-image').style.display = 'none';
      document.getElementById('youtube-video').style.display = 'block';
    }
    function changeMainImage(src) {
            document.getElementById('main-image').src = src;
            document.getElementById('main-image').style.display = 'block';
            document.getElementById('youtube-video').style.display = 'none';
          }
    </script>
  </body>

</html>
heres some inspiration:
// Global Variables
let cartCount = 0;
const cartCountElement = document.querySelector('.cart-count');
const customAlert = document.getElementById('customAlert');

let cart = [];
let products = [];

// Function to Show Alert Messages
function showAlert(message, duration = 1000) {
  customAlert.textContent = message;
  customAlert.style.display = 'block';
  setTimeout(() => {
    customAlert.style.display = 'none';
  }, duration);
}

// Function to Add Product to Cart
function addToCart(product) {
  cart.push(product);
  updateCartCount();
  showAlert(`${product.name} has been added to your cart!`);
}

// Function to Update Cart Count Display
function updateCartCount() {
  cartCount++;
  cartCountElement.textContent = cartCount;
}

// Function to Fetch Products from Server
async function fetchProducts() {
  try {
      const response = await fetch('/fetch_products.php', {
          method: 'GET',
          headers: {
              'Accept': 'application/json',
          }
          // Removed mode: 'cors' as it's unnecessary for same-origin requests
      });
      
      if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
      }
      
      const products = await response.json();
      return products;
  } catch (error) {
      console.error('Error fetching products:', error);
      throw error;
  }
}

// Function to Create HTML for a Product Card
function createProductCard(product) {
  // Define a default image path for products without images
  const defaultImagePath = '/static/images/loveessential_ke-08092024-0007.jpeg'; // Ensure this image exists on your server

  // Determine the image source
  const imageSrc = (product.images && product.images.length > 0) ? product.images[0] : defaultImagePath;

  return `
<div class="product-card">
  <a href="/product/${product.id}">
    <div class="product-image">
      <img src="${imageSrc}" alt="${product.name.slice(0, 10)}..." onerror="this.onerror=null;this.src='${defaultImagePath}';">
    </div>
  </a>

  <div class="product-info">
    <a href="/product/${product.id}">
      <h3 class="product-title">${product.name.split(' ').slice(0, 4).join(' ')}</h3>
    </a>
    <div class="product-footer">
      <span class="product-price">${parseFloat(product.price).toFixed(2)} Ksh</span>
      <button class="add-to-cart" data-product-id="${product.id}">Add to Cart</button>
    </div>
  </div>
</div>
  `;
}

// Function to Populate Products on the Page
async function populateProducts() {
  try {
    products = await fetchProducts();

    // Handle Featured Products
    const featuredProducts = products.slice(0, 4);
    const featuredProductsContainer = document.getElementById('featured-products');
    if (featuredProductsContainer) {
      featuredProductsContainer.innerHTML = featuredProducts.map(createProductCard).join('');
    }

    // Handle Electronics Deals
    const electronicsDeals = products.filter(p => p.category.toLowerCase() === 'accessories').slice(0, 4);
    const electronicsDealsContainer = document.getElementById('electronics-deals');
    if (electronicsDealsContainer) {
      electronicsDealsContainer.innerHTML = electronicsDeals.map(createProductCard).join('');
    }

    // Handle Jewelry Deals
    const jewelryDeals = products.filter(p => p.category.toLowerCase() === 'skincare').slice(0, 4);
    const jewelryDealsContainer = document.getElementById('jewelry-deals');
    if (jewelryDealsContainer) {
      jewelryDealsContainer.innerHTML = jewelryDeals.map(createProductCard).join('');
    }

    // Handle Clothing Deals
    const clothingDeals = products.filter(p => p.category.toLowerCase().includes('haircare')).slice(0, 4);
    const clothingDealsContainer = document.getElementById('clothing-deals');
    if (clothingDealsContainer) {
      clothingDealsContainer.innerHTML = clothingDeals.map(createProductCard).join('');
    }

    attachAddToCartListeners();
  } catch (error) {
    showAlert('Failed to load products. Please try again later.', 2000);
  }
}

// Function to Attach Event Listeners to "Add to Cart" Buttons
function attachAddToCartListeners() {
  const addToCartButtons = document.querySelectorAll('.add-to-cart');
  addToCartButtons.forEach(button => {
    button.addEventListener('click', () => {
      const productId = button.getAttribute('data-product-id');
      const product = products.find(p => p.id == productId);
      if (product) {
        addToCart(product);
      } else {
        showAlert('Product not found.', 2000);
      }
    });
  });
}

// Function to Send Cart Details to Local Storage and Redirect to Cart Page
function sendCartDetails() {
  const cartJSON = JSON.stringify(cart);
  localStorage.setItem('cart', cartJSON);
  window.location.href = '/cart';
}

// Event Listener for Cart Icon Click
const cartIcon = document.getElementById('cartIcon');
if (cartIcon) {
  cartIcon.addEventListener('click', function(e) {
    e.preventDefault();
    sendCartDetails();
  });
} else {
  console.warn('Cart icon not found. Please check the selector.');
}

// Newsletter Form Handling with Fixed Reference
const newsletterForm = document.querySelector('.newsletter form');

if (newsletterForm) {
  newsletterForm.addEventListener('submit', (e) => {
    e.preventDefault();
    const emailInput = newsletterForm.querySelector('input[type="email"]');
    if (emailInput.value.includes('@') && emailInput.value.includes('.')) {
      showAlert('Thank you for subscribing to our newsletter!', 2000);
      
      emailInput.value = '';
    } else {
      showAlert('Please enter a valid email address.', 2000);
    }
  });
} else {
  console.warn('Newsletter form not found. Please check the selector.');
}

// Function to Populate Products on Page Load
populateProducts();

// Cookie Consent Functionality
function setCookie(name, value, days) {
  const expires = new Date(Date.now() + days * 24 * 60 * 60 * 1000).toUTCString();
  document.cookie = name + '=' + encodeURIComponent(value) + '; expires=' + expires + '; path=/';
}

function getCookie(name) {
  return document.cookie.split('; ').reduce((r, v) => {
      const parts = v.split('=');
      return parts[0] === name ? decodeURIComponent(parts[1]) : r;
  }, '');
}

const cookieBanner = document.getElementById('cookie-banner');
const acceptCookiesButton = document.getElementById('accept-cookies');

if (cookieBanner && acceptCookiesButton) {
  if (!getCookie('cookiesAccepted')) {
      cookieBanner.style.display = 'block';
  }

  acceptCookiesButton.addEventListener('click', () => {
      setCookie('cookiesAccepted', 'true', 365);
      cookieBanner.style.display = 'none';
  });
} else {
  console.warn('Cookie banner or accept button not found. Please check the selectors.');
}

// Function for Tab Navigation (Assuming Tabs Are Present)
function setupTabNavigation() {
  const tabs = document.querySelectorAll('.tab');
  if (tabs.length === 0) return;

  tabs.forEach(tab => {
      tab.addEventListener('click', function() {
          // Remove 'active' class from all tabs
          tabs.forEach(t => t.classList.remove('active'));

          // Add 'active' class to the clicked tab
          this.classList.add('active');

          // Hide all tab contents
          const tabContents = document.querySelectorAll('.tab-content');
          tabContents.forEach(content => content.classList.remove('active'));

          // Show the corresponding tab content
          const targetTabContentId = `${this.getAttribute('data-tab')}Tab`;
          const targetTabContent = document.getElementById(targetTabContentId);
          if (targetTabContent) {
              targetTabContent.classList.add('active');
          }
      });
  });
}