Cuttlefish Docs
  • English

    • spz-variants

    Supported layouts: container

    When to Use

    When you need to display product variants and make a selection, typically used on product detail pages, quick add-to-cart popups, etc.

    Code Demonstration

    Basic Usage

    • Only supports fieldset and select elements as single variant blocks, they need to have a name attribute, with the value being the name of the variant, indicating which variant block it is.
    • Variant blocks internally use native form controls to implement variant selection.
    • Each variant option element needs to have an option attribute, its value matching the value attribute, representing the current variant option value.
    <script id="product-json" type="application/json">
  {
    "product": "...",
    "selected": "..."
  }
</script>

<spz-variants layout="container" src="script:product-json" manual interference inherit-url-variant>
  <fieldset name="Color">
    <legend class="w-full">
      <span>Color</span>
    </legend>
    <div>
      <label>
        <input type="radio" option="DarkKhaki" name="product-info-variant-Color" value="DarkKhaki">
        <span>DarkKhaki</span>
      </label>
      <label>
        <input type="radio" option="SteelBlue" name="product-info-variant-Color" value="SteelBlue">
        <span>SteelBlue</span>
      </label>
    </div>
  </fieldset>
  <fieldset name="Size">
    <legend class="w-full">
      <span>Size</span>
    </legend>
    <div>
      <label>
        <input type="radio" option="S" name="product-info-variant-Size" value="S">
        <span>S</span>
      </label>
      <label>
        <input type="radio" option="M" name="product-info-variant-Size" value="M">
        <span>M</span>
      </label>
    </div>
  </fieldset>
</spz-variants>

    Attributes

    Attribute NameDescriptionTypeDefault ValueRequired
    srcPath to get datastring-No
    manualIf this attribute exists, do not render immediately upon mounting (or do not request data immediately)---
    inherit-url-variantIf this attribute exists, when there is no default variant, get the value of the variant field from the URL as the default variant; when a variant switch occurs, write the current selected variant ID into the variant field of the URL---
    disabled-default-valueIf this attribute exists, initially do not select any variant by default---
    switch-slideArray of variant names, when the configured variant is switched, the configured slide carousel will also switch to the variant's corresponding pictureArray-No
    slideID of spz-carousel element, use ; to separate multiple IDsstring-No
    interactWhen the mouse enters or leaves a variant option, automatically trigger mouseout or [variantName]mouseover events, optional: hoverstring-No
    interferenceIf this attribute exists, when switching variant combinations, it will determine whether the current variant option can be selected with other variant options---
    templateSpecify a templatestring-No

    src Data Source Methods

    There are two ways to obtain data:

    • Get data via the API
    • script:<scriptId>: Get data through a script

    Methods

    variantsRender

    Render variants.

    Parameter NameDescriptionTypeRequired
    productProduct data. If it's an array, take the first elementObject | ArrayYes

    Events

    event Object Data

    Attribute NameDescriptionType
    valueThe option value of the current operation variantstring
    selectDataSelected variant data, only available during the mouseout eventObject | null

    mouseout

    This event is automatically triggered when the mouse leaves a variant option.

    [variantName]mouseover

    When the mouse enters an option of the corresponding variant name, the mouseover event for that variant name is automatically triggered. For example: If there is a color variant, when the mouse enters its variant option, the colormouseover event is triggered.

    AI Summary (LLM Ready)

    • Component ID: spz-variants
    • One-line purpose: Display the product variant blocks.
    • Detected attribute rows: 9
    • Detected method subsections: 1
    • Detected event subsections: 3
    • Top attribute names: src, manual, inherit-url-variant, disabled-default-value, switch-slide, slide
    • Top method names: variantsRender
    • Top event names: mouseout, [variantName]mouseover
    • Reading order: start from usage/examples, then verify attributes, methods, and events.
    • Related docs: /en/guide/actions-and-events/ , /en/guide/layouts/