`n` dimensional product variants

shopify-product-variants.html

<div class="product-options">
  {% for option in product.options_with_values %}
    <div class="product-option">
      <h4 class="txt-size-0">{{ option.name }}</h4>
      <select class="product-option-select js-variant-select" data-axis="{{ option.name | downcase }}">

        {% for value in option.values %}
          <option {% if option.selected_value == value %}selected{% endif %}>
            {{ value }}
          </option>
        {% endfor %}
      </select>
    </div>
  {% endfor %}
  <div class="product-option">
    <h4 class="txt-size-0">Quantity</h4>
    <select class="product-option-select js-quantity-select">
      {% for i in (1..12) %}
        <option>{{ i }}</option>
      {% endfor %}
    </select>
  </div>
</div>

{% for variant in product.variants %}
  <button class="button button-fill js-variant-button"
          {% for option in product.options_with_values %}
            {% assign pos = option.position | prepend: 'option' %}
            data-{{option.name}}="{{variant[pos]}}"
          {% endfor %}
          data-cart-add="{{variant.id}}"
          data-cart-quantity="1">
    Add to Cart
  </button>
{% endfor %}
<button class="hide button button-fill button-disabled js-variant-button js-not-available">
  Not Available
</button>

<script>
import {bus} from '../helpers/bus.js'

const noVariant = () => {
  let buttons = Array(...document.querySelectorAll('.js-not-available'))
  buttons.forEach(button => {
    button.classList.remove('hide')
  })
}

const selectVariant = target => {
  let buttons = Array(...document.querySelectorAll('.js-variant-button'))
  buttons.forEach(button => {
    button.classList.add('hide')
  })
  let actives = buttons
  target.forEach(dimension => {
    actives = actives.filter(button => {
      return button.dataset[dimension.axis] == dimension.value
    })
  })
  actives.forEach(active => {
    active.classList.remove('hide')
  })
  if (actives.length < 1) {
    bus.emit('variant:na')
  }
}

const change = e => {
  let selects = Array(...document.querySelectorAll('.js-variant-select'))
  let target = selects.map(select => {
    return {
      axis: select.dataset.axis,
      value: select.value
    }
  })
  bus.emit('variant:select', target)
}



export const bind = () => {
  bus.off('variant:select', selectVariant)
  bus.on('variant:select', selectVariant)

  bus.off('variant:na', noVariant)
  bus.on('variant:na', noVariant)

  let selects = Array(...document.querySelectorAll('.js-variant-select')
  selects.forEach(select => {
    select.addEventListener('change', change)
  })

  change()
}


  
</script>