spz-variants

You add variants to a product that comes in more than one option, such as size or color. Each combination of option values for a product can be a variant for that product. For example, suppose that you sell T-shirts with two options：size and color. The size has three optional values：S, M, and L. The color has two optional values：Orange and White. So you can select an M and Orange T-shirt to specific a variant.

• The child elements of the spz-variant must have a role="variant" attribute.

The following is an example without templates:

<spz-variants
  manual
  layout="container"
  id="product-info-variants"
  name="product-info-variant"
  src="script:product-json"
  @variantChange="product-info-quantity.update(value=event.quantity,max=event.max,min=event.min);"
  slide="product-main-images;"
  switch-slide='["color"]'
>
  <!-- ... -->
  <spz-selector
    role="variant"
    layout="container"
    name="optionName"
    @select="product-info-variants.change(data=event);"
    default-value="selectedOptValue"
  >
    <!-- ... -->
  </spz-selector>
</spz-variants>

The following is an example with templates:

<spz-variants
  layout="container"
  id="product-info-variants"
  name="product-info-variant"
  src="/api/products/f4138308-ac57-46d5-bba7-ac60b2c6aefa"
  @variantChange="product-info-quantity.update(value=event.quantity,max=event.max,min=event.min);"
  slide="product-main-images;"
  switch-slide='["color"]'
>
  <template>
    <div>
      ${function() {
        // ...
        return (data.product.options || []).map((option, index) => {
          const optionName = option.name || '';

          return `
            <spz-selector
              role="variant"
              layout="container"
              name="${optionName}"
              @select="product-info-variants.change(data=event);"
              default-value="${data.selectedValues[optionName]}"
            >
              <div>
                <!-- ... -->
              </div>
            </spz-selector>
          `;
        }).join('');
      }()}
    </div>
  </template>
</spz-variants>

required

A string of the DOM ID. The id defines an identifier (ID) which must be unique in the whole document.

required

The value of this attribute can take three forms, one is using an API URL, the other is using script data, and the other is calling the render action. Src attribute usage.

The element must have a template when it is using an API URL and calling the render action.

<!-- an API URL -->
<spz-variants
  layout="container"
  id="variants"
  src="/api/products/f4138308-ac57-46d5-bba7-ac60b2c6aefa"
>
  <template>
    <div>
      <!-- ... -->
    </div>
  </template>
</spz-variants>

<!-- render action -->
<spz-render
  layout="container"
  src="/api/products/f4138308-ac57-46d5-bba7-ac60b2c6aefa"
  items="data.product"
  @finish="variants.render(product=event.data);"
></spz-render>

<spz-variants
  layout="container"
  id="variants"
  manual
>
  <template>
    <div>
      <!-- ... -->
    </div>
  </template>
</spz-variants>

If this attribute is present, the template doesn’t render at the beginning unless triggered by render, rerender, etc.

If this attribute is present, it will determine whether the current variant combination exists when the user clicks on any of the variant options. If it doesn’t exist, it will set whether the combination of all the options of another variant and the currently selected variant is optional. If not, then add a disabled attribute.

A string of a URL parameter. Get default variant combination id from URL parameter. It only works in template form.

For example, in this URL https://duck.dev.myshoplaza.com/products/haldon-cashmere-crew?variant=be2d8528-8918-466b-93f6-f9b097d330c5&preview_theme_id=, the keep-behavior value will be set to variant which will specify a variant combination with an id of be2d8528-8918-466b-93f6-f9b097d330c5 that is selected by default.

If this attribute is present, the template data doesn’t have variant data selected by default. It only works in template form.

Specify which carousel to switch. It is a semicolon separated string. For example slide="product-images;product-images-mobile;".

It must be used with the switch-slide attribute.

If it is specified, the corresponding product images will switch to the current variant image when the product has turned on the variant image and the user clicks on any variant option. It is an array of strings. For example switch-slide="switch-slide="["color","size"]".

It must be used with the slide attribute.

A class of the quantity elements. It can be used to specify multiple quantity selector elements to get the quantity of the variant selected by the user. For example quantity=".product-info-quantity".

<!--
  Displayed when the value of the quantity selector is less than 10.
-->
<spz-quantity
  layout="container"
  class="product-info-quantity"
  name="quantity"
  variant-id="variants"
  ...
>
  <!-- ... -->
<spz-quantity>

<!--
  Displayed when the value of the quantity selector is greater than or equal to 10.
-->
<spz-selector
  layout="container"
  class="product-info-quantity"
  name="quantity"
  variant-id="variants"
>
  <!-- ... -->
</spz-selector>

Specifies the text of the toast when the current selected variant combination doesn’t exist.

render(product=<Object | Array>)

Use the passed data to render the template. It has a parameter:

• product: A Object or Array of the product data.

rerender(product=<String>)

Use the src attribute to re-render the template. It has a parameter:

• product: A string of the product id.

To trigger the spz-variant change. No parameter required.

{
  "disabledValues": [],
  "max": 90, // the current variant available quantity
  "name": "Size", // the current variant name
  "product": { // the current product data
    // ...
  },
  "selectedValues": { // the current selected content
    "Size": ["XS"],
    "Color": ["Red"]
  },
  "variant": { // the current selected variant data
    // ...
  },
  "variantId": "f0571d4e-b5af-4656-ad5c-2a8c5d030840", // the current selected variant id
  "originData": { // original data
    // ...
  }
}

Be automatically triggered when the user selects an option.