Product Details

Introduction

The Product Details component is used to display detailed product information, including the product cover (image/video), product details, purchase button, and other features. The component supports video playback from the media library, image carousel, and product information display.

Product Details provides the following components:

• ProductDetail - Product Detail Page Component
• ProductDetailPopup - Product Detail Popup Component

Import

UMD Method

Where rc-20250814 is the current version number. Please import according to the actual version number.

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

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

NPM Method

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

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

Code Example

<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 Methods

Component methods can be called via ref:

ProductDetail Props

ProductDetail Events

ProductDetail Methods

Component methods can be called via ref: