@ecomplus/storefront-components/src/html/ProductVariations.html

Vue components for E-Com Plus Storefront

<div
  class="variations"
  v-if="product.variations"
>
  <div
    v-for="(options, grid, index) in variationsGrids"
    v-if="filteredGrids[grid]"
    :class="`variations__grid variations__grid--${grid}`"
  >
    <div class="mb-2">
      <span class="variations__grid-title h5">
        {{ getGridTitle(grid) }}
      </span>

      <span
        v-if="selectedOptions[grid]"
        key="success"
        class="variations__value variations__value"
      >
        <i class="i-check mr-1"></i>
        {{ selectedOptions[grid] }}
      </span>
      <span
        v-else
        class="variations__value variations__value--empty"
      >
        <i class="i-arrow-down mr-1"></i>
        {{ i19selectVariation }}
      </span>
    </div>

    <template v-if="options.length <= maxOptionsBtns">
      <button
        v-for="optionText in options"
        class="variations__option btn btn-light"
        :class="[
          selectedOptions[grid] === optionText ? 'variations__option--selected' : null, 
          `variations__option--${optionText}`, 
          filteredGrids[grid].includes(optionText) ? null : 'disabled'
        ]"
        :style="grid === 'colors' ? getColorOptionBg(optionText) : null"
        @click="selectOption(optionText, grid, index)"
      >
        {{ optionText }}
      </button>
    </template>

    <select
      v-else
      class="variations__select custom-select"
      @change="$event => selectOption($event.target.value, grid, index)"
    >
      <option :selected="!selectedOptions[grid]">
        {{ i19select }}...
      </option>
      <option
        v-for="optionText in options"
        :value="optionText"
        :selected="selectedOptions[grid] === optionText"
        :disabled="!filteredGrids[grid].includes(optionText)"
      >
        {{ optionText }}
      </option>
    </select>
  </div>
</div>