Cuttlefish Docs
  • English

    • spz-product-snippet

    Supported layouts: container

    When to use

    When you need to display the product template.

    Code Demonstration

    Basic Usage

    Template Data

    Contains only data processed by the component, the original API data remains unchanged.

    Property NameDescriptionType
    secondImageReturns the second image, if not present, returns an empty objectObject
    thumbVariantsReturns the first variant data matching the variant name, if the product doesn't have image variants, returns an empty arrayArray
    remainInvisibleThumbCountReturns the number of remaining invisible thumbnailsnumber
    enableThumbShowMoreBtnWhether to display the button to show more thumbnailsboolean
    availableNonOnlyDefaultVariantWhether the product is purchasable and not just a single variantboolean
    withinUrlConcatenated product URL, if there is no within-url attribute, returns the current URLstring
    variants[0].withinUrlConcatenated variant URL, if there is no within-url attribute, returns the current URLstring
    min_price_variant.withinUrlConcatenated URL of the variant with the lowest price, if there is no within-url attribute, returns the current URLstring
    <spz-product-snippet
  product-id="..."
  within-url="..."
  thumb-max-num="3"
  variant-thumb-names="color,size"
  layout="container"
>
  <template>
    <div>
      <!-- ... -->
      <spz-img
        layout="responsive"
        width="${secondImage.width}"
        height="${secondImage.height}"
        src="${secondImage.src}"
        alt="${secondImage.alt}"
        object-fit="cover"
        auto-fit
        spz-if="${!!secondImage.src}"
      ></spz-img>
    </div>
  </template>
</spz-product-snippet>

    Attributes

    Property NameDescriptionTypeDefault ValueRequired
    product-idProduct IDstring-Yes
    data-source-idData source element ID, supports spz-render, spz-list and script elementsstring-No
    variant-thumb-namesThumbnail variant names, separated by ,string-No
    thumb-max-numMaximum visible number of thumbnailsnumber-No
    within-urlPrefix URL to be concatenated with all URLs in the product datastring-No

    Events

    finish

    This event is automatically triggered when the product template rendering is complete.

    AI Summary (LLM Ready)

    • Component ID: spz-product-snippet
    • One-line purpose: Display the product template.
    • Detected attribute rows: 5
    • Detected method subsections: 0
    • Detected event subsections: 1
    • Top attribute names: product-id, data-source-id, variant-thumb-names, thumb-max-num, within-url
    • Top method names: none (needs manual completion)
    • Top event names: finish
    • Reading order: start from usage/examples, then verify attributes, methods, and events.
    • Related docs: /en/guide/actions-and-events/ , /en/guide/layouts/