---

title: ResultVariantSelector

---

# ResultVariantSelector

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

## Props

| Name               | Description                                    | Type                | Default        |
| ------------------ | ---------------------------------------------- | ------------------- | -------------- |
| <code>level</code> | The nest level of the variants to be rendered. | <code>number</code> | <code>0</code> |

## Slots

| Name                         | Description     | Bindings<br />(name - type - description)                                                                                                                                                                                 |
| ---------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <code>variant</code>         | Variant item    | **variant** <code>ResultVariant</code> - The variant item<br />**isSelected** <code>boolean</code> - Indicates if the variant is selected<br />**selectVariant** <code>() => void</code> - Callback to select the variant |
| <code>variant-content</code> | Variant content | **variant** <code>ResultVariant</code> - The variant item<br />**isSelected** <code>boolean</code> - Indicates if the variant is selected                                                                                 |

## Events

This component doesn't emit events.

## See it in action

Here you have a basic example of how the `ResultVariantSelector` component is rendered.

Take into account that this component **must** be a child of a `ResultVariantsProvider` component.

Also, the 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.

```vue
<template>
  <ResultVariantsProvider :result="result" #default="{ result }">
    <p>Result name: {{ result.name }}</p>

    <h1>Select color</h1>
    <ResultVariantSelector :level="0" #variant="{ variant, selectVariant }" />

    <h1>Select size</h1>
    <ResultVariantSelector :level="1" #variant="{ variant, selectVariant }" />
  </ResultVariantsProvider>
</template>

<script>
  import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components';

  export default {
    name: 'ResultVariantSelectorDemo',
    components: {
      ResultVariantsProvider,
      ResultVariantSelector
    },
    data() {
      return {
        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

In this example the default slot is used to customize the list.

```vue
<template>
  <ResultVariantsProvider :result="result" #default="{ result }">
    <p>Result name: {{ result.name }}</p>

    <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>
  import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components';

  export default {
    name: 'ResultVariantSelectorDemo',
    components: {
      ResultVariantsProvider,
      ResultVariantSelector
    },
    data() {
      return {
        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

In this example the variant-slot is used to customize the variant item.

The variant will be rendered inside a list.

```vue
<template>
  <ResultVariantsProvider :result="result" #default="{ result }">
    <p>Result name: {{ result.name }}</p>

    <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>
  import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components';

  export default {
    name: 'ResultVariantSelectorDemo',
    components: {
      ResultVariantsProvider,
      ResultVariantSelector
    },
    data() {
      return {
        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

In this example the variant-content slot is used to customize the content of the default variant
button.

```vue
<template>
  <ResultVariantsProvider :result="result" #default="{ result }">
    <p>Result name: {{ result.name }}</p>

    <ResultVariantSelector #variant-content="{ variant, isSelected }">
      <div>
        {{ variant.name }}
        <span v-if="isSelected">SELECTED!</span>
      </div>
    </ResultVariantSelector>
  </ResultVariantsProvider>
</template>

<script>
  import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components';

  export default {
    name: 'ResultVariantSelectorDemo',
    components: {
      ResultVariantsProvider,
      ResultVariantSelector
    },
    data() {
      return {
        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>
```