Recently Viewed

{%- comment -%}
  modblo, Recently Viewed
  Replaces Recently Viewed Products / Globo Recently Viewed apps.
  Tracks viewed products in localStorage on every product page,
  then renders the user's recently-viewed list as a horizontal carousel.
  Hides itself when the user has fewer than 2 viewed items.
{%- endcomment -%}

<section class="modblo-rv" data-modblo-rv
         data-section-id="{{ section.id }}"
         data-limit="{{ section.settings.limit | default: 8 }}"
         data-min="{{ section.settings.min_items | default: 2 }}"
         data-current-handle="{% if template contains 'product' %}{{ product.handle }}{% endif %}"
         hidden
         style="--modblo-rv-bg: {{ section.settings.bg }};
                --modblo-rv-fg: {{ section.settings.fg }};
                --modblo-rv-accent: {{ section.settings.accent }};">
  <div class="modblo-rv__inner page-width">
    <header class="modblo-rv__head">
      <h2 class="modblo-rv__h">{{ section.settings.heading | default: 'Recently viewed' }}</h2>
      <button type="button" class="modblo-rv__clear" data-modblo-rv-clear>{{ section.settings.clear_label | default: 'Clear' }}</button>
    </header>
    <div class="modblo-rv__row" data-modblo-rv-row></div>
  </div>
</section>

{%- comment -%} Tracker: write the viewed product on PDP page-loads {%- endcomment -%}
{%- if template contains 'product' and product != blank -%}
  <script>
    (function () {
      var KEY = 'cbRecentlyViewed';
      var entry = {
        handle: '{{ product.handle }}',
        title: {{ product.title | json }},
        image: '{{ product.featured_image | image_url: width: 320 }}',
        url: '{{ product.url }}',
        price: {{ product.price }},
        compare: {{ product.compare_at_price | default: 0 }},
        ts: Date.now()
      };
      try {
        var list = JSON.parse(localStorage.getItem(KEY) || '[]');
        list = list.filter(function (p) { return p.handle !== entry.handle; });
        list.unshift(entry);
        if (list.length > 24) list = list.slice(0, 24);
        localStorage.setItem(KEY, JSON.stringify(list));
      } catch (e) {}
    })();
  </script>
{%- endif -%}

<style>
  .modblo-rv { background: var(--modblo-rv-bg, #fff); color: var(--modblo-rv-fg, #0b0b0c); padding: clamp(48px, 6vw, 80px) 0; }
  .modblo-rv[hidden] { display: none; }
  .modblo-rv__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
  .modblo-rv__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
  .modblo-rv__h { font-size: clamp(22px, 2.5vw, 30px); letter-spacing: -.02em; margin: 0; }
  .modblo-rv__clear {
    background: transparent; border: 0; color: inherit;
    font-size: 13px; cursor: pointer; opacity: .55;
    text-decoration: underline; text-underline-offset: 3px;
  }
  .modblo-rv__clear:hover { opacity: 1; }

  .modblo-rv__row {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr);
    gap: 16px; overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    scrollbar-width: thin;
  }
  .modblo-rv__row::-webkit-scrollbar { height: 6px; }
  .modblo-rv__row::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--modblo-rv-fg) 15%, transparent); border-radius: 999px; }

  .modblo-rv__card {
    scroll-snap-align: start;
    color: inherit; text-decoration: none;
    display: block;
    transition: transform .2s;
  }
  .modblo-rv__card:hover { transform: translateY(-2px); }
  .modblo-rv__card-img {
    width: 100%; aspect-ratio: 1; object-fit: cover;
    border-radius: 12px;
    background: color-mix(in oklab, var(--modblo-rv-fg) 5%, transparent);
    margin-bottom: 10px;
  }
  .modblo-rv__card-title {
    font-size: 14px; font-weight: 600; margin: 0 0 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .modblo-rv__card-price {
    font-size: 13px; opacity: .7; margin: 0;
    display: flex; gap: 8px; align-items: baseline;
  }
  .modblo-rv__card-price s { opacity: .5; }
</style>

<script>
  (function () {
    var root = document.querySelector('[data-modblo-rv][data-section-id="{{ section.id }}"]');
    if (!root) return;

    var KEY = 'cbRecentlyViewed';
    var limit = parseInt(root.dataset.limit, 10) || 8;
    var minItems = parseInt(root.dataset.min, 10) || 2;
    var currentHandle = root.dataset.currentHandle;
    var rowEl = root.querySelector('[data-modblo-rv-row]');
    var clearEl = root.querySelector('[data-modblo-rv-clear]');

    function fmt(cents) { return '$' + (cents / 100).toFixed(2); }

    function render() {
      var list = [];
      try { list = JSON.parse(localStorage.getItem(KEY) || '[]'); } catch (e) {}

      // Exclude the product currently being viewed
      if (currentHandle) list = list.filter(function (p) { return p.handle !== currentHandle; });
      list = list.slice(0, limit);

      if (list.length < minItems) {
        root.hidden = true;
        return;
      }

      rowEl.innerHTML = list.map(function (p) {
        var compareHtml = (p.compare && p.compare > p.price)
          ? '<s>' + fmt(p.compare) + '</s>' : '';
        return '<a class="modblo-rv__card" href="' + p.url + '">' +
          '<img class="modblo-rv__card-img" src="' + p.image + '" alt="" loading="lazy">' +
          '<p class="modblo-rv__card-title">' + p.title + '</p>' +
          '<p class="modblo-rv__card-price"><strong>' + fmt(p.price) + '</strong>' + compareHtml + '</p>' +
        '</a>';
      }).join('');

      root.hidden = false;
    }

    clearEl.addEventListener('click', function () {
      localStorage.removeItem(KEY);
      root.hidden = true;
    });

    render();
  })();
</script>

{% schema %}
{
  "name": "Recently Viewed",
  "tag": "section",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Recently viewed" },
    { "type": "text", "id": "clear_label", "label": "Clear button label", "default": "Clear" },
    { "type": "range", "id": "limit", "label": "Max items shown", "min": 4, "max": 12, "step": 1, "default": 8 },
    { "type": "range", "id": "min_items", "label": "Hide section unless N+ items", "min": 1, "max": 6, "step": 1, "default": 2 },
    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "bg", "label": "Background", "default": "#ffffff" },
    { "type": "color", "id": "fg", "label": "Foreground", "default": "#0b0b0c" },
    { "type": "color", "id": "accent", "label": "Accent", "default": "#6366f1" }
  ],
  "presets": [{ "name": "Recently Viewed" }]
}
{% endschema %}