ResultVariantsProvider

Component that exposes the result merged with its selected variant in the default slot.

It receives the original result and keeps track of the selected variant.

It provides the original result, the array containing the selected variants and a callback to set the selected variant to be used from a child.

Props

Name	Description	Type	Default
result	The original result containing the variants.	Result
autoSelectDepth	The provider by default will auto select the first variants of all levels. This prop allows to limit the number of variants auto selected when the provider is created. Take into account that the depth will be the variants level + 1, so, setting autoSelectDepth to 0 will not select any variant, setting it to 1 will select only the first variant of the first level, and so on.	number	Number.POSITIVE_INFINITY

Slots

Name	Description	Bindings (name - type - description)
default		None

Events

A list of events that the component will emit:

• UserSelectedAResultVariant (opens new window)

See it in action

This component is intended to be used in conjunction with the ResultVariantSelector component.

The result exposed in the default slot will contain the data of the selected variant.

By default, the first variants of all the levels will be selected when the component is rendered.

<template>
  <ResultVariantsProvider :result="result" #default="{ result }">
    <p>Result name: {{ result.name }}</p>
    <h1>Select color</h1>
    <ResultVariantSelector :level="0" #variant="{ variant, selectVariant }">
      <button @click="selectVariant">{{ variant.name }}</button>
    </ResultVariantSelector>
    <h1>Select size</h1>
    <ResultVariantSelector :level="1" #variant="{ variant, selectVariant }">
      <button @click="selectVariant">{{ variant.name }}</button>
    </ResultVariantSelector>
  </ResultVariantsProvider>
</template>
<script>
  import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components';
  export default {
    name: 'ResultVariantsProviderDemo',
    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 props

In this example, the provider has been configured to not auto select any variant. Changing the autoSelectDepth prop sets the number of variant levels to auto select, being 0 no variants, 1 the first variant of the first level, and so on.

<template>
  <ResultVariantsProvider :result="result" :autoSelectDepth="0" #default="{ result }">
    <p>Result name: {{ result.name }}</p>
    <h1>Select color</h1>
    <ResultVariantSelector :level="0" #variant="{ variant, selectVariant }">
      <button @click="selectVariant">{{ variant.name }}</button>
    </ResultVariantSelector>
    <h1>Select size</h1>
    <ResultVariantSelector :level="1" #variant="{ variant, selectVariant }">
      <button @click="selectVariant">{{ variant.name }}</button>
    </ResultVariantSelector>
  </ResultVariantsProvider>
</template>
<script>
  import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components';
  export default {
    name: 'ResultVariantsProviderDemo',
    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>