# 主题事件

> Shoplazza 主题在店面触发的事件参考，例如 dj.viewContent，含监听代码与每个事件携带的数据结构。

Events 在某些 Shoplazza 资源完成特定操作时触发，例如查看商品详情页、搜索商品等。

## dj.viewContent

`dj.viewContent` 可以通过以下 API 请求触发：

* [/\{locale}/api/products/\{priduct\_id}](/api/products)

```javascript title="监听器"
document.addEventListener('dj.viewContent', (e) => {
  const data = e.detail;
});
```

```json title="数据"
{
  "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 请求触发：

* [/\{locale}/api/search](/docs/theme/references/ajax-api/search#get-localeapisearch)

```javascript title="监听器"
document.addEventListener('dj.productSearch', (e) => {
  const data = e.detail;
});
```

```json title="数据"
{
  "keyWord": "sn",
  "total": 6,
  "hasResult": true,
  "source": "api"
}
```

## dj.addToCart

`dj.addToCart` 可以通过以下 API 请求触发：

* [/\{locale}/api/cart](/docs/theme/references/ajax-api/cart#get-localeapicart)
* [/\{locale}/api/cart/batch](/docs/theme/references/ajax-api/cart#post-localeapicartbatch)
* `/api/checkout/order`

```javascript title="监听器"
document.addEventListener('dj.addToCart', (e) => {
  const data = e.detail;
});
```

```json title="数据"
{
  "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 请求触发：

* [/\{locale}/api/cart](/docs/theme/references/ajax-api/cart#get-localeapicart)
* [/\{locale}/api/cart/batch](/docs/theme/references/ajax-api/cart#post-localeapicartbatch)
* [/\{locale}/api/cart/\{variant\_id}](/docs/theme/references/ajax-api/cart#patch-localeapicartvariant_id)
  * `PATCH /{locale}/api/cart{variant_id}`
  * `DELETE /{locale}/api/cart/{variant_id}`

:::note
`e.detail` 中的 `line_items` 不一定可用。
:::

```javascript title="监听器"
document.addEventListener('dj.cartChange', (e) => {
  const data = e.detail;
});
```

```json title="数据"
{
  "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` 可以在以下情况下触发：

* 查看商品详情页
* 查看快速购物弹窗

```javascript title="监听器"
document.addEventListener('dj.variantChange', (e) => {
  const data = e.detail;
});
```

```json title="数据"
{
  "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_up` API 请求在[注册 template](../../architecture/templates/customers-register) 中成功执行

```javascript title="监听器"
document.addEventListener('dj.completeRegistration', (e) => {
  const data = e.detail;
});
```

```json title="数据"
register
```

## dj.login

`dj.login` 可以通过以下 API 请求触发：

* `/api/customers/sign_in` API 请求在[登录 template](../../architecture/templates/customers-login) 中成功执行

```javascript title="监听器"
document.addEventListener('dj.login', (e) => {
  const data = e.detail;
});
```

```json title="数据"
{
  "login_method": "邮箱",
  "shop_name": "Spring",
  "login_result": true,
  "fail_reason": ""
}
```

## dj.logout

`dj.logout` 可以通过以下 API 请求触发：

* `/api/customers/sign_out` API 请求成功执行

```javascript title="监听器"
document.addEventListener('dj.logout', (e) => {
  const data = e.detail;
});
```

```json title="数据"
{}
```

## dj.checkoutSubmit

`dj.checkoutSubmit` 可以通过以下 API 请求触发：

* `/api/checkout/order`

```javascript title="监听器"
document.addEventListener('dj.checkoutSubmit', (e) => {
  const data = e.detail;
});
```

```json title="数据"
{}
```

## dj.initiateCheckout

`dj.initiateCheckout` 在用户进入结账页面时触发。

```javascript title="监听器"
document.addEventListener('dj.initiateCheckout', (e) => {
  // 执行操作...
});
```

## dj.checkoutStepAddress

`dj.checkoutStepAddress` 在用户完成结账页面三步确认地址的第一步时触发。

```javascript title="监听器"
document.addEventListener('dj.checkoutStepAddress', (e) => {
  // 执行操作...
});
```

## dj.addShippingMethod

`dj.addShippingMethod` 在用户完成结账页面的物流方案确认时触发。

```javascript title="监听器"
document.addEventListener('dj.addShippingMethod', (e) => {
  // 执行操作...
});
```

## dj.checkoutStepPayment

`dj.checkoutStepPayment` 在用户完成支付方式选择并开始支付时触发。

```javascript title="监听器"
document.addEventListener('dj.checkoutStepPayment', (e) => {
  // 执行操作...
});
```

## dj.purchase

`dj.purchase` 在用户完成结账页面的支付时触发。

```javascript title="监听器"
document.addEventListener('dj.purchase', (e) => {
  // 执行操作...
});
```