# 商品库使用说明

最后更新时间：2024-05-30

## 一、功能说明

直播带货必备能力，主播口播搭配直播间商品信息展示，观众可点击商品跳转第三方商城购买商品。商品类型支持实物商品、虚拟商品（课程、服务等）、金融产品、职位产品等。

![shangpinku001](https://git.polyv.net/help-center/document-center/-/blob/master/docs/live/product/live_tools_interactive/img/shangpinku001.png)

## 二、功能展示

new Vue({ el: '#player', data() { return { vodPlayerJs: 'https://player.polyv.net/script/player.js', vid: '1b448be32385d305a61a860e75917f43\_1', }; }, mounted(){ this.loadPlayerScript(this.loadPlayer); }, methods: { loadPlayerScript(callback) { if (!window.polyvPlayer) { const myScript = document.createElement('script'); myScript.setAttribute('src', this.vodPlayerJs); myScript.onload = callback; document.body.appendChild(myScript); } else { callback(); } }, loadPlayer() { const polyvPlayer = window.polyvPlayer; this.player = polyvPlayer({ wrap: '#player', vid: this.vid , autoplay:false }); } }, destroyed() { if (this.player) { this.player.destroy(); } } }) 点击添加商品可以从平台商品库添加和手动新建，选择产品类型，设置好商品相关信息

![shangpinku002](https://git.polyv.net/help-center/document-center/-/blob/master/docs/live/product/live_tools_interactive/img/shangpinku002.png)

可在列表进行商品管理、编辑商品信息、 删除商品、搜索和筛选商品

![shangpinku003](https://git.polyv.net/help-center/document-center/-/blob/master/docs/live/product/live_tools_interactive/img/shangpinku003.png)

## 三、观看端预览

| ![image-20221011174211495](https://6941759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmV4PIbrO79lRJl9HCeLg%2Fuploads%2Fgit-blob-0c94951b13fe97cc785df006ec254813bc75ebaf%2Fimage-20221011174211495.png?alt=media) | ![image-20221011174229883](https://6941759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmV4PIbrO79lRJl9HCeLg%2Fuploads%2Fgit-blob-a23e796637090c785c0e6c8e11fbfd0f76edc681%2Fimage-20221011174229883.png?alt=media) |   |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | - |
|                                                                                                                                                                                                                                            |                                                                                                                                                                                                                                            |   |

![image-20221011174254482](https://6941759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmV4PIbrO79lRJl9HCeLg%2Fuploads%2Fgit-blob-3b3f2b965c32294fc98d84084d7af32707936481%2Fimage-20221011174254482.png?alt=media)

## 四、相关链接

* [商品库SDK](#/live/solution/function_state/interact_commodity)

希望以上信息对您有所帮助，如需进一步了解或有任何疑问，请随时联系我们的客服团队。感谢您的使用！
