Wishlist

{%- comment -%}
  modblo. Wishlist
  Replaces Wishlist Plus / Smart Wishlist / Hulk Wishlist apps.
  Two parts in one section:
    1. The wishlist display — drops onto /pages/wishlist
    2. The heart-toggle widget — drop the snippet into any product card or PDP
       (see installSteps for the snippet). All state in localStorage; no
       account required, works for guests.
{%- endcomment -%}

<section class="modblo-wl" data-modblo-wl
         data-section-id="{{ section.id }}"
         style="--modblo-wl-bg: {{ section.settings.bg }};
                --modblo-wl-fg: {{ section.settings.fg }};
                --modblo-wl-accent: {{ section.settings.accent }};
                --modblo-wl-heart: {{ section.settings.heart_color }};">
  <div class="modblo-wl__inner page-width">
    <header class="modblo-wl__head">
      {%- if section.settings.eyebrow != blank -%}
        <p class="modblo-wl__eyebrow">{{ section.settings.eyebrow }}</p>
      {%- endif -%}
      <h1 class="modblo-wl__h">{{ section.settings.heading | default: 'Your wishlist' }}</h1>
      <p class="modblo-wl__sub" data-modblo-wl-sub>
        <span data-modblo-wl-count>0</span> {{ section.settings.items_label | default: 'saved' }}
      </p>
    </header>

    {%- comment -%} Empty state (shown by default; JS toggles hidden when items exist) {%- endcomment -%}
    <div class="modblo-wl__empty" data-modblo-wl-empty>
      <div class="modblo-wl__empty-icon" aria-hidden="true">
        <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
          <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
        </svg>
      </div>
      <p class="modblo-wl__empty-title">{{ section.settings.empty_title | default: 'Nothing saved yet' }}</p>
      <p class="modblo-wl__empty-sub">{{ section.settings.empty_sub | default: 'Tap the heart on any product to save it for later.' }}</p>
      <a href="{{ section.settings.shop_url | default: '/collections/all' }}" class="modblo-wl__empty-cta">
        {{ section.settings.shop_label | default: 'Start browsing' }}
      </a>
    </div>

    {%- comment -%} Items grid (rendered by JS from localStorage) {%- endcomment -%}
    <div class="modblo-wl__grid" data-modblo-wl-grid hidden></div>

    {%- comment -%} Item template — JS clones this for each saved item {%- endcomment -%}
    <template data-modblo-wl-tpl>
      <article class="modblo-wl__card">
        <a class="modblo-wl__card-link">
          <img class="modblo-wl__card-img" loading="lazy" alt="" width="600" height="600">
        </a>
        <button type="button" class="modblo-wl__card-remove" aria-label="Remove from wishlist" data-modblo-wl-remove>
          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
          </svg>
        </button>
        <div class="modblo-wl__card-body">
          <p class="modblo-wl__card-vendor"></p>
          <p class="modblo-wl__card-title"></p>
          <p class="modblo-wl__card-price"></p>
          <form action="/cart/add" method="post" class="modblo-wl__card-form">
            <input type="hidden" name="id">
            <button type="submit" class="modblo-wl__card-add">Add to cart</button>
          </form>
        </div>
      </article>
    </template>
  </div>
</section>

