[{"value":"使用方式","id":"使用方式","hLevel":2,"level":1},{"value":"事件","id":"事件","hLevel":2,"level":1,"children":[{"value":"标准化事件","id":"标准化事件","hLevel":3,"level":2},{"value":"DataReport 上报类事件","id":"datareport-上报类事件","hLevel":3,"level":2}]}]

Online Store 2.0 & 1.0 事件

Online Store 2.0 & 1.0 主题模板事件主要用于模板页面的特定时机或与插件的 JavaScript 之间进行事件通信。官方主题模板已经内置了一些事件。

对于主题模板开发者来说，主题事件应该在特定的时机发出，并在需要的时候监听这些事件并处理。这也为插件开发者提供了针对这些事件处理的通信机制。

在主题模块开发时，可以根据以下指引，将事件内置到主题模板中，并提供对外的事件给到插件开发者监听。

注意

主题事件在 OS 2.1 不适用（结账页面除外，结账页面可正常使用主题事件）

使用方式

在 window.Shopline 对象中会注入一个事件总线，通过 window.Shopline.event获取

// 在模板中发送事件
window.Shopline.event.emit('eventName', 'foo')

在插件中监听

window.Shopline.event.on('eventName', function (payload) {
  ...
})

下面是一个实际的例子，在 sku 切换的时候发送当前选择的 sku 信息

class Sku {
  ...
	change(currentSku) {
  	window.Shopline.event.emit('Product::SkuChange', currentSku)
  }
  ...
}

事件

标准化事件

Product::SkuChanged

触发时机：
切换 SKU & SKU 发生变化时

window.Shopline.event.on('Product::SkuChanged', function (payload) {
  const { data } = payload;
  //do something
})

data	描述
`type: 'init'\|'change'`	触发该事件的时机，init:初始化，change:用户切换sku
`quantity: number`	商品选中数量（默认为1）
`spuSeq: string`	序列号
`discount: number`	优惠折扣：10表示为10%
`skuSeq: string`	sku序列号
`price: number`	销售价（约束：销售价不能小于0）
`originPrice: number`	原价（划线价）（约束：划线价不能小于0）
`stock: number`	库存
`weight: number \| null`	重量
`weightUnit: string \| null`	重量单位：G-克, KG-千克, LB-磅, OZ-盎司：克，千克，磅，盎司，公斤 ->g,kg,lb,oz,zh_kg
`available: boolean`	sku是否可用
`shelves: boolean`	sku是否上架
`skuAttributeIds: object[]`	SKU属性ID列表
`imageList: stirng[] \| null`	图片链接
`soldOut: boolean`	是否售罄
`allowOversold: boolean`	是否允许超卖
`imageBeanList: object[]`	SKU图片
`id: string`	使用sku的位置的描述例如： `productDetail` \| `${modalPrefix}${spuSeq}(弹窗前缀+商品)`
`instances: object`	sku选择器实例
`instances.productImages`	商品主题实例
`instances.buttonGroup`	按钮组实例
`instances.skuDataPool`	sku实例
`instances.quantityStepper`	数量选择器实例

DataReport 上报类事件

DataReport::ViewContent

触发时机：
在进入商品详情页或快速查看 & 快捷加购时触发

window.Shopline.event.on('DataReport::ViewContent', function (payload) {
    const { data } = payload;
    //do something
})

data	描述
`content_spu_id: string`	spu id
`content_sku_id: string`	sku id
`content_category: string`	目前为空
`currency: string`	货币符号
`value: string`	价格（按照实际精度展示的价格）
`quantity: number`	数量默认为：1
`price: string`	价格（按照实际精度展示的价格）

DataReport::AddToCart

触发时机：
点击加购（add to cart）按钮

window.Shopline.event.on('DataReport::AddToCart', function (payload) {
   const { data } = payload;
   //do something
})

data	描述
`content_spu_id: string`	商品spu id
`content_sku_id: string`	商品sku id
`content_category: string`	商品类目
`content_name`	商品名称
`currency: string`	货币符号
`value: string`	价格（按照实际精度展示的价格）
`quantity: number`	商品购买数量
`price: string`	价格（按照实际精度展示的价格）

DataReport::InitiateCheckout

触发时机：
进入结算页后

window.Shopline.event.on('DataReport::InitiateCheckout', function (payload)  {
   const { data } = payload;
   //do something
})

data	描述
`contents: {}[]`	商品内容数组
`currency: string`	货币符号
`value: string`	商品总价
`quantity: number`	商品总数量

const contents: {
	content_spu_id: string;
  content_sku_id: string;
  content_name: string;
  quantity: number;
  price: string;
}[]

DataReport::CompleteOrder

触发时机：
点击完成订单按钮（包含 smart PayPal button 信用卡按钮）

data	描述
`contents: {}[]`	商品内容数组
`currency: string`	货币符号
`value: string`	商品总价
`quantity: number`	商品总数量

const contents: {
	content_spu_id: string;
  content_sku_id: string;
  content_name: string;
  quantity: number;
  price: string;
}[]

DataReport::Purchase

触发时机：
下单完成并且支付成功时

data	描述
`contents: {}[]`	商品内容数组, 示例
`content_category: string`	`""`（目前是空）
`currency: string`	`"TWD"` 货币符号
`value: string`	`"10.00"`商品总价（quantity * price）
`quantity: number`	`2`商品总数量（quantity * length）

const contents: {
	content_spu_id: string;
  content_sku_id: string;
  content_name: string;
  quantity: number;
  price: string;
}[]

示例

[
  {
    "content_spu_id":"16047822502925650484150374",
    "content_sku_id":"18047822502926992661010374",
    "content_name":"⛄⛄North-Pole-Village-Musical-Ornament-With-Light-And-Motion1",
    "quantity":1,
    "price":29.99
	},
  {
    "content_spu_id":"16047822502925650484150375",
    "content_sku_id":"18047822502926992661010375",
    "content_name":"⛄⛄North-Pole-Village-Musical-Ornament-With-Light-And-Motion2",
    "quantity":1,
    "price":29.99
	}
]