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 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.

<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.

<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.

<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.

<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>