随身购物袋开放组件

更新时间：2017/08/29 访问次数：8447

概述
接入流程
引入官方组件
完整示例
注意

概述

随身购物袋依托手淘端，通过扫一扫链接线上线下，是全渠道业务的重要组成。支持二维码、条形码、商品实物、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

有用(0) 我要提问

淘宝开放平台

全渠道