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

注意：

• 如果您使用以下事件进行自定义，请务必使用 CSS 隐藏 BOGOS 的默认组件。

• 所有自定义都应在 snippet/freegifts-snippet.liquid 文件内实现

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. 用于自定义赠品滑动栏的事件

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
  // }
})

注意：请务必使用以下 CSS 隐藏 BOGOS 赠品滑动栏的默认组件

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

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

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
  // }
  // }
})

注意：请务必使用以下 CSS 隐藏 BOGOS 赠品图标和赠品缩略图的默认组件

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

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

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[] 
  // }
})

注意：请务必使用以下 CSS 隐藏 BOGOS 今日优惠的默认组件

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

---

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. 用于自定义购物车提示信息的事件

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[] 
  // }
})

注意：请务必使用以下 CSS 隐藏 BOGOS 购物车提示信息的默认组件

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