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
level	The nest level of the variants to be rendered.	number	0

Slots

Name	Description	Bindings (name - type - description)
default	Variants list	variants ResultVariant[] - Array containing the available variants selectedVariant ResultVariant | undefined - The selected variant selectVariant (variant: ResultVariant) => void - Callback to select a variant
variant	Variant item	variant ResultVariant - The variant item isSelected boolean - Indicates if the variant is selected selectVariant () => void - Callback to select the variant
variant-content	Variant content	variant ResultVariant - The variant item isSelected boolean - 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.

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