概述
Events 在某些 Shoplazza 资源完成特定操作时触发,例如查看商品详情页、搜索商品等。
dj.viewContent
dj.viewContent 可以通过以下 API 请求触发:
document.addEventListener('dj.viewContent', (e) => {
const data = e.detail;
});
{
"product": {
"id": "76f869df-8a64-41be-9aa9-ae1a4f411d13",
"title": "Cargo Culotte",
"vendor": "Nero",
"vendor_url": "",
"has_only_default_variant": false,
"requires_shipping": true,
"taxable": false,
"inventory_policy": "deny",
"inventory_quantity": 540,
"inventory_tracking": true,
"published": true,
"handle": "cargo-culotte",
"spu": "",
"note": "",
"need_variant_image": false,
"fake_sales": 0,
"display_fake_sales": false,
"independent_seo": false,
"updated_at": "2023-07-04T08:24:43Z",
"created_at": "2022-02-10T02:26:24Z",
"mixed_wholesale": false,
"product_type": "",
"tags": "Color_DarkGray,Color_Steelblue,flash_sale_2020-1-30,Location_Delaware,Price_$200-$300",
"available": true,
"price_min": "308.75",
"price": "308.75",
"price_max": "325",
"compare_at_price_min": "0",
"compare_at_price": "0",
"compare_at_price_max": "325",
"retail_price_min": "0",
"retail_price_max": "325",
"url": "/products/cargo-culotte",
"published_at": "2022-02-10T02:26:24Z",
"sales": 0,
"image": {
"src": "//cdn.shoplazza.com/166bd51166b36de0c799484765d9bd44.jpeg",
"path": "166bd51166b36de0c799484765d9bd44.jpeg",
"width": 1280,
"height": 1710,
"alt": "Cargo Culotte Nero Spring",
"aspect_ratio": 0.7485380116959064
},
"options": [
{
"id": "1b4f1215-9584-4a03-993e-09eb47753555",
"name": "Color",
"position": 1,
"values": [
"CadetBlue"
]
},
{
"id": "e971016b-9325-47d2-b2c2-e8b2f0c46f35",
"name": "Size",
"position": 2,
"values": [
"23",
"24",
"25",
"26",
"27",
"28",
"29",
"30"
]
}
],
"variants": [
{
"id": "e5af71c4-6d59-46f4-858a-4e4b89775ee7",
"product_id": "76f869df-8a64-41be-9aa9-ae1a4f411d13",
"title": "CadetBlue-23",
"weight_unit": "kg",
"inventory_quantity": 90,
"sku": "W29472834-1",
"barcode": "",
"position": 1,
"option1": "CadetBlue",
"option2": "23",
"option3": "",
"note": "",
"image": null,
"wholesale_price": [
{
"price": 308.75,
"min_quantity": 1
}
],
"weight": "0",
"compare_at_price": "325",
"price": "308.75",
"retail_price": "325",
"available": true,
"url": "/products/cargo-culotte?variant=e5af71c4-6d59-46f4-858a-4e4b89775ee7",
"available_quantity": 90,
"options": [
{
"name": "Color",
"value": "CadetBlue"
},
{
"name": "Size",
"value": "23"
}
],
"off_ratio": "5",
"flashsale_info": {
"variant_id": "e5af71c4-6d59-46f4-858a-4e4b89775ee7",
"product_id": "",
"quantity": 0,
"discount_id": "65c00d9b-060c-4206-a2d8-f2971cacee43",
"limit_time": -1,
"limit_buy": -1,
"user_limit_buy": -1,
"discount_sales": 0,
"discount_sales_rate": "0",
"discount_stock": 90,
"ends_at": -1,
"starts_at": 1682405275,
"allow_oversold": "uncheck",
"allocation_method": "none",
"price": "308.75",
"compare_at_price": "325",
"discount_price": "308.75",
"customary_saved_price": "16.25",
"customary_off_ratio": "5",
"discount_saved_price": "16.25",
"discount_off_ratio": "5",
"use_before_price": false,
"before_price": "0",
"title": "",
"trunk_price": "0",
"total_price": "0",
"inventory_tracking": false,
"inventory_policy": "",
"inventory_quantity": 0,
"discount_applications": null,
"properties": ""
},
"sales": 0
}
],
"images": [
{
"src": "//cdn.shoplazza.com/166bd51166b36de0c799484765d9bd44.jpeg",
"path": "166bd51166b36de0c799484765d9bd44.jpeg",
"width": 1280,
"height": 1710,
"alt": "Cargo Culotte Nero Spring",
"aspect_ratio": 0.7485380116959064
}
],
"redirect": false,
"redirect_url": "",
"retail_price": "0",
"price_varies": false,
"off_ratio": "5",
"flashsale_info": {}
},
"selected": {
"id": "e5af71c4-6d59-46f4-858a-4e4b89775ee7",
"product_id": "76f869df-8a64-41be-9aa9-ae1a4f411d13",
"title": "CadetBlue-23",
"price": "308.75",
"available": true
},
"qty": 1,
"source": "pageview"
}
dj.productSearch
dj.productSearch 可以通过以下 API 请求触发:
document.addEventListener('dj.productSearch', (e) => {
const data = e.detail;
});
{
"keyWord": "sn",
"total": 6,
"hasResult": true,
"source": "api"
}
dj.addToCart
dj.addToCart 可以通过以下 API 请求触发:
- The /{locale}/api/cart
- The /{locale}/api/cart/batch
- The
/api/checkout/order
document.addEventListener('dj.addToCart', (e) => {
const data = e.detail;
});
{
"product_id": "8ef5a239-9e7a-4822-a8ca-f9dcb15d594a",
"variant_id": "dc775bbe-7435-49de-9aec-af2e8fca2f2c",
"variant": {
"option1": "Black",
"option2": "S",
"option3": ""
},
"name": "Snake Print Tee",
"item_price": "115.00",
"quantity": 1,
"number": 1,
"properties": null,
"type": ""
}
dj.cartChange
dj.cartChange 可以通过以下 API 请求触发:
- The /{locale}/api/cart
- The /{locale}/api/cart/batch
- The /{locale}/api/cart/{variant_id}
PATCH /{locale}/api/cart{variant_id}DELETE /{locale}/api/cart/{variant_id}
📘 注意
e.detail中的line_items不一定可用。
document.addEventListener('dj.cartChange', (e) => {
const data = e.detail;
});
{
"line_items": [],
"ineffectives": [],
"discount_applications": [],
"total_discount": "50.00",
"discount_line_item_price": "50.00",
"invalid_msg": "",
"currency": "USD",
"note": "",
"item_count": 8,
"line_price": "2242.50",
"total_price": "2192.50",
"total_weight": 0
}
dj.variantChange
dj.variantChange 可以在以下情况下触发:
- 查看商品详情页
- 查看快速购物弹窗
document.addEventListener('dj.variantChange', (e) => {
const data = e.detail;
});
{
"product": {
"id": "6842d11a-efff-4e0f-beaf-c822ccfad6b8",
"title": "Lace-up Leather Manston Runner"
},
"selected": {
"id": "485cf307-5d8b-44e7-a3a6-52644403a4b4",
"title": "DarkRed-37",
"price": "325",
"available": true
}
}
dj.completeRegistration
dj.completeRegistration 可以通过以下 API 请求触发:
/api/customers/sign_upAPI 请求在注册 template 中成功执行
document.addEventListener('dj.completeRegistration', (e) => {
const data = e.detail;
});
register
dj.login
dj.login 可以通过以下 API 请求触发:
/api/customers/sign_inAPI 请求在登录 template 中成功执行
document.addEventListener('dj.login', (e) => {
const data = e.detail;
});
{
"login_method": "邮箱",
"shop_name": "Spring",
"login_result": true,
"fail_reason": ""
}
dj.logout
dj.logout 可以通过以下 API 请求触发:
/api/customers/sign_outAPI 请求成功执行
document.addEventListener('dj.logout', (e) => {
const data = e.detail;
});
{}
dj.checkoutSubmit
dj.checkoutSubmit 可以通过以下 API 请求触发:
/api/checkout/order
document.addEventListener('dj.checkoutSubmit', (e) => {
const data = e.detail;
});
{}
dj.initiateCheckout
dj.initiateCheckout 在用户进入结账页面时触发。
document.addEventListener('dj.initiateCheckout', (e) => {
// 执行操作...
});
dj.checkoutStepAddress
dj.checkoutStepAddress 在用户完成结账页面三步确认地址的第一步时触发。
document.addEventListener('dj.checkoutStepAddress', (e) => {
// 执行操作...
});
dj.addShippingMethod
dj.addShippingMethod 在用户完成结账页面的物流方案确认时触发。
document.addEventListener('dj.addShippingMethod', (e) => {
// 执行操作...
});
dj.checkoutStepPayment
dj.checkoutStepPayment 在用户完成支付方式选择并开始支付时触发。
document.addEventListener('dj.checkoutStepPayment', (e) => {
// 执行操作...
});
dj.purchase
dj.purchase 在用户完成结账页面的支付时触发。
document.addEventListener('dj.purchase', (e) => {
// 执行操作...
});