UI集成

我们默认为您的网页实现了一套开箱即用的UI组件，以下是集成方式：

嵌入Moe Search UI代码

<button id="YOUR_TRIGGER_ELEMENT_ID">Search</button>
<script>
(function () {
  window.onMoeSearchShoppingReady = (player) => {
  }
  if (!window.initMoeSearchShopping) {
  window.initMoeSearchShopping = function (item) {
    window.initMoeSearchShopping.queue.push(item)
  }
  window.initMoeSearchShopping.queue = []
    let scriptNode = document.createElement('script')
    scriptNode["src"] = 'https://www.moechat.cn/default/embed.js';
    document.body.appendChild(scriptNode)
  }
  window.initMoeSearchShopping({
    apiKey: '#这里填入apiKey',
    node: document.getElementById('YOUR_TRIGGER_ELEMENT_ID'),
    bubble: true,
    pdp: true
  })
})()
</script>

关键字段说明：

字段	作用	取值说明
apiKey	鉴权	必填，无默认值。从后台管理获取相应的API Key。
node	自定义触发UI界面显示的挂载点	可选，默认为null。取值为你页面上的某个元素，设置后会自动为该元素绑定点击事件click，点击该元素可触发Moe Search UI页面的显示
bubble	控制默认气泡挂载点显示/隐藏/样式	可选，默认显示。当取值为Bool时，仅控制气泡显示/隐藏；当取值为对象时显示，支持传入的css样式属性如下： {position,left,top,right,bottom, width,height,zIndex, backgroundImage,backgroundSize,backgroundColor, backgroundPosition,backgroundRepeat, border,borderRadius, boxSizing,boxShadow, cursor}
pdp	控制是否或根据哪个字段跳转PDP详情页	可选，默认true，跳转到Moe Search UI自带的默认PDP详情页。当取值为Bool时，仅控制是否跳转PDP详情页；当取值为String时，代表的是商品详情的字段名，将根据商品详情取该字段名对应的值（PDP详情页URL地址），若有则跳转；

注意事项：当node为null，bubble为false时，代表无任何触发挂载点，将默认一进入该页面就会拉起UI界面

嵌入Moe Search UI代码​

嵌入Moe Search UI代码