注意:以下文档只适用于TOP接口,请谨慎使用!

文档中心 > 全渠道

随身购物袋开放组件

更新时间:2017/08/29 访问次数:5469

概述

随身购物袋依托手淘端,通过扫一扫链接线上线下,是全渠道业务的重要组成。支持二维码、条形码、商品实物、log多种形式。为赋能商家,将随身购物袋扫码链路中的扫码承接页(扫码后呈现的“随身购物袋”页面)开放,让商家在消费者决策和消费链路上有更灵活自主的运营阵地,通过互动游戏、领取线上或线下权益、品牌故事、商品设计理念介绍、加入会员、等各种内容或者权益,来提高顾客转化。

接入流程

流程图

引入官方组件

script 加载

<script src="https://g.alicdn.com/taefed/smg-open-module/0.0.4/smgModule.js"></script>

如何使用

var smgModule = new SmgModule({
   headerComponent: {
        el: document.body,
        method: 'prepend'
   },
   commodityComonent: {
        el: document.body,
        method: 'append'
   },
   onStoreChange: function () {}
});

参数详解

headerComponent

类型:Object
默认值:

{
    el: document.body,
    method: 'prepend'
}

作用:设置头部门店列表组件的插入方式

headerComponent.el

类型:HTMLElement
默认值:document.body
作用:提供一个在页面上已存在的DOM元素作为门店列表组件的挂载目标。

headerComponent.method

类型:String
默认值:prepend
可选项:prepend(在被选元素的开头插入内容)、append(在被选元素的结尾插入内容)
作用:选择插入位置

commodityComonent

类型:Object
默认值:

{
    el: document.body,
    method: 'append'
}

作用:设置主商品展示组件的插入方式

commodityComonent.el

类型:HTMLElement
默认值:document.body
作用:提供一个在页面上已存在的DOM元素作为商品展示组件的挂载目标。

commodityComonent.method

类型:String
默认值:prepend
可选项:prepend(在被选元素的开头插入内容)、append(在被选元素的结尾插入内容)
作用:选择插入位置

onStoreChange

类型:Function
默认值:空函数
作用:切换门店时执行的回调函数

完整示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>随身购物袋</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="format-detection" content="telephone=no, email=no">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
    <script src="https://g.alicdn.com/taefed/smg-open-module/0.0.4/smgModule.js"></script>
    <script>
        var smgModule = new SmgModule({
            headerComponent: {
                el: document.body,
                method: 'prepend'
            },
            commodityComonent: {
                el: document.body,
                method: 'append'
            },
            onStoreChange: function (  data ) {
                console.log(data) // 门店信息
            }
        });
    </script>
</body>
</html>

注意

1、页面务必在手淘环境中加载。
2、引入官方组件的页面url务必传入itemId(主商品id)和sellerId(店铺id)参数。

FAQ

关于此文档暂时还没有FAQ
返回
顶部