`sections/recently-viewed.liquid`

143 lines
{% comment %}
  Recently Viewed Products — 8 square cards with centered text, horizontal scroll with arrows
{% endcomment %}

<div
  id="dw-recently-viewed"
  data-section-id="{{ section.id }}"
  data-max-products="{{ section.settings.max_products }}"
  data-current-handle="{{ product.handle | default: '' }}"
  style="display:none;max-width:1200px;margin:0 auto;padding:32px 20px 48px;"
>
  <h2 style="font-family:-apple-system,system-ui,sans-serif;font-size:22px;font-weight:600;text-align:center;margin:0 0 4px;color:#1a1a1a;">Recently Viewed</h2>
  <p style="text-align:center;color:#888;font-size:13px;margin:0 0 20px;">Products you've browsed</p>
  <div style="position:relative;">
    <button id="rv-prev" onclick="document.getElementById('dw-rv-grid').scrollBy({left:-260,behavior:'smooth'})" style="position:absolute;left:-16px;top:50%;transform:translateY(-70%);z-index:2;width:36px;height:36px;border-radius:50%;border:1px solid #ddd;background:#fff;cursor:pointer;font-size:18px;color:#333;box-shadow:0 2px 6px rgba(0,0,0,0.1);display:none;">&lsaquo;</button>
    <div id="dw-rv-grid" style="display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding:4px 0;"></div>
    <button id="rv-next" onclick="document.getElementById('dw-rv-grid').scrollBy({left:260,behavior:'smooth'})" style="position:absolute;right:-16px;top:50%;transform:translateY(-70%);z-index:2;width:36px;height:36px;border-radius:50%;border:1px solid #ddd;background:#fff;cursor:pointer;font-size:18px;color:#333;box-shadow:0 2px 6px rgba(0,0,0,0.1);display:none;">&rsaquo;</button>
  </div>
</div>

<style>
  #dw-rv-grid::-webkit-scrollbar{display:none}
  .rv-card{text-decoration:none;color:inherit;display:flex;flex-direction:column;align-items:center;min-width:140px;max-width:140px;flex-shrink:0;}
  .rv-card-img{width:140px;height:140px;object-fit:cover;display:block;border-radius:8px;background:#f5f5f0;}
  .rv-card-info{padding:8px 4px;text-align:center;width:100%;}
  .rv-card-vendor{font-size:10px;font-weight:500;color:#999;text-transform:uppercase;letter-spacing:0.04em;margin:0 0 2px;}
  .rv-card-title{font-size:12px;font-weight:500;color:#333;margin:0;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .rv-card:hover .rv-card-img{box-shadow:0 4px 12px rgba(0,0,0,0.12);transform:scale(1.03);transition:all 0.2s;}
  @media(max-width:768px){.rv-card{min-width:120px;max-width:120px;}.rv-card-img{width:120px;height:120px;}}
</style>

<script>
(function() {
  var STORAGE_KEY = 'dw_recently_viewed';
  var MAX_STORED = 20;
  var container = document.getElementById('dw-recently-viewed');
  var grid = document.getElementById('dw-rv-grid');
  if (!container || !grid) return;

  var maxShow = parseInt(container.dataset.maxProducts) || 8;
  var currentHandle = container.dataset.currentHandle || '';

  // Track current product
  if (currentHandle && currentHandle.length > 0) {
    try {
      var stored = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
      stored = stored.filter(function(h) { return h !== currentHandle; });
      stored.unshift(currentHandle);
      if (stored.length > MAX_STORED) stored = stored.slice(0, MAX_STORED);
      localStorage.setItem(STORAGE_KEY, JSON.stringify(stored));
    } catch(e) {}
  }

  // Render
  try {
    var handles = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
    handles = handles.filter(function(h) { return h !== currentHandle; });
    handles = handles.slice(0, maxShow);
    if (handles.length < 1) return;

    container.style.display = 'block';
    var loaded = 0;
    var total = handles.length;
    var cards = {};

    handles.forEach(function(handle, index) {
      fetch('/products/' + handle + '.js')
        .then(function(r) { return r.ok ? r.json() : null; })
        .then(function(product) {
          loaded++;
          if (!product || !product.featured_image) { checkDone(); return; }
          var img = product.featured_image || '';
          if (img && !img.startsWith('http')) img = 'https:' + img;
          if (img) img = img.replace(/(\.[^.]+)$/, '_300x300$1');
          var vendor = product.vendor || '';
          var title = product.title || '';
          if (vendor && title.includes(' | ' + vendor)) title = title.split(' | ' + vendor)[0];

          var card = document.createElement('a');
          card.href = '/products/' + handle;
          card.className = 'rv-card';

          var imgEl = document.createElement('img');
          imgEl.className = 'rv-card-img';
          imgEl.src = img;
          imgEl.alt = title;
          imgEl.loading = 'lazy';
          card.appendChild(imgEl);

          var info = document.createElement('div');
          info.className = 'rv-card-info';
          var vendorEl = document.createElement('p');
          vendorEl.className = 'rv-card-vendor';
          vendorEl.textContent = vendor;
          info.appendChild(vendorEl);
          var titleEl = document.createElement('p');
          titleEl.className = 'rv-card-title';
          titleEl.textContent = title;
          info.appendChild(titleEl);
          card.appendChild(info);

          cards[index] = card;
          checkDone();
        })
        .catch(function() { loaded++; checkDone(); });
    });

    function checkDone() {
      if (loaded < total) return;
      for (var i = 0; i < total; i++) {
        if (cards[i]) grid.appendChild(cards[i]);
      }
      // Show arrows if scrollable
      if (grid.scrollWidth > grid.clientWidth) {
        document.getElementById('rv-prev').style.display = 'block';
        document.getElementById('rv-next').style.display = 'block';
      }
    }
  } catch(e) {}
})();
</script>

{% schema %}
{
  "name": "Recently Viewed Products",
  "settings": [
    {
      "type": "range",
      "id": "max_products",
      "label": "Max products to show",
      "min": 2,
      "max": 12,
      "step": 1,
      "default": 8
    }
  ],
  "presets": [
    {
      "name": "Recently Viewed Products"
    }
  ]
}
{% endschema %}