recently-viewed.liquid

{% comment %}
  Simple Recently Viewed Section - Dawn Compatible
{% endcomment %}

{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}

{% if template.name == 'product' %}
<script>
document.addEventListener("DOMContentLoaded", function() {
  const storageKey = "recentlyViewedHandles";
  const currentHandle = "{{ product.handle }}";
  const limit = 6;

  if (!currentHandle) return;

  let products = JSON.parse(localStorage.getItem(storageKey)) || [];

  products = products.filter(handle => handle !== currentHandle);
  products.unshift(currentHandle);

  if (products.length > limit) {
    products = products.slice(0, limit);
  }

  localStorage.setItem(storageKey, JSON.stringify(products));
});
</script>
{% endif %}

<section class="page-width section" id="recently-viewed-section" style="display:none;">
  <div class="title-wrapper-with-link">
    <h2 class="title h1">Recently Viewed</h2>
  </div>

  <ul
    id="recently-viewed-grid"
    class="grid product-grid grid--2-col-tablet-down grid--4-col-desktop"
    role="list"
  ></ul>
</section>

<script>
document.addEventListener("DOMContentLoaded", function() {

  const storageKey = "recentlyViewedHandles";
  const currentHandle = "{{ product.handle }}";
  const handles = JSON.parse(localStorage.getItem(storageKey)) || [];

  const grid = document.getElementById("recently-viewed-grid");
  const section = document.getElementById("recently-viewed-section");

  if (!handles.length) return;

  // Safe money formatter
  function formatMoney(cents) {
    return new Intl.NumberFormat("{{ shop.locale }}", {
      style: "currency",
      currency: "{{ shop.currency }}"
    }).format(cents / 100);
  }

  handles.forEach(handle => {
    if (handle === currentHandle) return;

    fetch(`/products/${handle}.js`)
      .then(response => response.json())
      .then(product => {

        const productUrl = `/products/${product.handle}`;
        const image = product.images[0] ? product.images[0] : '';
        const price = formatMoney(product.price);

        const item = document.createElement("li");
        item.className = "grid__item scroll-trigger animate--slide-in";

        item.innerHTML = `
          <div class="card-wrapper product-card-wrapper underline-links-hover">
            <div class="card card--standard card--media" style="--ratio-percent: 100.0%;">
              <div class="card__inner color-scheme-2 gradient ratio" style="--ratio-percent: 100.0%;">
                <div class="card__media">
                  <div class="media media--square">
                    <a href="${productUrl}">
                      <img src="${image}" alt="${product.title}" loading="lazy">
                    </a>
                  </div>
                </div>
              </div>
              <div class="card__content">
                <div class="card__information">
                  <h3 class="card__heading h5">
                    <a href="${productUrl}" class="full-unstyled-link">
                      ${product.title}
                    </a>
                  </h3>
                  <div class="price">
                    <div class="price__regular">
                      <span class="price-item price-item--regular">
                        ${price}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        `;

        grid.appendChild(item);
        section.style.display = "block";
      })
      .catch(error => console.error("Error:", error));
  });

});
</script>

{% schema %}
{
  "name": "Recently Viewed",
  "settings": [],
  "presets": [
    {
      "name": "Recently Viewed"
    }
  ]
}
{% endschema %}