`snippets/other-colorways.liquid`

164 lines
{% comment %}
  Other Colorways — shows sibling products with the same pattern name
  Uses Shopify Predictive Search API to find products sharing the pattern.
  Reads dwc.pattern_name metafield; falls back to parsing title before " - " or " | ".
{% endcomment %}

{% assign pattern_name = product.metafields.dwc.pattern_name.value %}
{% unless pattern_name != blank %}
  {% assign title_parts = product.title | split: ' | ' %}
  {% assign before_pipe = title_parts[0] %}
  {% assign dash_parts = before_pipe | split: ' - ' %}
  {% if dash_parts.size > 1 %}
    {% assign pattern_name = dash_parts[0] | strip %}
  {% else %}
    {% assign pattern_name = before_pipe | strip %}
  {% endif %}
{% endunless %}

{% if pattern_name != blank %}
<div id="dw-other-colorways" data-pattern="{{ pattern_name | escape }}" data-current="{{ product.handle }}" data-vendor="{{ product.vendor | escape }}" style="display:none;">
  <style>
    .dw-colorways-section {
      margin: 24px 0 32px;
      padding: 0 20px;
    }
    .dw-colorways-heading {
      font-family: 'Lora', serif;
      font-size: 18px;
      font-weight: 500;
      margin: 0 0 14px;
      color: #1a1a1a;
      letter-spacing: -0.01em;
    }
    .dw-colorways-scroll {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      padding-bottom: 8px;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
    }
    .dw-colorways-scroll::-webkit-scrollbar { height: 4px; }
    .dw-colorways-scroll::-webkit-scrollbar-track { background: #f0ede8; border-radius: 2px; }
    .dw-colorways-scroll::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }
    .dw-colorway-card {
      flex: 0 0 140px;
      scroll-snap-align: start;
      text-decoration: none;
      color: inherit;
      border: 1px solid #e5e2dc;
      border-radius: 8px;
      overflow: hidden;
      background: #fff;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .dw-colorway-card:hover {
      border-color: #bbb;
      box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    }
    .dw-colorway-card.dw-current {
      border-color: #3D4246;
      border-width: 2px;
    }
    .dw-colorway-card img {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      display: block;
      background: #f2f0ec;
    }
    .dw-colorway-label {
      padding: 8px 10px;
      font-size: 12px;
      line-height: 1.3;
      color: #3D4246;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>

  <div class="dw-colorways-section">
    <h3 class="dw-colorways-heading">Other Colorways</h3>
    <div class="dw-colorways-scroll" id="dw-colorways-list"></div>
  </div>
</div>

<script>
(function() {
  var wrapper = document.getElementById('dw-other-colorways');
  if (!wrapper) return;
  var pattern = wrapper.dataset.pattern;
  var currentHandle = wrapper.dataset.current;
  var currentVendor = wrapper.dataset.vendor;
  if (!pattern) return;

  var url = '/search/suggest.json?q=' + encodeURIComponent(pattern) + '&resources[type]=product&resources[limit]=24';

  fetch(url)
    .then(function(r) { return r.json(); })
    .then(function(data) {
      var products = (data.resources && data.resources.results && data.resources.results.products) || [];

      // Filter: same vendor, has image, and title contains the pattern name
      var patternLower = pattern.toLowerCase();
      var vendorLower = (currentVendor || '').toLowerCase();
      var siblings = products.filter(function(p) {
        if (!p.image) return false;
        var titleLower = (p.title || '').toLowerCase();
        if (titleLower.indexOf(patternLower) === -1) return false;
        // Must match vendor to avoid cross-vendor contamination
        if (vendorLower) {
          var pVendor = ((p.vendor || '')).toLowerCase();
          if (pVendor !== vendorLower) return false;
        }
        return true;
      });

      if (siblings.length < 2) return; // Need at least 2 (including current) to show section

      var container = document.getElementById('dw-colorways-list');
      siblings.forEach(function(p) {
        var a = document.createElement('a');
        a.href = p.url;
        a.className = 'dw-colorway-card';
        if (p.url.indexOf('/' + currentHandle) !== -1) {
          a.className += ' dw-current';
        }

        var img = document.createElement('img');
        img.src = p.image.replace(/(\.[a-z]+)(\?|$)/, '_300x300$1$2');
        img.alt = p.title;
        img.loading = 'lazy';
        a.appendChild(img);

        // Extract color from title: "Pattern - Color | Vendor" → "Color"
        var label = p.title || '';
        var pipeIdx = label.indexOf(' | ');
        if (pipeIdx > 0) label = label.substring(0, pipeIdx);
        var dashIdx = label.indexOf(' - ');
        if (dashIdx > 0) label = label.substring(dashIdx + 3).trim();
        else {
          // Try removing pattern name prefix
          var pi = label.toLowerCase().indexOf(patternLower);
          if (pi === 0) label = label.substring(pattern.length).trim();
        }
        if (!label) label = p.title;

        var labelDiv = document.createElement('div');
        labelDiv.className = 'dw-colorway-label';
        labelDiv.textContent = label;
        a.appendChild(labelDiv);

        container.appendChild(a);
      });

      wrapper.style.display = 'block';
    })
    .catch(function() {});
})();
</script>
{% endif %}