SKU Display

{% comment %}
  Plynthr — SKU Display
  https://plynthr.com/snippets/sku-display/

  INSTALL:
  1. Create snippets/plynthr-sku-display.liquid
  2. Paste this code
  3. Add {%- render 'plynthr-sku-display' -%} in your product template
{% endcomment %}

<style>
  .plynthr-sku {
    font-size: 12px;
    color: var(--plynthr-sku-color, #999);
    margin: 4px 0 12px;
    font-variant-numeric: tabular-nums;
  }

  .plynthr-sku__label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--plynthr-sku-label-color, #666);
  }
</style>

{%- if template.name == 'product' -%}
  {%- assign current_variant = product.selected_or_first_available_variant -%}
  {%- if current_variant.sku != blank -%}
    <p class="plynthr-sku" id="plynthr-sku">
      <span class="plynthr-sku__label">SKU:</span>
      <span id="plynthr-sku-value">{{ current_variant.sku }}</span>
    </p>
  {%- endif -%}

  <script>
    (() => {
      const skuEl = document.getElementById('plynthr-sku');
      const skuValue = document.getElementById('plynthr-sku-value');
      if (!skuEl || !skuValue) return;

      const skus = {
        {%- for variant in product.variants -%}
          "{{ variant.id }}": "{{ variant.sku | escape }}"{% unless forloop.last %},{% endunless %}
        {%- endfor -%}
      };

      document.addEventListener('change', (e) => {
        if (e.target.name === 'id' || e.target.matches('[data-variant-id]')) {
          const sku = skus[e.target.value];
          if (sku) {
            skuValue.textContent = sku;
            skuEl.style.display = '';
          } else {
            skuEl.style.display = 'none';
          }
        }
      });
    })();
  </script>
{%- endif -%}