Variant Picker Pro

{%- comment -%}
  modblo, Variant Picker Pro
  Replaces Swatch King / Variant Image Auto Switch / Globo Color Swatch.
  Premium variant selector for PDPs:
    - Color swatches (auto-detected from variant option name "Color")
    - Size pills (auto-detected from "Size")
    - Sold-out detection per variant
    - Auto-swaps gallery image when variant has its own featured image
    - Updates URL with variant param so the choice survives reload
{%- endcomment -%}

{%- assign product = product -%}
{%- if section.settings.product -%}
  {%- assign product = section.settings.product -%}
{%- endif -%}

{%- if product != blank -%}
<div class="modblo-vp" data-modblo-vp
     data-section-id="{{ section.id }}"
     data-product='{{ product | json | escape }}'
     style="--modblo-vp-fg: {{ section.settings.fg }};
            --modblo-vp-accent: {{ section.settings.accent }};
            --modblo-vp-bg: {{ section.settings.bg }};">

  {%- for option in product.options_with_values -%}
    {%- assign opt_name = option.name | downcase -%}
    {%- assign opt_kind = 'pill' -%}
    {%- if opt_name contains 'color' or opt_name contains 'colour' -%}{%- assign opt_kind = 'swatch' -%}{%- endif -%}
    {%- if opt_name contains 'size' -%}{%- assign opt_kind = 'pill' -%}{%- endif -%}

    <div class="modblo-vp__row" data-modblo-vp-row data-option-position="{{ option.position }}">
      <div class="modblo-vp__row-head">
        <span class="modblo-vp__row-label">{{ option.name }}</span>
        <span class="modblo-vp__row-value" data-modblo-vp-value>{{ option.selected_value }}</span>
      </div>

      <div class="modblo-vp__options modblo-vp__options--{{ opt_kind }}">
        {%- for value in option.values -%}
          {%- assign is_selected = false -%}
          {%- if value == option.selected_value -%}{%- assign is_selected = true -%}{%- endif -%}

          {%- comment -%} Determine availability for this option value {%- endcomment -%}
          {%- assign is_available = false -%}
          {%- for v in product.variants -%}
            {%- assign vopt = v.options[forloop.parentloop.index0] -%}
            {%- if vopt == value and v.available -%}
              {%- assign is_available = true -%}
              {%- break -%}
            {%- endif -%}
          {%- endfor -%}

          {%- if opt_kind == 'swatch' -%}
            <button type="button"
                    class="modblo-vp__swatch {% if is_selected %}is-selected{% endif %} {% unless is_available %}is-soldout{% endunless %}"
                    data-modblo-vp-opt
                    data-value="{{ value | escape }}"
                    aria-label="{{ option.name }}: {{ value }}{% unless is_available %} (sold out){% endunless %}"
                    style="--modblo-vp-color: {{ value | handle }};">
              <span class="modblo-vp__swatch-fill"></span>
              <span class="modblo-vp__swatch-x" aria-hidden="true"></span>
            </button>
          {%- else -%}
            <button type="button"
                    class="modblo-vp__pill {% if is_selected %}is-selected{% endif %} {% unless is_available %}is-soldout{% endunless %}"
                    data-modblo-vp-opt
                    data-value="{{ value | escape }}">
              {{ value }}
            </button>
          {%- endif -%}
        {%- endfor -%}
      </div>
    </div>
  {%- endfor -%}

  <div class="modblo-vp__price-row">
    <div>
      <p class="modblo-vp__price" data-modblo-vp-price>{{ product.selected_or_first_available_variant.price | money }}</p>
      {%- if product.compare_at_price > product.price -%}
        <p class="modblo-vp__compare" data-modblo-vp-compare>{{ product.selected_or_first_available_variant.compare_at_price | money }}</p>
      {%- endif -%}
    </div>
    <p class="modblo-vp__avail" data-modblo-vp-avail>
      <span class="modblo-vp__dot"></span>
      <span data-modblo-vp-avail-text>In stock</span>
    </p>
  </div>

  <form action="/cart/add" method="post" enctype="multipart/form-data" class="modblo-vp__form" data-modblo-vp-form>
    <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" data-modblo-vp-id>
    <button type="submit" class="modblo-vp__cta" data-modblo-vp-cta>
      {{ section.settings.cta_label | default: 'Add to cart' }}
    </button>
  </form>
