code

(() => {
  var json = [
    {
      id: "62-0VE218914258759",
      name: "Versace 0VE2194",
      price: 373,
      final_price: 224,
      img_front:
        "https://static.glassesusa.com/media/catalog/product/8/0/8053672851298_f_1.jpg",
      img_angle:
        "https://static.glassesusa.com/media/catalog/product/8/0/8053672851298_u_1.jpg",
      img_side:
        "https://static.glassesusa.com/media/catalog/product/8/0/8053672851298_s_1.jpg",
      link:
        "https://www.glassesusa.com/blackgray-large/versace-0ve2194/62-0ve218914258759.html",
      gender: "Unisex",
      ends_in: "july 15 2020 03:00:00 GMT-0500",
      qty: 36
    },
    {
      id: "62-0BE3090Q10525A58",
      name: "Burberry 0BE3090Q",
      price: 356,
      final_price: 249,
      img_front:
        "https://static.glassesusa.com/media/catalog/product/8/0/8053672810172_f.jpg",
      img_angle:
        "https://static.glassesusa.com/media/catalog/product/8/0/8053672810172_u.jpg",
      img_side:
        "https://static.glassesusa.com/media/catalog/product/8/0/8053672810172_s.jpg",
      link:
        "https://www.glassesusa.com/browntortoisegold-extra-large/burberry-0be3090q/62-0be3090q10525a58.html",
      gender: "Men",
      ends_in: "july 18 2020 00:00:00 GMT-0500",
      qty: 0
    },
    {
      id: "62-0RB420260697155",
      name: "Ray-Ban Andy 4202",
      price: 128,
      final_price: 128,
      img_front:
        "https://static.glassesusa.com/media/catalog/product/8/0/8053672188868_f_1.jpg",
      img_angle:
        "https://static.glassesusa.com/media/catalog/product/8/0/8053672188868_u_1.jpg",
      img_side:
        "https://static.glassesusa.com/media/catalog/product/8/0/8053672188868_s_1.jpg",
      link:
        "https://www.glassesusa.com/blackgreen-large/ray-ban-andy-4202/62-0rb420260697155.html",
      gender: "Men",
      ends_in: "july 25 2020 12:00:00 GMT-0500",
      qty: 36
    }
  ];
  const toggle = document.querySelector("#toggle");

  toggle.addEventListener("click", event => {
    event.preventDefault();

    const container = document.querySelector("#container");
    renderProducts(json, container);
  });

  function renderProducts(products, target) {
    let html = "";

    for (let i = 0; i < products.length; i++) {
      const product = products[i];
      const productHtml = `
      <li class="product section-item-bg-color section-item-margin section-box">
        <div class="head">
          <button class="dis-left"> 30$ off</button>
          <p class="dis-right">Under 10 left  <i class="fab fa-gripfire fa-2x" style="padding: 10px;"></i></p>
        </div>
        <div id="product-image-${i}">
          <i class="fas fa-chevron-left fa-3x"></i>
          <div>
            <img src=${product.img_front} alt="">
          </div>
          <div>
            <img src=${product.img_angle} alt="">
          </div>
          <div>
            <img src=${product.img_side} alt="">
          </div>
          <i class="fas fa-chevron-right  fa-3x"></i>
        </div>
        <div class="price_name_box">${product.name}</div>
        <div class="price_box"><span class="final_price">$${
          product.final_price
        }</span><span class="price">$${
        product.price
      }</span> + Free Shipping</div>
        <button class="submit">Shop Now</button>
        </div>
      </li>
    `;

      html += productHtml;
    }

    target.innerHTML = html;
    $('[id*="product-image-"').slick({});
  }
})();