<style>
  .recently-viewed-wrapper {
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
  }

  .recently-viewed {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
  }
  img.card__media-img {
    width: 100%;
}
</style>
<div class="full-page-width">
  <div class="recently-viewed-wrapper ">
    <h2>{{ section.settings.heading }}</h2>
    <div class="recently-viewed">
      <!-- Recently viewed products will appear here -->
    </div>
  </div>
</div>

<script>
  function setRecentlyViewedProducts() {
    const productData = {
      productTitle: "{{ product.title }}",
      productImg: "{{ product.featured_media | img_url: '300x' }}",
      productPrice: "{{ product.price | money }}",
      productUrl: "{{ product.url }}",
      productImageAltText: "{{ product.featured_media.alt | escape }}"
    };
    const productList = [];
    let jsonResp, jsonRespArr, jsonRespArrStr;
    const numberOfProducts = 4;
    productList.push(productData);
    const currProductPageTitle = productData.productTitle;
    const productDataString = JSON.stringify(productList);
    const localData = localStorage.getItem("recentlyViewedProduct");

    if (localData === null) {
      localStorage.setItem("recentlyViewedProduct", productDataString);
    } else if (localData) {
      const oldProductData = localStorage.getItem("recentlyViewedProduct");
      const countProductData = (oldProductData.match(/productTitle/g) || []).length;
      const sameProduct = oldProductData.includes(currProductPageTitle);
      if (countProductData < numberOfProducts && !sameProduct) {
        jsonResp = JSON.parse(oldProductData);
        jsonRespArr = jsonResp.concat(productList);
        jsonRespArrStr = JSON.stringify(jsonRespArr);
        localStorage.setItem("recentlyViewedProduct", jsonRespArrStr);
      } else if (countProductData >= numberOfProducts && !sameProduct) {
        jsonResp = JSON.parse(oldProductData);
        jsonResp.shift();
        jsonRespArr = jsonResp.concat(productList);
        jsonRespArr = JSON.stringify(jsonRespArr);
        localStorage.setItem("recentlyViewedProduct", jsonRespArr);
      }
    }
  }

  setRecentlyViewedProducts();

  function getRecentlyViewedProducts() {
    const productData = JSON.parse(localStorage.getItem("recentlyViewedProduct"));
    const recentlyViewedHtml = [];

    productData.map(item => {
      recentlyViewedHtml.unshift(`
        <div class="card-wrapper">
          <div class="card">
            <a href="${item.productUrl}" class="card__link">
              <div class="card__media">
                <img src="${item.productImg}" loading="lazy" alt="${item.productImageAltText}" class="card__media-img"/>
              </div>
              <div class="card__content">
                <h3 class="card__heading">${item.productTitle}</h3>
                <div class="card__price">${item.productPrice}</div>
              </div>
            </a>
          </div>
        </div>
      `);
    });

    const newProductData = recentlyViewedHtml.join("");
    const fullContent = document.querySelector(".recently-viewed");
    fullContent.innerHTML = newProductData;
  }

  document.addEventListener("DOMContentLoaded", function (event) {
    getRecentlyViewedProducts();
  });
</script>

{% schema %}
 {
   "name": "Recently Products",
   "settings": [
       {
         "type": "text",
         "id": "heading",
         "default": "Recently Viewed",
         "label": "Heading"
       }
],
   "presets": [
   {
     "name": "Recently Viewed"
   }
 ]
 }
{% endschema %}