<style>
  .modblo-wl { background: var(--modblo-wl-bg, #fff); color: var(--modblo-wl-fg, #0b0b0c); padding: clamp(48px, 6vw, 80px) 0; }
  .modblo-wl__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

  .modblo-wl__head { text-align: center; margin-bottom: 40px; }
  .modblo-wl__eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: 12px; font-weight: 700; color: var(--modblo-wl-accent, #6366f1); margin: 0 0 12px; }
  .modblo-wl__h { font-size: clamp(28px, 4vw, 40px); letter-spacing: -.02em; margin: 0 0 8px; }
  .modblo-wl__sub { font-size: 14px; opacity: .6; margin: 0; }

  .modblo-wl__empty { text-align: center; padding: 48px 24px; }
  .modblo-wl__empty-icon {
    width: 80px; height: 80px; border-radius: 50%;
    background: color-mix(in oklab, var(--modblo-wl-fg) 5%, transparent);
    color: color-mix(in oklab, var(--modblo-wl-fg) 35%, transparent);
    display: grid; place-items: center; margin: 0 auto 20px;
  }
  .modblo-wl__empty-title { font-size: 18px; font-weight: 600; margin: 0 0 6px; }
  .modblo-wl__empty-sub { font-size: 14px; opacity: .65; margin: 0 0 20px; max-width: 360px; margin-left: auto; margin-right: auto; }
  .modblo-wl__empty-cta {
    display: inline-block; padding: 12px 24px;
    background: var(--modblo-wl-fg, #0b0b0c); color: var(--modblo-wl-bg, #fff);
    border-radius: 12px; text-decoration: none; font-size: 14px; font-weight: 600;
  }

  .modblo-wl__grid {
    display: grid; gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
  .modblo-wl__grid[hidden] { display: none; }

  .modblo-wl__card { position: relative; }
  .modblo-wl__card-link { display: block; color: inherit; text-decoration: none; }
  .modblo-wl__card-img {
    width: 100%; aspect-ratio: 4/5; object-fit: cover;
    border-radius: 12px; margin-bottom: 10px;
    background: color-mix(in oklab, var(--modblo-wl-fg) 4%, transparent);
  }
  .modblo-wl__card-remove {
    position: absolute; top: 10px; right: 10px;
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,.92); color: #0b0b0c;
    border: 0; cursor: pointer;
    display: grid; place-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,.15);
    transition: transform .15s, background .2s;
  }
  .modblo-wl__card-remove:hover { background: #fff; transform: scale(1.06); }

  .modblo-wl__card-vendor { font-size: 11px; opacity: .6; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 4px; }
  .modblo-wl__card-title { font-size: 14px; font-weight: 600; margin: 0 0 4px; line-height: 1.3; }
  .modblo-wl__card-price { font-size: 13px; margin: 0 0 10px; }
  .modblo-wl__card-form { margin: 0; }
  .modblo-wl__card-add {
    width: 100%; padding: 9px 12px;
    background: color-mix(in oklab, var(--modblo-wl-fg) 6%, transparent);
    color: inherit; border: 0; border-radius: 8px;
    font-size: 12px; font-weight: 600; cursor: pointer;
    transition: background .2s;
  }
  .modblo-wl__card-add:hover { background: var(--modblo-wl-accent, #6366f1); color: #fff; }

  /* The heart-toggle button — used by other sections via the snippet
     in installSteps. Styled here so consumers don't need to ship CSS. */
  .modblo-wl-heart {
    background: rgba(255,255,255,.9); color: #0b0b0c;
    border: 0; cursor: pointer;
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-grid; place-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,.12);
    transition: transform .15s;
  }
  .modblo-wl-heart:active { transform: scale(.92); }
  .modblo-wl-heart svg { width: 18px; height: 18px; transition: fill .2s, color .2s; }
  .modblo-wl-heart[aria-pressed="true"] svg { fill: var(--modblo-wl-heart, #ef4444); color: var(--modblo-wl-heart, #ef4444); }
</style>

<script>
  (function () {
    var KEY = 'cbWishlist';

    function readList() {
      try { return JSON.parse(localStorage.getItem(KEY) || '[]'); } catch (e) { return []; }
    }
    function writeList(list) {
      localStorage.setItem(KEY, JSON.stringify(list));
      document.dispatchEvent(new CustomEvent('modblo-wishlist:updated', { detail: { count: list.length } }));
    }

    /* Render the wishlist display section */
    var root = document.querySelector('[data-modblo-wl][data-section-id="{{ section.id }}"]');
    if (root) {
      var grid = root.querySelector('[data-modblo-wl-grid]');
      var empty = root.querySelector('[data-modblo-wl-empty]');
      var sub = root.querySelector('[data-modblo-wl-sub]');
      var countEl = root.querySelector('[data-modblo-wl-count]');
      var tpl = root.querySelector('[data-modblo-wl-tpl]');

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

      function renderList() {
        var list = readList();
        countEl.textContent = list.length;

        if (list.length === 0) {
          empty.hidden = false;
          grid.hidden = true;
          sub.hidden = true;
          return;
        }

        empty.hidden = true;
        grid.hidden = false;
        sub.hidden = false;
        grid.innerHTML = '';

        list.forEach(function (item) {
          var node = tpl.content.firstElementChild.cloneNode(true);
          var link = node.querySelector('.modblo-wl__card-link');
          link.href = item.url;
          var img = node.querySelector('.modblo-wl__card-img');
          if (item.image) { img.src = item.image; img.alt = item.title; }

          node.querySelector('.modblo-wl__card-vendor').textContent = item.vendor || '';
          node.querySelector('.modblo-wl__card-title').textContent = item.title;
          var compareHtml = (item.compare && item.compare > item.price)
            ? '<s style="opacity:.5; margin-left:6px;">' + fmt(item.compare) + '</s>' : '';
          node.querySelector('.modblo-wl__card-price').innerHTML = '<strong>' + fmt(item.price) + '</strong>' + compareHtml;
          node.querySelector('input[name="id"]').value = item.variantId;

          node.querySelector('[data-modblo-wl-remove]').addEventListener('click', function () {
            removeFromList(item.handle);
          });

          node.querySelector('.modblo-wl__card-form').addEventListener('submit', function (e) {
            e.preventDefault();
            fetch('/cart/add.js', {
              method: 'POST', headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({ id: item.variantId, quantity: 1 }),
            }).then(function () { document.dispatchEvent(new CustomEvent('cart:updated')); });
          });

          grid.appendChild(node);
        });
      }

      function removeFromList(handle) {
        var list = readList().filter(function (i) { return i.handle !== handle; });
        writeList(list);
        renderList();
      }

      document.addEventListener('modblo-wishlist:updated', renderList);
      renderList();
    }

    /* Heart-toggle handler: works for any [data-modblo-wl-toggle] button anywhere
       on the site. Reads product info from data-* attributes. */
    document.addEventListener('click', function (e) {
      var btn = e.target.closest('[data-modblo-wl-toggle]');
      if (!btn) return;
      e.preventDefault();
      var handle = btn.dataset.handle;
      if (!handle) return;
      var list = readList();
      var existing = list.findIndex(function (i) { return i.handle === handle; });
      if (existing >= 0) {
        list.splice(existing, 1);
        btn.setAttribute('aria-pressed', 'false');
      } else {
        list.unshift({
          handle: handle,
          title: btn.dataset.title || handle,
          vendor: btn.dataset.vendor || '',
          image: btn.dataset.image || '',
          url: btn.dataset.url || ('/products/' + handle),
          price: parseInt(btn.dataset.price, 10) || 0,
          compare: parseInt(btn.dataset.compare, 10) || 0,
          variantId: btn.dataset.variantId || '',
        });
        btn.setAttribute('aria-pressed', 'true');
      }
      writeList(list);
    });

    /* On load, mark heart buttons that match items already in the list */
    function markHearts() {
      var list = readList();
      var saved = list.reduce(function (s, i) { s[i.handle] = true; return s; }, {});
      document.querySelectorAll('[data-modblo-wl-toggle]').forEach(function (btn) {
        btn.setAttribute('aria-pressed', saved[btn.dataset.handle] ? 'true' : 'false');
      });
    }
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', markHearts);
    } else {
      markHearts();
    }
    document.addEventListener('modblo-wishlist:updated', markHearts);
  })();
</script>

{% schema %}
{
  "name": "Wishlist",
  "tag": "section",
  "settings": [
    { "type": "header", "content": "Copy" },
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Saved for later" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Your wishlist" },
    { "type": "text", "id": "items_label", "label": "Items label", "default": "saved" },
    { "type": "header", "content": "Empty state" },
    { "type": "text", "id": "empty_title", "label": "Empty title", "default": "Nothing saved yet" },
    { "type": "textarea", "id": "empty_sub", "label": "Empty subtext", "default": "Tap the heart on any product to save it for later." },
    { "type": "text", "id": "shop_label", "label": "Empty CTA label", "default": "Start browsing" },
    { "type": "url", "id": "shop_url", "label": "Empty CTA link" },
    { "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 (Add-to-cart)", "default": "#6366f1" },
    { "type": "color", "id": "heart_color", "label": "Heart color (when saved)", "default": "#ef4444" }
  ],
  "presets": [{ "name": "Wishlist" }]
}
{% endschema %}