Cuttlefish Docs
  • 简体中文

    • spz-product-snippet 商品模版

    支持布局: container

    何时使用

    需要展示商品模版时。

    代码演示

    基本用法

    模版数据

    只包含组件处理过的数据，原接口数据不变。

    属性名说明类型
    secondImage返回第二张图片，如果没有，返回空对象Object
    thumbVariants返回第一个符合变体名称的变体数据，如果商品没有开启配图，返回空数组Array
    remainInvisibleThumbCount返回剩余不可见的缩略图数量number
    enableThumbShowMoreBtn是否展示点击可见更多缩略图按钮boolean
    availableNonOnlyDefaultVariant商品是否是可以购买且不是单变体boolean
    withinUrl拼接的商品URL，如果没有 within-url 属性，直接返回当前URLstring
    variants[0].withinUrl拼接的变体URL，如果没有 within-url 属性，直接返回当前URLstring
    min_price_variant.withinUrl拼接的最小价格变体URL，如果没有 within-url 属性，直接返回当前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>

    属性

    属性名说明类型默认值是否必需
    product-id商品IDstring-是
    data-source-id数据源元素ID，支持 spz-render, spz-list 和 script 元素string-否
    variant-thumb-names缩略图变体名称，使用 , 分隔string-否
    thumb-max-num缩略图最大可见数量number-否
    within-url商品数据内的所有URL要拼接的前缀URLstring-否

    事件

    finish

    当商品模版渲染完成该事件会自动触发。

    AI 摘要（LLM Ready）

    • 组件标识：spz-product-snippet
    • 用途一句话：展示商品模版。
    • 可识别属性条目：5
    • 可识别方法小节：0
    • 可识别事件小节：1
    • 关键属性名（Top）：product-id、data-source-id、variant-thumb-names、thumb-max-num、within-url
    • 关键方法名（Top）：无（待补充）
    • 关键事件名（Top）：finish
    • 阅读顺序建议：先看「何时使用」与「代码演示」，再核对属性/方法/事件。
    • 关联文档：/guide/actions-and-events/ 、/guide/layouts/