Product Library

This document primarily describes how to integrate the product library component on the interactive feature receiving end. After integration, the audience can view the product library content.

Before introducing and using this functional component, you need to perform common configuration for the interactive feature receiving end SDK. For details, please see: Interactive Feature Receiving End UI Components - Configuring the SDK.

Import

Online File Import Method

// script 标签引入，根据版本号引入JS版本。
<script src="https://websdk.videocc.net/interactions-receive-sdk-ui-default/0.24.0/lib/MobileProduct/MobileProduct.umd.min.js"></script>
<script>
    const MobileProduct = window.PolyvIRScene.MobileProduct.default;
</script>

Import Method (Recommended)

import MobileProduct from '@polyv/interactions-receive-sdk-ui-default/lib/MobileProduct';

Code Example

First, instantiate the SDK, then pass it into the product library component for internal logic processing.

Taking Mobile end integration as an example:

<template>
  <div class="plv-demo-product">
    <product-list
        v-if="productSdk"
        :product-sdk="productSdk"
        :lang="lang"
        @browse-product="handleBrowseProduct"
        @click-buy="handleClickBuy"
        @job-detail="handleShowJobDetail"
    ></product-list>

    <div
        class="c-product-bubble"
    >
      <product-bubble
          v-if="productSdk"
          :product-sdk="productSdk"
          :lang="lang"
          :getLinkParams="getLinkParams"
          @click-buy="handleClickBuy"
      />
    </div>
    <!-- modal是一个弹窗组件，可根据界面风格自行设计 -->
    <modal
        draggable
        body-locked
        title="岗位详情"
        :visible="visible"
        :close-on-click-modal="false"
        no-bg
        @close="hideJobDetail"
    >
      <product-job
          v-if="productSdk"
          :product-sdk="productSdk"
          :job-detail="jobDetail"
          :use-mobile-class="true"
      />
    </modal>
  </div>
</template>

<script>
import { Product } from '@polyv/interactions-receive-sdk';
import ProductList from '@polyv/interactions-receive-sdk-ui-default/lib/MobileProduct';
import ProductBubble from '@polyv/interactions-receive-sdk-ui-default/lib/ProductBubble'
import ProductJob from '@polyv/interactions-receive-sdk-ui-default/lib/ProductJob';


export default {
  components: {
    ProductList,
    ProductBubble,
    ProductJob
  },

  props: {
    lang: {
      type: String,
      default: 'zh_CN',
    }
  },

  data() {
    return {
      // 商品库 SDK 实例
      productSdk: null,
      visible: false,
      jobDetail: {
        cover: '',
        name: '',
        tags: [],
        params: ''
      },
    };
  },

  created() {
    this.productSdk = new Product();
  },

  beforeDestroy() {
    this.productSdk?.destroy();
  },

  methods: {
    getLinkParams() {
      // 跳转路径上携带参数如： ***.com?customParams1=自定义参数
      // return {
      //   customParams1: '自定义参数'
      // }
      return {};
    },
    handleBrowseProduct() {
      // TODO 用于统计用户数据
    },
    handleClickBuy() {
      // TODO 用户统计点击商品
    },
    handleShowJobDetail(data) {
      this.$set(this, 'jobDetail', data);
      this.visible = true;
    },
    hideJobDetail() {
      this.visible = false;
    },
  }
};
</script>

<style lang="scss">
.plv-demo-product {
  position: relative;
}
.c-product-bubble {
  position: absolute;
  top: 16px;
  padding-left: 8px;
  z-index: 35;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.c-product-bubble--mobile {
  top: 60px;
}
</style>

ProductList

Attributes

Events

ProductBubble

Attributes

Events

ProductJob

Attributes

Events