spz-product-snippet 商品模版

展示商品模版。

布局

container

何时使用

需要展示商品模版时。

代码演示

基本用法

模版数据

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

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

<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	商品ID	string	-	是
data-source-id	数据源元素ID，支持 `spz-render`, `spz-list` 和 `script` 元素	string	-	否
variant-thumb-names	缩略图变体名称，使用 `,` 分隔	string	-	否
thumb-max-num	缩略图最大可见数量	number	-	否
within-url	商品数据内的所有URL要拼接的前缀URL	string	-	否

事件

finish

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