[{"value":"Usage","id":"usage","hLevel":2,"level":1},{"value":"Event","id":"event","hLevel":2,"level":1,"children":[{"value":"Standardized events","id":"standardized-events","hLevel":3,"level":2},{"value":"DataReport Reported events","id":"datareport-reported-events","hLevel":3,"level":2}]}]

Online Store 2.0 & 1.0 events

Theme events are mainly used to communicate with the app's JavaScript at specific times in the template page.

In the official theme, it is already built-in.

For third-party theme developers, the best practice is to build themes according to the following guidelines during template development, so as to be compatible with all app.

caution

The theme event is not applicable in OS2.1. Except for the Checkout page, theme events can be used normally on the Checkout page.

Usage

An event bus will be injected into the window.Shopline object, obtained through window.Shopline.event

// Emit event from theme
window.Shopline.event.emit('eventName', 'foo')

Listen in the app

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

Example: Send the currently selected sku information when sku is switched

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

Event

Standardized events

Product::SkuChanged

trigger timing：
When switching SKU & SKU changes

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

Data	Description
`type: 'init' \| 'change'`	Timing to trigger this event, init: initialization, change: user switches sku
`quantity: number`	Number of products selected (default is 1)
`spuSeq: string`	Serial number
`discount: number`	Discount: 10 means 10%
`skuSeq: string`	sku serial number
`price: number`	Sales price (constraint: sales price cannot be less than 0)
`originPrice: number`	Original price (crossed out price) (constraint: crossed out price cannot be less than 0)
`stock: number`	Inventory
`weight: number \| null`	Weight
`weightUnit: string \| null`	Weight units: G-gram, KG-kg, LB-lb, OZ-oz: gram, kilogram, pound, ounce, kilogram ->g,kg,lb,oz,zh_kg
`available: boolean`	Is sku available
`shelves: boolean`	Is sku on the shelf
`skuAttributeIds: object[]`	SKU Attribute ID List
`imageList: stirng[] \| null`	Image Link
`soldOut: boolean`	Sold out or not
`allowOversold: boolean`	Whether overselling is allowed
`imageBeanList: object[]`	SKU Pictures
`id: string`	Description of the location using sku For example: `productDetail` \| `${modalPrefix}${spuSeq}(popup prefix + product)`
`instances: object`	sku selector instance
`instances.productImages`	Product Main Image instance
`instances.buttonGroup`	Button group instance
`instances.skuDataPool`	sku instance
`instances.quantityStepper`	Quantity selector instance

DataReport Reported events

DataReport::ViewContent

Trigger timing：
Triggered when entering product details page or Quick View & Quick Add

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

Dsata	Description
`content_spu_id: string`	spu id
`content_sku_id: string`	sku id
`content_category: string`	Currently null
`currency: string`	Currency Symbols
`value: string`	Price (price displayed according to actual accuracy)
`quantity: number`	Quantity Default is: 1
`price: string`	Price (price displayed according to actual accuracy)

DataReport::AddToCart

Trigger timing:
Click on the add to cart button

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`	Product Category
`content_name`	Product Name
`currency: string`	Currency Symbols
`value: string`	Price (price displayed according to actual accuracy)
`quantity: number`	Number of products purchased
`price: string`	Price (price displayed according to actual accuracy)

DataReport::InitiateCheckout

Trigger timing
After entering the checkout page

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

Data	Description
`contents: {}[]`	Product content array
`currency: string`	Currency Symbols
`value: string`	Total price of the product
`quantity: number`	Total number of products

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

DataReport::CompleteOrder

Trigger timing:
Click the Complete Order button (includes smart PayPal button credit card button)

Data	Description
`contents: {}[]`	Product content array
`currency: string`	Currency Symbols
`value: string`	Total price of the product
`quantity: number`	Total number of products

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

DataReport::Purchase

Trigger timing:
Triggered when the order is completed and payment is successful

Data	Description
`contents: {}[]`	Product content array, example
`content_category: string`	`""`（Currently empty）
`currency: string`	`"TWD"` Currency Symbols
`value: string`	`"10.00"`Total price of the product（quantity * price）
`quantity: number`	`2`Total number of products（quantity * length）

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

example

[
  {
    "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
	}
]