Shopify Recently Viewed Products Snippet

{%- comment -%}
  Recently viewed products, tracked in localStorage and rendered through the Section Rendering
  API so each card uses this section's own markup, fetched from that product's own page (where
  Shopify populates "product" for us). Add this section to your product template (so it can
  record views) and to any other page where you want the grid to show, like your cart or home
  page.

  IMPORTANT: this file must be named exactly recently-viewed.liquid. The script below fetches
  other pages with ?section_id=recently-viewed, a fixed name (not this instance's own section.id,
  which differs by template), so the file name and that string must match.
{%- endcomment -%}
{%- style -%}
  #RecentlyViewed-{{ section.id }} .ea-rv__heading{margin:0 0 .75rem;font-size:1.2em;font-weight:600}
  #RecentlyViewed-{{ section.id }} .ea-rv__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem}
  #RecentlyViewed-{{ section.id }} .ea-rv__grid[hidden]{display:none}
  .ea-rv__card{display:block;background:#ffffff;border-radius:8px;overflow:hidden;text-decoration:none;color:inherit}
  .ea-rv__image{aspect-ratio:1/1;background:#f2f2f2;overflow:hidden}
  .ea-rv__image img{width:100%;height:100%;object-fit:cover;display:block}
  .ea-rv__title{margin:.5rem 0 .2rem;font-size:.9em;padding:0 .1rem}
  .ea-rv__price{margin:0;font-size:.85em;font-weight:600;color:#1a1a1a;padding:0 .1rem}
{%- endstyle -%}

<div
  id="RecentlyViewed-{{ section.id }}"
  data-current-handle="{{ product.handle }}"
  data-max="{{ section.settings.max }}"
  data-hide-if-empty="{{ section.settings.hide_if_empty }}"
  {% if section.settings.hide_if_empty %}hidden{% endif %}
>
  {%- if section.settings.heading != blank -%}<p class="ea-rv__heading">{{ section.settings.heading | escape }}</p>{%- endif -%}
  <div class="ea-rv__grid" data-grid hidden></div>
</div>

{%- if product -%}
  <template data-ea-rv-card="{{ product.handle }}">
    <a href="{{ product.url }}" class="ea-rv__card">
      <div class="ea-rv__image">
        {%- if product.featured_image -%}
          <img src="{{ product.featured_image | image_url: width: 300 }}" alt="{{ product.featured_image.alt | escape }}" loading="lazy" width="300" height="300">
        {%- endif -%}
      </div>
      <p class="ea-rv__title">{{ product.title | escape }}</p>
      <p class="ea-rv__price">{{ product.price | money }}</p>
    </a>
  </template>
{%- endif -%}

<script>
  (function () {
    var KEY = 'ea-recently-viewed';
    var root = document.getElementById('RecentlyViewed-{{ section.id }}');
    var grid = root ? root.querySelector('[data-grid]') : null;
    var currentHandle = root ? root.getAttribute('data-current-handle') : '';
    if (currentHandle) {
      try {
        var list = JSON.parse(localStorage.getItem(KEY) || '[]').filter(function (h) { return h !== currentHandle; });
        list.unshift(currentHandle);
        localStorage.setItem(KEY, JSON.stringify(list.slice(0, 30)));
      } catch (e) {}
    }
    if (!root || !grid) return;
    var handles = [];
    try { handles = JSON.parse(localStorage.getItem(KEY) || '[]'); } catch (e) {}
    handles = handles.filter(function (h) { return h && h !== currentHandle; }).slice(0, Number(root.getAttribute('data-max')) || 4);
    if (!handles.length) {
      if (root.getAttribute('data-hide-if-empty') === 'true') root.hidden = true;
      return;
    }
    var rootUrl = (window.Shopify && window.Shopify.routes && window.Shopify.routes.root) || '/';
    // A fixed file name, not this instance's section.id: dynamic sections get a different id per
    // template, but the Section Rendering API can still fetch a section by its file name from any
    // page, rendering it fresh with that page's own product in context.
    var sectionId = 'recently-viewed';
    handles.forEach(function (handle) {
      fetch(rootUrl + 'products/' + handle + '?section_id=' + sectionId)
        .then(function (r) { return r.ok ? r.text() : Promise.reject(); })
        .then(function (html) {
          var doc = new DOMParser().parseFromString(html, 'text/html');
          var tpl = doc.querySelector('template[data-ea-rv-card="' + handle + '"]');
          if (!tpl) return;
          grid.appendChild(tpl.content.cloneNode(true));
          grid.hidden = false;
          root.hidden = false;
        })
        .catch(function () {
          try {
            var list = JSON.parse(localStorage.getItem(KEY) || '[]').filter(function (h) { return h !== handle; });
            localStorage.setItem(KEY, JSON.stringify(list));
          } catch (e) {}
        });
    });
  })();
</script>

{% schema %}
{
  "name": "Recently viewed",
  "tag": "section",
  "class": "ea-recently-viewed-section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Recently viewed"
    },
    {
      "type": "range",
      "id": "max",
      "label": "Products to show",
      "min": 2,
      "max": 12,
      "step": 1,
      "default": 4
    },
    {
      "type": "checkbox",
      "id": "hide_if_empty",
      "label": "Hide when there's nothing to show",
      "default": true
    }
  ],
  "presets": [
    {
      "name": "Recently viewed"
    }
  ]
}
{% endschema %}