Current File : /var/www/html/eaton/related.js

const products = [
    { name: '9E - 10 KVA, 1:1 Online UPS with internal Batteries', image: './image/product/On-Line UPS With Internal Batteries.png', application: '9E Series', power: 500, url: './eaton-make-10-kva-1-1-phase-on-line-ups-with-internal-batteries-9e-series.html' },
    { name: '9PX 6 kVA (with internal batteries)', image: './image/product/9PX 6 kVA (with internal batteries)/1.png', application: '9E Series', power: 500, url: './9PX-6-kVA-(with-internal-batteries).html' },
    { name: '9PX1000IRT2U', image: './image/product/9PX1000IRT2U/2.png', application: '', power: 500, url: './9PX1000IRT2U.html' },
    { name: '9SX1000I', image: './image/product/9SX1000I/1.png', application: '', power: 500, url: './9SX1000I.html' },
    { name: 'Eaton 6KVA 192V DXRT6KS-IN Online UPS', image: './image/product/Eaton 6KVA 192V DXRT6KS-IN Online UPS.png', application: '', power: 500, url: './Eaton 6KVA-192V-DXRT6KS-IN-Online-UPS.html' },
    { name: 'Eaton 9145 Online UPS (10-20kVA)', image: './image/product/Eaton 9145 Online UPS (10-20kVA).png', application: '', power: 500, url: './Eaton-9145-Online-UPS-(10-20kVA).html' },
    { name: 'Eaton ATS rack PDU', image: './image/product/Eaton ATS rack PDU/1.png', application: '', power: 500, url: './Eaton-ATS-rack-PDU.html' },
    { name: 'Eaton Aurora Line Interactive UPS with inbuilt batteries (600-1000VA)', image: './image/product/Eaton Aurora Line Interactive UPS with inbuilt batteries (600-1000VA).png', application: '', power: 500, url: './Eaton-Aurora-Line-Interactive-UPS-with-inbuilt-batteries-(600-1000VA).html' },
    { name: 'Eaton DXRT Online UPS (6-10kW)', image: './image/product/Eaton DXRT Online UPS (6-10kW).png', application: '', power: 500, url: './Eaton-DXRT-Online-UPS-(6-10kW).html' },
    { name: 'Eaton EATS16N Automatic Transfer Switch ATS 16A', image: './image/product/Eaton EATS16N Automatic Transfer Switch ATS 16A/1.png', application: '', power: 500, url: './Eaton-EATS16N-Automatic-Transfer-Switch-ATS-16A.html' },
  ];
  
  function getRelatedProducts(currentProductIndex) {
    // Get all the products excluding the current one
    const otherProducts = products.filter((_, index) => index !== currentProductIndex);
    // Randomly select 4 related products
    const relatedProducts = otherProducts.sort(() => 0.5 - Math.random()).slice(0, 4);
    return relatedProducts;
  }
  
  function displayRelatedProducts(currentProductIndex) {
    const relatedProducts = getRelatedProducts(currentProductIndex);
    const relatedProductsContainer = document.getElementById('related-products');
    relatedProductsContainer.innerHTML = ''; // Clear the container
  
    relatedProducts.forEach(product => {
      const productHTML = `
        <div class="product__item">
          <div class="product__banner">
            <a href="${product.url}" class="product__images">
              <img src="${product.image}" alt="${product.name}" class="product__img default" />
              <img src="${product.image}" alt="${product.name}" class="product__img hover" />
            </a>
          </div>
          <div class="product__content">
            <a href="${product.url}">
              <h3 class="product__title">${product.name}</h3>
            </a>
          </div>
        </div>
      `;
      relatedProductsContainer.innerHTML += productHTML;
    });
  }
  
  // Example: Display related products for the first product
  document.addEventListener('DOMContentLoaded', () => {
    displayRelatedProducts(0); // Replace '0' with the index of the current product to display appropriate related products
  });