Product Button

Introduction

The Product Button component encapsulates a series of purchase logic for products, including disabled states, various purchase eligibility checks, and more.

The Product Button provides the following components:

• ProductButton - Product action button component
• ProductIframeLinkPopup - A popup layer component containing iframe content

Installation

UMD Method

Where rc-20250814 is the current version number. Please import based on the actual version number.

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

<script>
const ProductButton = window.PolyvProductUIProductButton;
const ProductIframeLinkPopup = window.PolyvProductUIProductIframeLinkPopup;
</script>

NPM Method

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

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

Code Example

<template>
  <div>
    <!-- 商品按钮 -->
    <ProductButton
      :product-target="productSDK"
      :product-config="productConfig"
      :product-data="productData"
      :disabled="false"
      @direct-buy="onDirectBuy"
    >
      <template #default="{ buttonText, disabled }">
        <button
          class="custom-product-button"
          :disabled="disabled"
        >
          {{ buttonText }}
        </button>
      </template>
    </ProductButton>

    <!-- iframe 链接弹窗 -->
    <ProductIframeLinkPopup />
  </div>
</template>

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

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

const productData = ref({
  productId: 1,
  name: '测试商品',
  // ... 其他商品数据
});

const productConfig = {
  // 自定义点击处理函数
  customClickButtonHandler: (product) => {
    console.log('自定义点击处理:', product);
  },
  // 获取链接参数
  getLinkParams: (url) => {
    return { utm_source: 'live' };
  },
  // 自定义禁用逻辑
  customProductDisabled: (product) => {
    return product.stock === 0;
  },
};

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

API

ProductButton Props

ProductButton Events

ProductButton Slots

ProductConfig Configuration

Product Types