Customize using events

Note:

• In case you use those events below for customization, please make sure to use CSS to hide BOGOS' default component.

• All customizations should be implemented inside the file 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. Event for customizing the Gift slider

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

Note: Make sure to use the CSS below to hide BOGOS's default component of the Gift slider

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

2. Event for customizing the Gift icon, and Gift thumbnail on product page

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

Note: Make sure to use the CSS below to hide BOGOS's default component of the Gift icon, and Gift thumbnail

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

3. Event for customizing the Today offer

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

Note: Make sure to use the CSS below to hide BOGOS's default component of the Today offer

#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. Event for customizing the Cart message

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

Note: Make sure to use the CSS below to hide BOGOS's default component of the Cart message

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