</div>

<style>
  .modblo-vp {
    --modblo-vp-fg: #0b0b0c;
    --modblo-vp-accent: #6366f1;
    --modblo-vp-bg: #fff;
    color: var(--modblo-vp-fg); background: var(--modblo-vp-bg);
    padding: 24px; border-radius: 16px;
    max-width: 480px;
  }

  .modblo-vp__row { margin-bottom: 20px; }
  .modblo-vp__row-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: 13px; }
  .modblo-vp__row-label { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; opacity: .55; font-size: 11px; }
  .modblo-vp__row-value { font-weight: 600; }

  .modblo-vp__options { display: flex; flex-wrap: wrap; gap: 8px; }
  .modblo-vp__options--swatch { gap: 10px; }

  /* Color swatches */
  .modblo-vp__swatch {
    position: relative;
    width: 36px; height: 36px; padding: 3px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color .2s, transform .15s;
  }
  .modblo-vp__swatch:hover { transform: scale(1.06); }
  .modblo-vp__swatch.is-selected { border-color: var(--modblo-vp-fg); }
  .modblo-vp__swatch-fill {
    display: block; width: 100%; height: 100%;
    border-radius: 50%;
    background: var(--modblo-vp-color, #999);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--modblo-vp-fg) 15%, transparent);
  }
  .modblo-vp__swatch-x {
    display: none; position: absolute; inset: 0; pointer-events: none;
  }
  .modblo-vp__swatch.is-soldout .modblo-vp__swatch-x {
    display: block;
    background: linear-gradient(to top right,
      transparent calc(50% - 1px),
      color-mix(in oklab, var(--modblo-vp-fg) 50%, transparent) 50%,
      transparent calc(50% + 1px));
    border-radius: 50%;
  }
  .modblo-vp__swatch.is-soldout { opacity: .55; cursor: not-allowed; }

  /* Pills */
  .modblo-vp__pill {
    padding: 10px 16px;
    background: transparent;
    color: var(--modblo-vp-fg);
    border: 1px solid color-mix(in oklab, var(--modblo-vp-fg) 18%, transparent);
    border-radius: 10px;
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    min-width: 48px;
  }
  .modblo-vp__pill:hover:not(.is-soldout) {
    border-color: color-mix(in oklab, var(--modblo-vp-fg) 40%, transparent);
  }
  .modblo-vp__pill.is-selected {
    border-color: var(--modblo-vp-fg);
    background: var(--modblo-vp-fg);
    color: var(--modblo-vp-bg);
  }
  .modblo-vp__pill.is-soldout {
    opacity: .4; cursor: not-allowed;
    text-decoration: line-through;
  }

  .modblo-vp__price-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0; margin-top: 6px;
    border-top: 1px solid color-mix(in oklab, var(--modblo-vp-fg) 8%, transparent);
  }
  .modblo-vp__price { font-size: 22px; font-weight: 600; margin: 0; }
  .modblo-vp__compare {
    font-size: 14px; opacity: .55; margin: 2px 0 0;
    text-decoration: line-through;
  }
  .modblo-vp__avail {
    display: flex; align-items: center; gap: 6px;
    margin: 0; font-size: 12px; font-weight: 600;
  }
  .modblo-vp__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 3px color-mix(in oklab, #16a34a 18%, transparent);
  }
  .modblo-vp__avail.is-soldout .modblo-vp__dot { background: #ef4444; box-shadow: 0 0 0 3px color-mix(in oklab, #ef4444 18%, transparent); }

  .modblo-vp__cta {
    width: 100%; margin-top: 12px;
    padding: 16px 24px;
    background: var(--modblo-vp-accent);
    color: #fff; border: 0; border-radius: 12px;
    font-size: 15px; font-weight: 600;
    cursor: pointer;
    transition: opacity .2s, transform .15s;
  }
  .modblo-vp__cta:hover:not([disabled]) { opacity: .92; }
  .modblo-vp__cta:active:not([disabled]) { transform: scale(.98); }
  .modblo-vp__cta[disabled] { opacity: .5; cursor: not-allowed; }
</style>

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

    var product;
    try { product = JSON.parse(root.dataset.product); } catch (e) { return; }

    var rows = Array.from(root.querySelectorAll('[data-modblo-vp-row]'));
    var selection = product.options.map(function (_, i) {
      var current = product.selected_or_first_available_variant.options[i];
      return current;
    });

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

    function findVariant(opts) {
      return product.variants.find(function (v) {
        return v.options.every(function (o, i) { return o === opts[i]; });
      });
    }

    function render() {
      var variant = findVariant(selection);
      rows.forEach(function (row, ri) {
        var valueLabel = row.querySelector('[data-modblo-vp-value]');
        if (valueLabel) valueLabel.textContent = selection[ri];

        Array.from(row.querySelectorAll('[data-modblo-vp-opt]')).forEach(function (btn) {
          var val = btn.dataset.value;
          btn.classList.toggle('is-selected', val === selection[ri]);

          // Recompute availability given other selections
          var trial = selection.slice();
          trial[ri] = val;
          var match = findVariant(trial);
          var available = !!(match && match.available);
          btn.classList.toggle('is-soldout', !available);
        });
      });

      var priceEl = root.querySelector('[data-modblo-vp-price]');
      var compareEl = root.querySelector('[data-modblo-vp-compare]');
      var availEl = root.querySelector('[data-modblo-vp-avail]');
      var availText = root.querySelector('[data-modblo-vp-avail-text]');
      var idInput = root.querySelector('[data-modblo-vp-id]');
      var cta = root.querySelector('[data-modblo-vp-cta]');

      if (variant) {
        priceEl.textContent = fmtMoney(variant.price);
        if (compareEl && variant.compare_at_price > variant.price) {
          compareEl.textContent = fmtMoney(variant.compare_at_price);
          compareEl.style.display = '';
        } else if (compareEl) {
          compareEl.style.display = 'none';
        }
        idInput.value = variant.id;

        if (variant.available) {
          availEl.classList.remove('is-soldout');
          availText.textContent = 'In stock';
          cta.disabled = false;
          cta.textContent = '{{ section.settings.cta_label | default: "Add to cart" }}';
        } else {
          availEl.classList.add('is-soldout');
          availText.textContent = 'Sold out';
          cta.disabled = true;
          cta.textContent = 'Sold out';
        }

        // Swap gallery image if variant has its own featured image
        if (variant.featured_image) {
          var mainImg = document.querySelector('[data-product-image], .product__media img, .product-single__photo img');
          if (mainImg) mainImg.src = variant.featured_image.src || variant.featured_image;
        }

        // Update URL so the variant choice survives reload
        var url = new URL(window.location.href);
        url.searchParams.set('variant', variant.id);
        window.history.replaceState({}, '', url);
      } else {
        availEl.classList.add('is-soldout');
        availText.textContent = 'Unavailable';
        cta.disabled = true;
        cta.textContent = 'Unavailable';
      }
    }

    rows.forEach(function (row, ri) {
      row.querySelectorAll('[data-modblo-vp-opt]').forEach(function (btn) {
        btn.addEventListener('click', function () {
          if (btn.classList.contains('is-soldout')) {
            // Allow selecting sold-out value to show "Sold out" but only for the selected option
            // Otherwise let the user pick a different size first
          }
          selection[ri] = btn.dataset.value;
          render();
        });
      });
    });

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

{% schema %}
{
  "name": "Variant Picker Pro",
  "tag": "section",
  "settings": [
    { "type": "header", "content": "Product" },
    { "type": "product", "id": "product", "label": "Product (leave blank to auto-bind on PDP)" },
    { "type": "text", "id": "cta_label", "label": "Add-to-cart label", "default": "Add to cart" },
    { "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": "Variant Picker Pro" }]
}
{% endschema %}
{%- endif -%}