> 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/de/advanced-customization/advance-customization-for-devs/customize-using-events.md).

# Anpassung mithilfe von Events

{% hint style="info" %}
Hinweis:

* Falls Sie die untenstehenden Events für die Anpassung verwenden, stellen Sie bitte sicher, dass Sie CSS verwenden, um die Standardkomponente von BOGOS auszublenden.
* Alle Anpassungen sollten innerhalb der Datei snippet/freegifts-snippet.liquid implementiert werden
  {% 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. Event zur Anpassung des Geschenk-Sliders

```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" %}
Hinweis: Stellen Sie sicher, dass Sie das untenstehende CSS verwenden, um die Standardkomponente von BOGOS für den Geschenk-Slider auszublenden
{% endhint %}

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

### 2. Event zur Anpassung des Geschenksymbols und der Geschenk-Miniaturansicht auf der Produktseite

```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" %}
Hinweis: Stellen Sie sicher, dass Sie das untenstehende CSS verwenden, um die Standardkomponente von BOGOS für das Geschenksymbol und die Geschenk-Miniaturansicht auszublenden
{% endhint %}

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

### 3. Event zur Anpassung des Heutigen Angebots

```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" %}
Hinweis: Stellen Sie sicher, dass Sie das untenstehende CSS verwenden, um die Standardkomponente von BOGOS für das Heutige Angebot auszublenden
{% 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. Event zur Anpassung der Warenkorbnachricht

```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" %}
Hinweis: Stellen Sie sicher, dass Sie das untenstehende CSS verwenden, um die Standardkomponente von BOGOS für die Warenkorbnachricht auszublenden
{% 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/de/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.