` element; style it as needed to match your theme.
### Step 7: Booster
1. **Progressing bar**
Add the following element to where you want to display the progressing bar
```html
/*
offer_id: number; BOGOS booster id
*/
```
Dispatch this element to render the progressing bar
```javascript
typeof document !== "undefined" && document.dispatchEvent(new CustomEvent("bogos:progress-rerender"));
```
> π‘ **Example Available**\
> π [Cart.tsx](https://github.com/krycek-fengdx/bogos-headless-js/blob/be9dcfb7ffb92e7c9108c9c223488152a98e0034/app/components/Cart.tsx#L38)
2. **Today offer**
Add the following element to where you want to display the today offer block
```html
/*
offer_id: number; BOGOS booster id
*/
```
Dispatch this element to render the today offer block and today offer widget
```javascript
typeof document !== "undefined" && document.dispatchEvent(new CustomEvent("bogos:to-widget-render"));
```
> π‘ **Example Available**\
> π [\_index.tsx](https://github.com/krycek-fengdx/bogos-headless-js/blob/be9dcfb7ffb92e7c9108c9c223488152a98e0034/app/routes/_index.tsx#L35)\
> π [Cart.tsx](https://github.com/krycek-fengdx/bogos-headless-js/blob/be9dcfb7ffb92e7c9108c9c223488152a98e0034/app/components/Cart.tsx#L26)
### Step 8: Offer Page
A dedicated landing page that renders a configured booster offer.
Add the following element to where you want to display the offer page.
```html
/*
offer_id: number; BOGOS booster id β REQUIRED
*/
```
Dispatch this element to render the offer page.
```javascript
typeof document !== "undefined" && document.dispatchEvent(new CustomEvent("bogos:offer-page-init"));
```
Note:
* `data-offer-id` is **required** β it must match a booster of type `offer_page`.
* After the page renders, BOGOS dispatches `bogos:offer-page-render` with `detail: { booster }`, which you can listen to for re-rendering your layout:
```typescript
document.addEventListener("bogos:offer-page-render", (e) => {
console.log((e as CustomEvent).detail); // { booster }
});
```
## 3. Other integrations
### 3. 1. Hide gift product (cloned product)
* If you use [products](https://shopify.dev/docs/api/storefront/lastes/queries/products) query, you should add : `query: "tag_not:bogos-gift"`
```graphql
products (
...,
query: "tag_not:bogos-gift"
) {
...
}
```
* For collection and product page, you can import **`checkItemIsGift`** and use returned value to skip gift products or replace to other pages
```typescript
export type ProductObject = {
handle: string;
tags: string[];
variant_id: number;
};
/* item can be product handle */
checkItemIsGift: (item: string | ProductObject) => boolean;
```
> π‘ **Example Available**\
> π [collections.$handle.tsx](https://github.com/krycek-fengdx/bogos-headless-js/blob/f17a2faab77baa85413af3fa3ad36bf28019d97a/app/routes/collections.%24handle.tsx#L107)\
> π [products.$handle.tsx](https://github.com/krycek-fengdx/bogos-headless-js/blob/f17a2faab77baa85413af3fa3ad36bf28019d97a/app/routes/products.%24handle.tsx#L193)
### 3.2. Customize gift popup/slider
* Hide all default gift slider elements, and override with your custom implementation.
```css
#freegifts-main-popup-container, #freegifts-main-page-container {
display: none !important;
}
```
```typescript
type GiftItem = {
id: number;
discount_type: 'percentage' | 'fixed_amount';
discount_value: number;
original_price: number; // Original price - price before discount
price: number; // Discount price - price after discount
title: string;
thumbnail?: string;
};
type GiftProduct = {
id: number;
title: string;
handle: string;
thumbnail?: string;
belongs_to_offer: string;
variants: GiftItem[];
};
document.addEventListener("fg-gifts:show-slider", (e) => {
console.log((e as CustomEvent).detail);
/* render gift slider with detail {
addGiftToCartFunc: (variant_id: number, quantity: number, offer_id: number) => {};
gifts?: GiftProduct[]; // show all gifts
giftsOffer?: { // show gifts by offer
arrGiftShow: GiftProduct[];
}
} */
});
```
### 3.3. Details of additional event listeners
* `fg-gifts:updated`: Event gift is updated in cart
```typescript
document.addEventListener("fg-gifts:updated", (e) => {
/* use this function to re-render cart */
console.log((e as CustomEvent).detail);
});
```
> π‘ **Example Available**\
> π [Layout.tsx](https://github.com/krycek-fengdx/bogos-headless-js/blob/f17a2faab77baa85413af3fa3ad36bf28019d97a/app/components/Layout.tsx#L61)
* `fg-cart:auto-updated`: Event gift auto add
```typescript
document.addEventListener("fg-cart:auto-updated", (e) => {
console.log((e as CustomEvent).detail);
});
```
* `fg-gifts:added`: Fired when a gift is added from the slider. This event will not fire if you customize the gift popup/slider (see section 3.2 above).
```typescript
document.addEventListener("fg-gifts:added", (e) => {
console.log((e as CustomEvent).detail);
});
```
* `fg-gifts:gift-icon`: Show gift icons
* `bogos:message`: Show cart message
## 4. Note
{% hint style="info" %}
For deeper customization, please contact our support team via live chat or email -
{% endhint %}
### 4.1. Publish Gift/Cloned Products
* After creating or editing an offer, ensure that the gift/cloned product is published to your Headless channel (or any channel where you want BOGOS to run).
### 4.2. Some features are not yet available in this version
* Draft-Order API
* Market
* Bundle page button block
* Some Shopify object-based params (if only id provided, BOGOS will fetch the rest).