> For the complete documentation index, see [llms.txt](https://docs.bogos.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bogos.io/cn/advanced-customization/advance-customization-for-devs/customize-using-events.md).

# 使用事件（Events）进行自定义

{% hint style="info" %}
注意：

* 如果您使用以下事件进行自定义，请务必使用 CSS 隐藏 BOGOS 的默认组件。
* 所有自定义都应在 snippet/freegifts-snippet.liquid 文件内实现
  {% endhint %}

```typescript
type GiftVariant {
  id: number,
  title: string,
  price: number,
  original_price: number,
  thumbnail: string,
  discount_type: "percentage" | "fixed_amount",
  discount_value: number
}

type GiftProduct {
  id: number,
  title: string,
  handle: string,
  thumbnail: string,
  belongs_to_offer?: string | string[],
  variants: GiftVariant[]
}

type TodayOffer {
  id: string,
  title: string,
  gifts: GiftProduct[]
}

type CartMessage {
  value: string,
  offer_root: string, // offer id
}
```

### 1. 用于自定义赠品滑动栏的事件

```javascript
document.addEventListener("fg-gifts:show-slider", (e) => {
  /* Event for customizing the gift slider */
  // Hidden default 
  // #freegifts-main-popup-container.sca-modal-fg {
  //   display: none !important;
  // }
  console.log("fg-gifts:show-slider", e.detail)
  // Data type of e.detail: {
  // addGiftToCartFunc: async (variantID, quantity, offerId) => void, // function handle add gift to cart by BOGOS
  // gifts: GiftProduct[] // array of gift products to show
  // }
})
```

{% hint style="info" %}
注意：请务必使用以下 CSS 隐藏 BOGOS 赠品滑动栏的默认组件
{% endhint %}

```css
#freegifts-main-popup-container.sca-modal-fg {
  display: none !important;
}
```

### 2. 用于自定义商品页面上赠品图标和赠品缩略图的事件

```javascript
document.addEventListener("fg-gifts:gift-icon", (e) => {
  /* Event for customizing the Gift icon, and Gift thumbnail on product page */
  // Hidden default 
  // #sca-gift-icon, #sca-gift-thumbnail {
  //   display: none !important;
  // }
  console.log("fg-gifts:gift-icon", e.detail)
  // Data type of e.detail: {
  // icon: string, // url gift icon if products has gift
  // gifts: GiftProduct[] // gift can be added when buy that product
  // product: {
  //    handle: string,
  //    variant: number, // variant id selected
  // }
  // }
})
```

{% hint style="info" %}
注意：请务必使用以下 CSS 隐藏 BOGOS 赠品图标和赠品缩略图的默认组件
{% endhint %}

```css
#sca-gift-icon, #sca-gift-thumbnail {
  display: none !important;
}
```

### 3. 用于自定义今日优惠的事件

```javascript
document.addEventListener("fg-today-offer:render", (e) => {
  /* Event for customizing the rendering of Today offer */
  // Hidden default 
  // #sca-fg-today-offer-widget, #sca-fg-today-offer-iframe {
  //   display: none !important;
  // }
  console.log("fg-today-offer:render", e.detail)
  // Data type of e.detail: {
  // todayOffers: TodayOffer[] 
  // }
})
```

{% hint style="info" %}
注意：请务必使用以下 CSS 隐藏 BOGOS 今日优惠的默认组件
{% endhint %}

```css
#sca-fg-today-offer-widget, #sca-fg-today-offer-iframe {
   display: none !important;
}
```

***

```javascript
document.addEventListener("fg-today-offer:success", (e) => {
  /* Event for customizing the Today offer when the state of the offer is changed. E.g. success, not reach,.. */
  console.log("fg-today-offer:success", e.detail)
  // Data type of e.detail: {
  //   idOffersSuccess: number[], // offers id success
  // } 
})
```

### 4. 用于自定义购物车提示信息的事件

```javascript
document.addEventListener("fg-messages:render", (e) => {
  /* Event for customizing the Cart message */
  // Hidden default 
  // #sca-promotion-message-layout {
  //   display: none !important;
  // }
  console.log("fg-messages:render", e.detail)
  // Data type of e.detail: {
  // data: CartMessage[] 
  // }
})
```

{% hint style="info" %}
注意：请务必使用以下 CSS 隐藏 BOGOS 购物车提示信息的默认组件
{% endhint %}

```css
#sca-promotion-message-layout {
  display: none !important;
}
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.bogos.io/cn/advanced-customization/advance-customization-for-devs/customize-using-events.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.