ResultVariantSelector

Component to show and select the available variants of a product for a given nest level. TODO: Log warning on mount when result is not injected.

Props

Name	Description	Type	Default
level	The nest level of the variants to be rendered.	number	0

Slots

Name	Description	Bindings (name - type - description)
variant	Variant item	variant ResultVariant - The variant item
variant-content	Variant content	variant ResultVariant - The variant item

Events

This component does not emit any events.

Examples

Basic usage

This component must be used as a child of ResultVariantsProvider.

Also, this component is intended to be used overwriting the content with the slots.

By default it will render a list of buttons containing the available variants.

This component only has a required level prop, that indicates the level of the variants to be rendered.

<template>
  <ResultVariantsProvider :result="result">
    <p>Result name: {{ result.name }}</p>
    <h1>Select color</h1>
    <ResultVariantSelector :level="0" />
    <h1>Select size</h1>
    <ResultVariantSelector :level="1" />
  </ResultVariantsProvider>
</template>
<script setup>
import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'
const result = {
  id: 'jacket',
  modelName: 'Result',
  type: 'Product',
  isWishlisted: false,
  identifier: { value: 'jacket' },
  images: [],
  name: 'jacket',
  price: { hasDiscount: false, originalValue: 10, value: 10 },
  url: '/products/jacket',
  variants: [
    {
      name: 'red',
      variants: [{ name: 'red XL' }, { name: 'red L' }],
    },
    {
      name: 'blue',
      variants: [{ name: 'blue S' }, { name: 'blue M' }, { name: 'blue L' }],
    },
  ],
}
</script>

Play with the default slot

You can customize the list using the default slot:

<template>
  <ResultVariantsProvider :result="result">
    <ResultVariantSelector :level="0" #default="{ variants, selectedVariant, selectVariant }">
      <div>
        <p v-if="selectedVariant">Selected variant: {{ selectedVariant.name }}</p>
        <ul class="x-flex">
          <li v-for="(variant, index) in variants" :key="index">
            <button @click="selectVariant(variant)">{{ variant.name }}</button>
          </li>
        </ul>
      </div>
    </ResultVariantSelector>
  </ResultVariantsProvider>
</template>
<script setup>
import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'
const result = {
  id: 'jacket',
  modelName: 'Result',
  type: 'Product',
  isWishlisted: false,
  identifier: { value: 'jacket' },
  images: [],
  name: 'jacket',
  price: { hasDiscount: false, originalValue: 10, value: 10 },
  url: '/products/jacket',
  variants: [{ name: 'red' }, { name: 'blue' }],
}
</script>

Play with variant-slot

You can customize the variant item using the variant slot:

<template>
  <ResultVariantsProvider :result="result">
    <ResultVariantSelector :level="0" #variant="{ variant, isSelected, selectVariant }">
      <div>
        <button @click="selectVariant">
          {{ variant.name }}
          <span v-if="isSelected">SELECTED!</span>
        </button>
      </div>
    </ResultVariantSelector>
  </ResultVariantsProvider>
</template>
<script setup>
import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'
const result = {
  id: 'jacket',
  modelName: 'Result',
  type: 'Product',
  isWishlisted: false,
  identifier: { value: 'jacket' },
  images: [],
  name: 'jacket',
  price: { hasDiscount: false, originalValue: 10, value: 10 },
  url: '/products/jacket',
  variants: [{ name: 'red' }, { name: 'blue' }],
}
</script>

Play with variant-content slot

You can customize the content of the default variant button using the variant-content slot:

<template>
  <ResultVariantsProvider :result="result">
    <ResultVariantSelector #variant-content="{ variant, isSelected }">
      <div>
        {{ variant.name }}
        <span v-if="isSelected">SELECTED!</span>
      </div>
    </ResultVariantSelector>
  </ResultVariantsProvider>
</template>
<script setup>
import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'
const result = {
  id: 'jacket',
  modelName: 'Result',
  type: 'Product',
  isWishlisted: false,
  identifier: { value: 'jacket' },
  images: [],
  name: 'jacket',
  price: { hasDiscount: false, originalValue: 10, value: 10 },
  url: '/products/jacket',
  variants: [{ name: 'red' }, { name: 'blue' }],
}
</script>