商品詳情

介紹

商品詳情元件用於展示商品的詳細資訊，包括商品封面（圖片/影片）、商品資訊、購買按鈕等功能。元件支援素材庫影片播放、圖片輪播、商品資訊展示等功能。

商品詳情提供以下元件：

• ProductDetail - 商品詳情頁面元件
• ProductDetailPopup - 商品詳情彈窗元件

引入

UMD 方式

其中 rc-20250814 為目前版本號，請根據實際版本號進行引入。

<script src="https://websdk.videocc.net/product-ui/rc-20250814/product-detail-popup.umd.js"></script>

<script>
const ProductDetailPopup = window.PolyvProductUIProductDetailPopup;
</script>

NPM 方式

// 安装依赖
pnpm add @polyv/product-ui

// 引入组件
import { ProductDetail, ProductDetailPopup } from '@polyv/product-ui';

程式碼範例

<template>
  <div>
    <ProductDetailPopup
      ref="productDetailRef"
      :product-target="productSDK"
      :product-config="productConfig"
      @direct-buy="onDirectBuy"
      @not-support-direct-buy="onNotSupportDirectBuy"
    />
  </div>
</template>

<script setup>
import { ProductDetailPopup } from '@polyv/product-ui';
import { Product } from '@polyv/product-sdk';

// 初始化商品 SDK
const productSDK = new Product(interactionCore, config);
const productDetailRef = ref();

const productConfig = {
  // 商品配置
};

// 直接购买处理
const onDirectBuy = (productData) => {
  console.log('直接购买:', productData);
};

// 不支持直接购买处理
const onNotSupportDirectBuy = (productData) => {
  console.log('不支持直接购买:', productData);
};

// 打开商品详情
const openProductDetail = (productId) => {
  productDetailRef.value?.open(productId);
};

// 关闭商品详情
const closeProductDetail = () => {
  productDetailRef.value?.close();
};
</script>

API

ProductDetailPopup Props

ProductDetailPopup Events

ProductDetailPopup 方法

透過 ref 可以呼叫元件的方法：

ProductDetail Props

ProductDetail Events

ProductDetail 方法

透過 ref 可以呼叫元件的方法：