Shoper Storefront

https://storefront.developers.shoper.pl
Admin
Shoper Storefront is a template system and module framework for building customizable e-commerce...
Tokens:1,336,632
Snippets:11,413
Trust Score:10
Update:2 days ago
Show doc for...
Tokens:
Raw
### Example: Get product data

Source: https://storefront.developers.shoper.pl/js-api/apis/http-requester-api/http-requester-api/

Example demonstrating how to fetch product data from the storefront using the HTTPRequesterAPI.

```APIDOC
## Example: Get product data

### Description
Fetches product data from the storefront.

### Method
N/A

### Endpoint
N/A

### Parameters
None

### Request Example
```javascript
useStorefront(async (storefront) => {
    const httpRequesterApi = storefront.getApiSync('HTTPRequesterApi');

    const requestOptions = {
        url: 'https://example.com/webapi/front/pl_PL/products/PLN/16',
        method: 'get'
    };

    const fetchItem = httpRequesterApi.fetch(requestOptions);
    const response = await fetchItem.response;
    const product = response.data;
});
```

### Response
#### Success Response
- **product** (unknown) - The product data returned from the API.

#### Response Example
```javascript
const product = response.data;
```
```

--------------------------------

### Example: Using selectAllLocales$ to get all locales

Source: https://storefront.developers.shoper.pl/js-api/apis/storefront-settings-api/methods/select-all-locales/

This example demonstrates how to call selectAllLocales$ from the StorefrontSettingsApi and subscribe to the observable to log each locale's name and code.

```javascript
    useStorefront(async (storefront) => {
        const storefrontSettingsApi = storefront.getApiSync('StorefrontSettingsApi');

        const allLocales$ = storefrontSettingsApi.selectAllLocales$();

        allLocales$.subscribe((allLocales) => {
            allLocales.forEach((locale) => {
                console.log('Locale:', locale.name, 'Code:', locale.locale);
            });
        });
    });
```

--------------------------------

### Retrieve all payment options with basketPaymentsApi.get()

Source: https://storefront.developers.shoper.pl/js-api/apis/basket/apis/basket-payments-api/methods/get/

Use this example to retrieve all available payment options for the basket shipping. It listens for the 'basket.initialized' event, gets the 'basketPaymentsApi', calls get(), and logs the result.

```javascript
useStorefront(async ({ eventBus, getApi }) => {
    eventBus.on('basket.initialized', async () => {
        const basketPaymentsApi = await getApi('basketPaymentsApi');

        const allPaymentOptions = basketPaymentsApi.get();

        console.log('Available payment options:', allPaymentOptions);
    });
});
```

--------------------------------

### loyalty-buy-button usage example

Source: https://storefront.developers.shoper.pl/webcomponents/webcomponents/loyalty/loyalty-buy-button/

Example of using the <loyalty-buy-button> element on a loyalty product card, using ObjectApi methods to get product, basket settings, and shop URLs.

```APIDOC
## Web Component: <loyalty-buy-button>

### Description
The `<loyalty-buy-button>` web component displays a button to add a product to the basket in a loyalty program context. It extends the `buy-button` component. If the user has enough points, the button is shown; otherwise, an insufficient points message is displayed.

### Attributes

| Attribute | Type | Default | Description |
| --- | --- | --- | --- |
| `points-cost` | number | null | The cost of the product in loyalty points. |

All attributes from the `buy-button` component also apply and should be set for proper functionality.

### Example Usage

```twig
{% set product = ObjectApi.getProduct(product_id) %}
{% set basketSettings = ObjectApi.getBasketSettings() %}
{% set shopUrls = ObjectApi.getShopUrls() %}

<loyalty-buy-button
    product-id="{{ product.id }}"
    variant-id="{{ product.variant.id }}"
    is-buyable="{{ product.availability.isAvailable }}"
    {% if basketSettings.redirectToBasketAfterAdding %}
        basket-path="{{ shopUrls.basketUrl }}"
    {% endif %}
    {% if product.options.count > 0 %}
        has-product-variants
    {% endif %}
    {% if not product.isAvailable %}
        hidden
    {% endif %}
    points-cost="{{ product.variant.loyaltyPointsCost.points }}"
>
</loyalty-buy-button>
```

### Related Components
- [buy-button](https://storefront.developers.shoper.pl/webcomponents/webcomponents/buy-button/buy-button/)
```

--------------------------------

### Example: selectLoyaltyPointsExchangePrice$

Source: https://storefront.developers.shoper.pl/js-api/apis/basket/apis/basket-loyalty-api/methods/select-loyalty-points-exchange-price/

This example demonstrates how to call selectLoyaltyPointsExchangePrice$ to get the price of items exchanged in a loyalty program. It first ensures the 'basket' feature is registered, then subscribes to the observable and logs the result.

```javascript
useStorefront(async (storefront) => {
    let basketLoyaltyApi = storefront.getApiSync('basketLoyaltyApi');

    if (!basketLoyaltyApi) {
        const featureSystemApi = storefront.getApiSync('FeatureSystemApi');
        await featureSystemApi.registerDynamic('basket');

        basketLoyaltyApi = storefront.getApiSync('basketLoyaltyApi');
    }

    const loyaltyPointsExchangePrice$ = basketLoyaltyApi.selectLoyaltyPointsExchangePrice$();

    loyaltyPointsExchangePrice$.subscribe((loyaltyPointsExchangePrice) => {
        console.log('The price of items exchanged in a loyalty program: ', loyaltyPointsExchangePrice);
    });
});
```

--------------------------------

### Example: Fetch products from collection with id 1

Source: https://storefront.developers.shoper.pl/js-api/apis/product-fetcher-api/methods/get-products-from-collection/

This example demonstrates how to use the ProductFetcherApi to get products from a collection with id 1. It first attempts to get the ProductFetcherApi asynchronously; if it is not available, it registers the 'ProductFetcher' dynamic feature using the FeatureSystemApi and then retrieves the API again. Finally, it calls getProductsFromCollection(1) and logs the result.

```javascript
useStorefront(async (storefront) => {
    let productFetcherApi = await storefront.getApi('ProductFetcherApi');

    if (!productFetcherApi) {
        const featureSystemApi = storefront.getApiSync('FeatureSystemApi');
        await featureSystemApi.registerDynamic('ProductFetcher');

        productFetcherApi = await storefront.getApi('ProductFetcherApi');
    }

    const products = await productFetcherApi.getProductsFromCollection(1);
    console.log(products);
});
```

--------------------------------

### Example: Using selectCurrencies$ to get and subscribe to currencies

Source: https://storefront.developers.shoper.pl/js-api/apis/storefront-settings-api/methods/select-currencies/

This example demonstrates how to call selectCurrencies$() on the StorefrontSettingsApi and subscribe to the returned observable to log each currency's name, code, and symbol.

```javascript
    useStorefront(async (storefront) => {
        const storefrontSettingsApi = storefront.getApiSync('StorefrontSettingsApi');

        const currencies$ = storefrontSettingsApi.selectCurrencies$();

        currencies$.subscribe((currencies) => {
            currencies.forEach((currency) => {
                console.log('Currency:', currency.name, 'Code:', currency.code, 'Symbol:', currency.symbol);
            });
        });
    });
```

--------------------------------

### Example: Using selectCountryById$ to get a country by id

Source: https://storefront.developers.shoper.pl/js-api/apis/storefront-settings-api/methods/select-country-by-id/

This example shows how to use the selectCountryById$ method from the StorefrontSettingsApi to get an observable of a country by its id. The method returns an Observable<Country | null>, and the example subscribes to it and logs the country's name.

```typescript
    useStorefront(async (storefront) => {
        const storefrontSettingsApi = storefront.getApiSync('StorefrontSettingsApi');

        const country$ = storefrontSettingsApi.selectCountryById$(12);

        country$.subscribe((country) => {
            console.log('name of the retrieved country:', country.name);
        });
    });
```

--------------------------------

### Example: Render a basic video using the video macro

Source: https://storefront.developers.shoper.pl/macros/video/

This example imports the video macro and sets up video settings based on module configuration. It determines the video source, autoplay, controls, muted, loop, and other settings, then renders the video with the macro, passing the source and merged settings including the module instance ID.

```twig
{% from "@macros/video.twig" import video %}

{% set src = moduleConfig.videoType == 'self-hosted' ? moduleConfig.ownVideoLink : moduleConfig.youtubeVideoLink %}
{% set autoplay = moduleConfig.autoplay %}
{% set controls = moduleConfig.videoType == 'self-hosted' ? moduleConfig.vidControls : moduleConfig.controls %}
{% set muted = moduleConfig.vidMuted %}
{% set loop = moduleConfig.vidLoop %} 

{% set locale = ObjectApi.getShopLocale() %}
{% set currentLanguage =  locale.locale|split('_')[0] %}

{% set video_settings = {
    video_type: moduleConfig.videoType,
    posterSrc: moduleConfig.addPosterImage ? moduleConfig.posterImage.paths.original : "",
    videoDescription: moduleConfig.videoDescription,
    autoplay: autoplay == '1',
    controls: controls == '1',
    muted: muted == '1',
    loop: loop == '1',
    aspectRatio: moduleConfig.youtubeAspectRatio|default('16/9'),
    captionTrackLink: moduleConfig.captionTrackLink,
    captionLang: currentLanguage,
    audioDescriptionTrackLink: moduleConfig.audioDescriptionTrackLink,
    audioDescriptionLang: currentLanguage,
    transcriptTrackLink: moduleConfig.transcriptTrackLink
} %} 

{{ video(src, video_settings|merge({ moduleInstanceId: moduleInstance })) }}
```

--------------------------------

### Basic usage example

Source: https://storefront.developers.shoper.pl/macros/product-short-description/

Renders a simple product short description. Imports the macro, fetches the product via ObjectApi.getProduct(), and calls the macro with showLink: true.

```twig
{% from "@macros/product_short_description.twig" import product_short_description %}

{% set product = ObjectApi.getProduct(product_id) %}

{{ product_short_description(product.shortDescription, { hasEditorSettingsAppearance, showLink: true }) }}
```

--------------------------------

### Example: getCurrentBreakpoint

Source: https://storefront.developers.shoper.pl/js-api/apis/resolution-detector-api/resolution-detector-api/

Example of using the ResolutionDetectorApi to get the currently active breakpoint.

```APIDOC
## Example: getCurrentBreakpoint

### Description
In this example we make a `ResolutionDetectorApi` call to get a currently active breakpoint.

### Code Example
```javascript
useStorefront(async (storefront) => {
    const resolutionDetectorApi = storefront.getApiSync('ResolutionDetectorApi');

    const currentBreakpoint = resolutionDetectorApi.getCurrentBreakpoint();

    console.log(`Current breakpoint is ${currentBreakpoint.name} which applies to screens of ${currentBreakpoint.value}px width and below.`);
});
```
```

--------------------------------

### Configuration output example

Source: https://storefront.developers.shoper.pl/sve/elements/infobox/

Example of a configuration output for an Infobox element with type, name, and options including placeholderValues.

```JSON
{
  "type": "infobox",
  "name": "related_settings_infobox",
  "options": {
    "type" : "blank",
    "message" : "## Related settings in the admin panel\n- turning on additional product codes in [product settings](%s)",
    "placeholderValues" : ["\/admin\/configProducts"]
  }
}
```

--------------------------------

### Example: Using selectSum$ to get basket sum

Source: https://storefront.developers.shoper.pl/js-api/apis/basket/apis/basket-products-api/methods/select-sum/

This example shows how to call selectSum$ after the basket is initialized. It retrieves the basketProductsApi and subscribes to the observable to get the sum of all products before discounts.

```javascript
useStorefront(async ({ eventBus, getApi }) => {
    eventBus.on('basket.initialized', async () => {
        const basketProductsApi = await getApi('basketProductsApi');

        const sum$ = basketProductsApi.selectSum$();
    });
});
```

--------------------------------

### Opened modal example

Source: https://storefront.developers.shoper.pl/webcomponents/webcomponents/surfaces/h-modal/

Example of an h-modal that is opened at start using the 'opened' attribute.

```html
<h-modal hidden opened>
    <h-modal-header>
        Simple header
    </h-modal-header>

    <h-modal-body>
        Im opened at start
    </h-modal-body>
</h-modal>
```

--------------------------------

### JSON configuration for module example

Source: https://storefront.developers.shoper.pl/sve/elements/product-selector/

JSON configuration for the module example, defining elements for product selection and description display.

```json
[
  {
    "label": "Product",
    "state": "unfolded",
    "elements": [
      {
        "name": "selectedProductId",
        "type": "productSelector",
        "label": "Select Product"
      },
      {
        "name": "showDescription",
        "type": "checkbox",
        "label": "Show product description"
      }
    ]
  }
]
```

--------------------------------

### Example: Using selectLocales$ to get current shop locales

Source: https://storefront.developers.shoper.pl/js-api/apis/storefront-settings-api/methods/select-locales/

This example demonstrates how to call selectLocales$ on the StorefrontSettingsApi to get an observable of the current shop locales. The observable is subscribed to and logs the currency code from the locales object.

```typescript
    useStorefront(async (storefront) => {
        const storefrontSettingsApi = storefront.getApiSync('StorefrontSettingsApi');

        const locales$ = storefrontSettingsApi.selectLocales$();

        locales$.subscribe((locales) => {
            console.log('code of the current currency used in the shop', locales.currency);
        });
    });
```

--------------------------------

### Retrieve all basket shipping options with basketShippingsApi.get()

Source: https://storefront.developers.shoper.pl/js-api/apis/basket/apis/basket-shippings-api/methods/get/

Use this example to call the `get` method of `basketShippingsApi` after the `basket.initialized` event fires. The method returns a `BasketShipping[]` array.

```javascript
useStorefront(async ({ eventBus, getApi }) => {
    eventBus.on('basket.initialized', async () => {
        const basketShippingsApi = await getApi('basketShippingsApi');

        const basketShippingOptions = basketShippingsApi.get();
    });
});
```

--------------------------------

### Example: Using selectShippingAddress$ to get current shipping address

Source: https://storefront.developers.shoper.pl/js-api/apis/basket/apis/basket-addresses-api/methods/select-shipping-address/

This example demonstrates how to call basketAddressesApi.selectShippingAddress$() after the basket.initialized event to get an Observable of the current shipping address. The subscription receives the address object, which can be used as needed.

```javascript
useStorefront(async ({ eventBus, getApi }) => {
    eventBus.on('basket.initialized', async () => {
        const basketAddressesApi = await getApi('basketAddressesApi');

        const shippingAddress$ = basketAddressesApi.selectShippingAddress$();

        shippingAddress$.subscribe((currentShippingAddress) => {
            // do something with the address
        });
    });
});
```

--------------------------------

### Output for productBundle.product.name

Source: https://storefront.developers.shoper.pl/object-api/objects/products/bundle/

Example output showing the product name as 'Samsung Starter Kit'.

```text
Samsung Starter Kit
```

--------------------------------

### Fetch new products with ProductFetcherApi

Source: https://storefront.developers.shoper.pl/js-api/apis/product-fetcher-api/methods/get-new-products/

Example of using the ProductFetcherApi to get new products. It first attempts to get the API asynchronously; if unavailable, it registers the 'ProductFetcher' feature dynamically via FeatureSystemApi and then retrieves the API again. Finally, it calls getNewProducts() and logs the result.

```javascript
useStorefront(async (storefront) => {
    let productFetcherApi = await storefront.getApi('ProductFetcherApi');

    if (!productFetcherApi) {
        const featureSystemApi = storefront.getApiSync('FeatureSystemApi');
        await featureSystemApi.registerDynamic('ProductFetcher');

        productFetcherApi = await storefront.getApi('ProductFetcherApi');
    }

    const products = await productFetcherApi.getNewProducts();
    console.log(products);
});
```

--------------------------------

### Full example of <basket-summary-basket-footer> with attributes and content

Source: https://storefront.developers.shoper.pl/webcomponents/webcomponents/basket/summary/basket-summary-basket-footer/

Example showing the component with basket-url and url attributes, and a footer with price list, delivery button, and note.

```html
    <basket-summary-basket-footer basket-url="" url="/pl/basket/step2">
        <div class="basket-module__content basket-module__content_secondary">
            <footer class="basket-summary__footer">
                <ul class="price-list">
                    <li class="price-list__item">
                        <span class="price-list__label">Suma</span>
                        <span class="price-list__value price price_m">
                            <span class="p price__value">
                                <strong class="p_l font_semibold price__value_special">
                                    4,24 zł
                                </strong>
                            </span>

                            <br>

                            <span class="p_s color_tertiary">Zawiera VAT</span>
                        </span>
                    </li>
                </ul>

                <p>
                    <a class="btn btn_primary btn_full-width" href="/pl/basket/step2">
                        <h-icon icon-name="icon-truck" css-classes="btn__icon btn__icon_left">
                            <svg class="icon btn__icon btn__icon_left">
                                <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-truck"></use>
                            </svg>
                        </h-icon>

                        Dostawa i płatność
                    </a>
                </p>

                <small>Koszt dostawy w następnym kroku.</small>
            </footer>
        </div>
    </basket-summary-basket-footer>
```

--------------------------------

### Example Usage of price_product_regular

Source: https://storefront.developers.shoper.pl/macros/price-product-regular/

Example showing how to import and use the macro to render a price with a label.

```twig
{% from "@macros/price_product_regular.twig" import price_product_regular %}

{{ price_product_regular('$12.34', 'Price:') }}
```

--------------------------------

### Example: Get current email and conditionally set a new one

Source: https://storefront.developers.shoper.pl/js-api/apis/authentication-api/methods/select-login-email/

This example demonstrates using selectLoginEmail$ to get the current user's email and, if it differs from a target email, calling setLoginEmail to change it. The user must be authorized.

```javascript
useStorefront(async (storefront) => {
    const authenticationApi = await storefront.getApi('AuthenticationApi');

    const emailToSet = 'differentemail@example.com';

    const currentEmail$ = authenticationApi.selectLoginEmail$();

    currentEmail$.subscribe((currentEmail) => {
        if (currentEmail !== emailToSet) {
            authenticationApi.setLoginEmail(emailToSet);
        }
    });
});
```

--------------------------------

### Result: productsCount

Source: https://storefront.developers.shoper.pl/sve/system-configuration/

Example output showing the products count.

```text
Number of products on page: 24
```

--------------------------------

### Example: Using basketTaxesApi.select$()

Source: https://storefront.developers.shoper.pl/js-api/apis/basket/apis/basket-taxes-api/methods/select/

This example shows how to call select$() after the basket.initialized event to get an Observable of taxes for the current basket.

```typescript
useStorefront(async ({ eventBus, getApi }) => {
    eventBus.on('basket.initialized', async () => {
        const basketTaxesApi = await getApi('basketTaxesApi');

        const taxesList$ = basketTaxesApi.select$();
    });
});
```

--------------------------------

### Complete example with form-connector

Source: https://storefront.developers.shoper.pl/webcomponents/webcomponents/blog/blog-article-comment-form/

Shows the recommended structure using a form-connector with submit-strategy="frontApi" and a form posting to /webapi/front/pl_PL/news/88/comments. The module-instance-id attribute is correctly used here.

```html
    <blog-article-comment-form article-id="88" module-instance-id="1">
        <form-connector id="blog-comment-form-connector-1" submit-strategy="frontApi">
            <form id="blog-comment-form-1" action="/webapi/front/pl_PL/news/88/comments" method="post">
                <input type="text" placeholder="name" />
                <input type="text" placeholder="comment" />
                <button>Add comment</button>
            </form>
        </form-connector>
    </blog-article-comment-form>
```

--------------------------------

### get() method example using useStorefront

Source: https://storefront.developers.shoper.pl/js-api/apis/basket/apis/basket-additional-fields-api/methods/get/

Example of calling basketAdditionalFieldsApi.get() after the basket.initialized event to retrieve additional fields in the basket.

```javascript
useStorefront(async ({ eventBus, getApi }) => {
    eventBus.on('basket.initialized', async () => {
        const basketAdditionalFieldsApi = await getApi('basketAdditionalFieldsApi');
        basketAdditionalFieldsApi.get();
    });
});
```

--------------------------------

### Example configuration for productSelector

Source: https://storefront.developers.shoper.pl/sve/elements/product-selector/

Example JSON configuration for a productSelector element with a default value and a validator.

```json
{
  "type" : "productSelector",
  "name" : "product",
  "label" : "Displayed product",
  "isRequired" : false,
  "isHidden" : false,
  "defaultValue" : 12,
  "validators": [
    { "type" : "lessEqThan", "options" : { "max" : 25 } }
  ]
}
```

--------------------------------

### Example: selectCountryByCode$ usage

Source: https://storefront.developers.shoper.pl/js-api/apis/storefront-settings-api/methods/select-country-by-code/

Example of using selectCountryByCode$ to get a country by its code (e.g., 'VN') and subscribe to the observable to log the result.

```javascript
    useStorefront(async (storefront) => {
        const storefrontSettingsApi = storefront.getApiSync('StorefrontSettingsApi');

        const country$ = storefrontSettingsApi.selectCountryByCode$('VN');

        country$.subscribe((country) => {
            console.log('country with VN code:', country);
        });
    });
```

--------------------------------

### Example of module - JSON configuration

Source: https://storefront.developers.shoper.pl/sve/elements/time-picker/

JSON configuration example for a module with a TimePicker element.

```json
[
  {
    "label": "EXAMPLE",
    "state": "unfolded",
    "elements": [
      {
        "name": "time",
        "type": "timePicker",
        "hint": "Select date and time for the event",
        "label": "Event date and time",
        "labelDescription": "Select date and time for the event",
        "isRequired": true,
        "defaultValue": "14:30:00"
      }
    ]
  }
]
```

--------------------------------

### Example: Fetch products from category with ID 1

Source: https://storefront.developers.shoper.pl/js-api/apis/product-fetcher-api/methods/get-products-from-category/

This example demonstrates how to use the ProductFetcherApi to get products from a category. It first tries to get the API asynchronously, and if not available, registers the 'ProductFetcher' feature dynamically before retrying. Then it calls getProductsFromCategory(1) and logs the result.

```javascript
useStorefront(async (storefront) => {
    let productFetcherApi = await storefront.getApi('ProductFetcherApi');

    if (!productFetcherApi) {
        const featureSystemApi = storefront.getApiSync('FeatureSystemApi');
        await featureSystemApi.registerDynamic('ProductFetcher');

        productFetcherApi = await storefront.getApi('ProductFetcherApi');
    }

    const products = await productFetcherApi.getProductsFromCategory(1);
    console.log(products);
});
```

--------------------------------

### Example: Using selectHasPromotionCode$

Source: https://storefront.developers.shoper.pl/js-api/apis/basket/apis/basket-promotions-api/methods/select-has-promotion-code/

This example shows how to call selectHasPromotionCode$ after the basket is initialized. It retrieves the basketPromotionsApi and subscribes to the observable to get the boolean value.

```javascript
useStorefront(async ({ eventBus, getApi }) => {
    eventBus.on('basket.initialized', async () => {
        const basketPromotionsApi = await getApi('basketPromotionsApi');

        const hasPromotionCode$ = basketPromotionsApi.selectHasPromotionCode$();
    });
});
```

--------------------------------

### Example usage

Source: https://storefront.developers.shoper.pl/macros/order-product-info/

Example of importing and using the order_product_info macro in a Twig template.

```twig
{% from "@macros/order_product_info.twig" import order_product_info %}

{{ order_product_info() }}
```

--------------------------------

### Example: Fetching a product variant with getProductVariant

Source: https://storefront.developers.shoper.pl/js-api/apis/product-fetcher-api/methods/get-product-variant/

This example demonstrates how to use the ProductFetcherApi to get a product variant with id 1 and selected options. It first attempts to get the API asynchronously, and if not available, registers the 'ProductFetcher' feature dynamically before retrying. The result is logged to the console.

```javascript
useStorefront(async (storefront) => {
    let productFetcherApi = await storefront.getApi('ProductFetcherApi');

    if (!productFetcherApi) {
        const featureSystemApi = storefront.getApiSync('FeatureSystemApi');
        await featureSystemApi.registerDynamic('ProductFetcher');

        productFetcherApi = await storefront.getApi('ProductFetcherApi');
    }

    const productVariant = await productFetcherApi.getProductVariant(1, { variantOptions: { 25: '1' }});
    console.log(productVariant);
});
```

--------------------------------

### Example: Fetch products of the day with ProductFetcherApi

Source: https://storefront.developers.shoper.pl/js-api/apis/product-fetcher-api/methods/get-products-of-the-day/

Shows how to call getProductsOfTheDay after obtaining the ProductFetcherApi, including dynamic registration if needed. Logs the returned products to the console.

```javascript
useStorefront(async (storefront) => {
    let productFetcherApi = await storefront.getApi('ProductFetcherApi');

    if (!productFetcherApi) {
        const featureSystemApi = storefront.getApiSync('FeatureSystemApi');
        await featureSystemApi.registerDynamic('ProductFetcher');

        productFetcherApi = await storefront.getApi('ProductFetcherApi');
    }

    const products = await productFetcherApi.getProductsOfTheDay();
    console.log(products);
});
```

--------------------------------

### Example: Render file variant options for a product

Source: https://storefront.developers.shoper.pl/macros/file-variant-option/

This example imports the file_variant_option macro, fetches a product via ObjectApi.getProduct(1), and loops through its options. For each option that is a file (option.isFile), it calls the macro with the option, hasPriceModification set to option.isPriceModifier, and formatPriceModification set to option.priceModification.formatGross.

```twig
{% from "@macros/file_variant_option.twig" import file_variant_option %}

{% set product = ObjectApi.getProduct(1) %}

{% for option in product.options %}
    {% if option.isFile %}
        {{ file_variant_option({
            option: option,
            hasPriceModification: option.isPriceModifier,
            formatPriceModification: option.priceModification.formatGross
        }) }}
    {% endif %}
{% endfor %}
```

--------------------------------

### Example: Rendering text variant options from a product

Source: https://storefront.developers.shoper.pl/macros/text-variant-option/

This example imports the macro, fetches a product, and iterates over its options. It sets hasPriceModification and formatPriceModification from the ProductOption object and renders the macro for text options.

```twig
{% from "@macros/text_variant_option.twig" import text_variant_option %}

{% set product = ObjectApi.getProduct(product_id) %}

{% for option in product.options %}
    {% set hasPriceModification = option.isPriceModifier or option.isPercentagePriceModifier %}
    {% set formatPriceModification = option.priceModification.formatGross %}

    {% if option.isText %}
        {{ text_variant_option({
            option: option,
            hasPriceModification: hasPriceModification,
            formatPriceModification: formatPriceModification
        }) }}
    {% endif %}
{% endfor %}
```

--------------------------------

### Example: Using selectCountries$ to get countries

Source: https://storefront.developers.shoper.pl/js-api/apis/storefront-settings-api/methods/select-countries/

This example demonstrates how to call selectCountries$() on the StorefrontSettingsApi and subscribe to the returned observable to log each country's name.

```javascript
    useStorefront(async (storefront) => {
        const storefrontSettingsApi = storefront.getApiSync('StorefrontSettingsApi');

        const countries$ = storefrontSettingsApi.selectCountries$();

        countries$.subscribe((countries) => {
            countries.forEach((country) => {
                console.log('name of the country:', country.name);
            });
        });
    });
```

--------------------------------

### selectSum$() usage example

Source: https://storefront.developers.shoper.pl/js-api/apis/basket/apis/basket-taxes-api/methods/select-sum/

Call basketTaxesApi.selectSum$() after the basket.initialized event to get an Observable of tax prices. The example uses the useStorefront hook to access the API.

```javascript
useStorefront(async ({ eventBus, getApi }) => {
    eventBus.on('basket.initialized', async () => {
        const basketTaxesApi = await getApi('basketTaxesApi');

        const taxPrices$ = basketTaxesApi.selectSum$();
    });
});
```

--------------------------------

### Example: Render button with product id from module configuration

Source: https://storefront.developers.shoper.pl/macros/add-to-favourites-button/

Uses moduleConfig.productId to fetch the product and render the button, demonstrating how to use module configuration.

```twig
{% from "@macros/add_to_favourites_button.twig" import add_to_favourites_button %}

{% set product = ObjectApi.getProduct(moduleConfig.productId) %}

{{ add_to_favourites_button(product) }}
```

--------------------------------

### Header Configuration Example

Source: https://storefront.developers.shoper.pl/sve/elements/header/

Example configuration for a header element with a label 'Mobile devices', an icon, and a child checkbox element. Shows how to set up a header with children.

```json
{
  "type" : "header",
  "name" : "header",
  "label" : "Mobile devices",
  "labelDescription" : "Configuration for mobile devices.",
  "hint": "Decide if you want to display arrows on mobile devices.",
  "isHidden" : false,
  "options": {
    "icon" : "mobile_devices"
  },
  "children": [
    {
      "type": "checkbox",
      "name": "navigation",
      "label": "Enable navigation arrows",
      "defaultValue": 1
    }
  ]
}
```

--------------------------------

### Example: getBasketPositions() usage

Source: https://storefront.developers.shoper.pl/js-api/apis/basket/apis/basket-products-api/methods/get-basket-positions/

Example of using getBasketPositions() to retrieve the number of positions in the basket. It listens for the 'basket.initialized' event, gets the basketProductsApi, and calls getBasketPositions().

```javascript
useStorefront(async ({ eventBus, getApi }) => {
    eventBus.on('basket.initialized', async () => {
        const basketProductsApi = await getApi('basketProductsApi');

        const amountOfProductPositionsInBasket = basketProductsApi.getBasketPositions();
    });
});
```

--------------------------------

### Example: Using selectComment$ to get current comment

Source: https://storefront.developers.shoper.pl/js-api/apis/basket/apis/basket-overall-api/methods/select-comment/

This example shows how to call selectComment$ after the basket is initialized and subscribe to the returned observable to log the current comment.

```javascript
useStorefront(async ({ eventBus, getApi }) => {
    eventBus.on('basket.initialized', async () => {
        const basketOverallApi = await getApi('basketOverallApi');

        const comment$ = basketOverallApi.selectComment$();

        comment$.subscribe((comment) => {
            console.log('current comment: ', comment);
        });
    });
});
```

--------------------------------

### Example usage

Source: https://storefront.developers.shoper.pl/macros/price-product-tile-regular/

Renders a price with a label using the price_product_tile_regular macro.

```twig
{% from "@macros/price_product_tile_regular.twig" import price_product_tile_regular %}

{{ price_product_tile_regular('$12.34', 'Price:') }}
```

--------------------------------

### Example configuration for a text element with hint

Source: https://storefront.developers.shoper.pl/sve/configuration/

Example configuration for a text element, including type, name, label, supportsTranslations, isRequired, and a hint. The hint is a string that describes the alt attribute.

```json
{
  "type": "text",
  "name": "alt",
  "label": "Alternative image description (\"alt\")",
  "supportsTranslations": true,
  "isRequired": true,
  "hint": "Alternative text (\"alt\" attribute) should contain a description of what the graphic presents. This description is read by software for the blind and analyzed when search engines index the page."
}
```

--------------------------------

### setFormControlValue example

Source: https://storefront.developers.shoper.pl/webcomponents/webcomponents/form/management/form-connector/form-connector-api/form-service/methods/set-form-control-value/

Shows how to get the formService from the form connector element and call setFormControlValue to set the value of a form control. The example sets the 'firstname' control to 'Jon'.

```javascript
const formService = document.querySelector('#form-connector-id').formService

formService.setFormControlValue('firstname', 'Jon')
```

--------------------------------

### Example: Iterate over social login providers

Source: https://storefront.developers.shoper.pl/object-api/methods/get-social-login-providers/

This example uses the getSocialLoginProviders() method to fetch the list of providers and then loops through them to display login links. The output shows the generated HTML for Google and Facebook login buttons.

```twig
{% set providers = ObjectApi.getSocialLoginProviders() %}
{% for provider in providers %}
    <a href="{{ provider.url }}" class="btn-{{ provider.name }}">{{ provider.label }}</a>
{% endfor %}
```

```html
<a href="/en_US/login/google" class="btn-google">Log in with Google</a>
<a href="/en_US/login/facebook" class="btn-facebook">Log in with Facebook</a>
```

--------------------------------

### Example configuration for bundles only

Source: https://storefront.developers.shoper.pl/sve/elements/product-selector/

Example JSON configuration for a productSelector element restricted to bundles using the productType option.

```json
{
  "type" : "productSelector",
  "name" : "featuredBundle",
  "label" : "Featured bundle",
  "options" : {
    "productType" : "bundle"
  }
}
```

--------------------------------

### Example: Retrieve available shipping countries

Source: https://storefront.developers.shoper.pl/js-api/apis/basket/apis/basket-shippings-api/methods/get-available-shipping-countries/

This example demonstrates how to use the basketShippingsApi to get the list of available shipping countries. It listens for the 'basket.initialized' event and then calls getAvailableShippingCountries().

```javascript
useStorefront(async ({ eventBus, getApi }) => {
    eventBus.on('basket.initialized', async () => {
        const basketShippingsApi = await getApi('basketShippingsApi');

        const availableShippingCountries = basketShippingsApi.getAvailableShippingCountries();
    });
});
```

--------------------------------

### Example: Using selectSum$ to get basket total sum

Source: https://storefront.developers.shoper.pl/js-api/apis/basket/apis/basket-overall-api/methods/select-sum/

This example shows how to call selectSum$ after the 'basket.initialized' event, subscribe to the observable, and log the formatted gross value.

```javascript
useStorefront(async ({ eventBus, getApi }) => {
    eventBus.on('basket.initialized', async () => {
        const basketOverallApi = await getApi('basketOverallApi');

        const sum$ = basketOverallApi.selectSum$();

        sum$.subscribe((sum) => {
            console.log('current sum:', sum.grossValueFormatted);
        });
    });
});
```

--------------------------------

### Example: Get current billing address with selectBillingAddress$

Source: https://storefront.developers.shoper.pl/js-api/apis/basket/apis/basket-addresses-api/methods/select-billing-address/

This example shows how to call selectBillingAddress$ after the basket.initialized event and subscribe to the returned observable to access the current billing address.

```javascript
useStorefront(async ({ eventBus, getApi }) => {
    eventBus.on('basket.initialized', async () => {
        const basketAddressesApi = await getApi('basketAddressesApi');

        const billingAddress$ = basketAddressesApi.selectBillingAddress$();

        billingAddress$.subscribe((currentBillingAddress) => {
            // do something with the address
        });
    });
});
```

--------------------------------

### Example: Render product availability with ObjectApi.getProduct()

Source: https://storefront.developers.shoper.pl/macros/product-availability/

Imports the product_availability macro from @macros/product_availability.twig, fetches a product using ObjectApi.getProduct(product_id), and renders the availability.

```twig
{% from "@macros/product_availability.twig" import product_availability %}

{% set product = ObjectApi.getProduct(product_id) %}

{{ product_availability(product) }}
```

--------------------------------

### Example: Using fetch to make an HTTP GET request

Source: https://storefront.developers.shoper.pl/js-api/apis/http-requester-api/methods/fetch/

Shows how to call fetch with request options including URL, method, repeat options for retries, and cache options. The returned fetchItem provides a response promise that resolves to the product data.

```javascript
useStorefront(async (storefront) => {
    const httpRequesterApi = storefront.getApiSync('HTTPRequesterApi');

    const requestOptions = {
        url: 'https://example.com/webapi/front/pl_PL/products/PLN/16',
        method: 'get',
        repeatOptions: {
            maxAttempts: 5,
            attemptDelayInMs: 300
        },
        cacheOptions: {
            type: 'memory',
            ttlInMs: 300000
        }
    };

    const fetchItem = httpRequesterApi.fetch(requestOptions);
    const response = await fetchItem.response;
    const product = response.data;
});
```

--------------------------------

### Usage example output

Source: https://storefront.developers.shoper.pl/object-api/objects/links/link-with-attributes/

Example output of the usage example.

```html
<link rel="alternate" href="https://www.shoper.pl" hreflang="pl" />
```

--------------------------------

### Output for iterating over productBundle.items

Source: https://storefront.developers.shoper.pl/object-api/objects/products/bundle/

Example output showing item quantities for the bundle.

```text
Item quantity: 5
Item quantity: 2
```

--------------------------------

### Subscribe to invalid sections with selectInvalidSections$

Source: https://storefront.developers.shoper.pl/js-api/apis/basket/apis/basket-overall-api/methods/select-invalid-sections/

Example of using basketOverallApi.selectInvalidSections$() to get an Observable<TBasketInvalidSections> and subscribe to it, logging each invalid section and its validation error. The example is triggered after the 'basket.initialized' event.

```javascript
useStorefront(async ({ eventBus, getApi }) => {
    eventBus.on('basket.initialized', async () => {
        const basketOverallApi = await getApi('basketOverallApi');

        const invalidSections$ = basketOverallApi.selectInvalidSections$();

        invalidSections$.subscribe((invalidSections) => {
            console.log('currently invalid fields:');

            Object.entries(invalidSections).forEach(([section, validationError]) => {
                if (!validationError) return;

                console.log(`${section}: ${validationError}`);
            });
        });
    });
});
```

--------------------------------

### JSON configuration example

Source: https://storefront.developers.shoper.pl/sve/elements/infobox/

Example of a JSON configuration for a module that includes an Infobox element and a checkbox element.

```JSON
[
  {
    "label": "Full screen view",
    "state": "unfolded",
    "elements": [
      {
        "type": "infobox",
        "name": "infobox",
        "options": {
          "type": "warning",
          "message": "Changes to the settings in this section will not be visible in the live view. To see the changes, save them, click \"Preview\" and click on the photo in the gallery."
        }
      },
      {
        "type": "checkbox",
        "name": "display_photo_description",
        "label": "Display photo description / file name",
        "defaultValue": 1
      }
    ]
  }
]
```

--------------------------------

### differenceShort property

Source: https://storefront.developers.shoper.pl/object-api/objects/datetime/time-difference/

Example showing how to get a short-formatted string representation of the time difference.

```APIDOC
## `differenceShort` property

### Description
Returns a short-formatted string representing the time difference, e.g., `2d`.

### Usage
```twig
{% set event = ObjectApi.getDateTime("2022-09-10 12:30:15") %}
{% set time = ObjectApi.getDateTime("2022-09-12 14:45:45") %}

{% set timeDifference = time.timeDifference(event) %}
{{ timeDifference.differenceShort }}
```

### Output
```
2d
```
```

--------------------------------

### Full configuration example for numbersSyncer

Source: https://storefront.developers.shoper.pl/sve/elements/numbers-syncer/

Full configuration example for the numbersSyncer element, including label, labelDescription, hint, isRequired, isHidden, options with min, max, prefix, postfix, placeholder, and defaultValue with first, second, and isSync.

```json
{
  "type" : "numbersSyncer",
  "name" : "verticalPadding",
  "label" : "Padding",
  "labelDescription" : "Creates space around an element's content.",
  "hint" : {
    "message" : "For more information see [here](%s)",
    "placeholderValues" : ["https:\/\/someUrl.com"]
  },
  "isRequired" : true,
  "isHidden" : false,
  "options" : {
    "firstLabel" : "Top",
    "secondLabel" : "Bottom",
    "min": 0,
    "max": 10,
    "prefix" : "+",
    "postfix" : "px",
    "placeholder" : "10"
  },
  "defaultValue" : {
    "first" : 6,
    "second" : 7,
    "isSync" : false
  }
}
```

--------------------------------

### differenceLong property

Source: https://storefront.developers.shoper.pl/object-api/objects/datetime/time-difference/

Example showing how to get a long-formatted string representation of the time difference.

```APIDOC
## `differenceLong` property

### Description
Returns a long-formatted string representing the time difference, e.g., `2d 2h 15m 30s left`.

### Usage
```twig
{% set event = ObjectApi.getDateTime("2022-09-10 12:30:15") %}
{% set time = ObjectApi.getDateTime("2022-09-12 14:45:45") %}

{% set timeDifference = time.timeDifference(event) %}
{{ timeDifference.differenceLong }}
```

### Output
```
2d 2h 15m 30s left
```
```

--------------------------------

### difference property

Source: https://storefront.developers.shoper.pl/object-api/objects/datetime/time-difference/

Example showing how to get a formatted string representation of the time difference.

```APIDOC
## `difference` property

### Description
Returns a formatted string representing the time difference in the format `Xd Xh Xm Xs` (e.g., `2d 2:15:30`).

### Usage
```twig
{% set event = ObjectApi.getDateTime("2022-09-10 12:30:15") %}
{% set time = ObjectApi.getDateTime("2022-09-12 14:45:45") %}

{% set timeDifference = time.timeDifference(event) %}
{{ timeDifference.difference }}
```

### Output
```
2d 2:15:30
```
```

--------------------------------

### Range Element Configuration Example

Source: https://storefront.developers.shoper.pl/sve/elements/range/

Example configuration for a Range element named 'range_promotions' with label 'Pick range of % promotions', required, not hidden, default value [2, 7], and options min 1, max 15, postfix '%'.

```json
{
  "type" : "range",
  "name" : "range_promotions",
  "label" : "Pick range of % promotions",
  "isRequired" : true,
  "isHidden" : false,
  "defaultValue" : [2, 7],
  "options":
  {
    "min" : 1,
    "max" : 15,
    "postfix" : "%"
  }
}
```

--------------------------------

### startDate property example

Source: https://storefront.developers.shoper.pl/object-api/objects/special-offer/special-offer/

Displays the promotion start date using the startDate property.

```twig
{{ specialOffer.startDate.date }}
```

```text
1 september 2023
```

--------------------------------

### Infobox options example

Source: https://storefront.developers.shoper.pl/sve/elements/infobox/

Shows how to configure the Infobox element with a type, message, and placeholderValues. The message uses Markdown and a placeholder (%s) that is replaced by the value in placeholderValues.

```JSON
{
"options":
    {
      "type" : "blank",
      "message" : "## Related settings in the admin panel\n- turning on additional product codes in [product settings](%s)",
      "placeholderValues" : ["\/admin\/configProducts"]
    }
}
```

--------------------------------

### Full basket-preview markup example

Source: https://storefront.developers.shoper.pl/webcomponents/webcomponents/basket/basket-preview/

Complete markup for the basket-preview component, including a dropdown toggler with icon and value, and a portal with basket products list. This example shows the expected structure for a fully styled basket preview.

```HTML
<basket-preview is-with-value basket-url="/pl/basket" basket-delivery-payment-url="/pl/basket/step2">
    <h-dropdown name="basket-preview" direction="bottom-right">
        <h-dropdown-toggler
            name="basket-preview"
            class="dropdown__toggler"
            tabindex="0"
            role="button"
            aria-expanded="false"
        >
            <div class="labeled-icon">
                <div class="indicator" data-value="1">
                    <h-icon icon-name="icon-basket" css-classes="labeled-icon__icon">
                        <svg class="icon labeled-icon__icon">
                            <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-basket"></use>
                        </svg>
                    </h-icon>
                </div>
                <div class="labeled-icon__signature font_bold">
                    4,99 zł
                </div>
            </div>
        </h-dropdown-toggler>

        <h-portal hidden disabled to="dropdown-portal">
            <h-dropdown-content name="basket-preview" class="dropdown__content" role="menu">
                <div class="basket-preview" role="menuitem">
                    <header class="grid__row">
                        <div class="grid__col grid__col_xs-12 grid__col_sm-grow mb-xs-2">
                            <h2 class="section-title section-title_s">Produkty w koszyku</h2>
                        </div>
                        <div class="grid__col grid__col_xs-12 grid__col_sm-auto">
                            <button class="btn btn_outline btn_xs">
                                <h-icon icon-name="icon-trash" css-classes="btn__icon btn__icon_left">
                                    <svg class="icon btn__icon btn__icon_left">
                                        <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-trash"></use>
                                    </svg>
                                </h-icon>
                                Wyczyść
                            </button>
                        </div>
                    </header>

                    <basket-products-list .mode="basket">
                        <div class="basket-products__list">
                            <div class="basket-product">
                                <div class="basket-product__image">
                                    <a class="basket-product__image-border" href="/link/to/product">
                                        <img src="/link/to/image" alt="/alt/of/image">
                                    </a>
                                </div>
                                <div class="basket-product__wrapper">
                                    <div class="basket-product__content">
                                        <div class="basket-product__info">
                                            <div class="basket-product__name">
                                                <p>
                                                    <a class="basket-product__link" href="/link/to/product">Banany</a>
                                                </p>
                                                <button class="btn btn_ghost btn_xs visible-xs-only">
                                                    <h-icon icon-name="icon-trash" css-classes="btn__icon btn__icon_left">
                                                        <svg class="icon btn__icon btn__icon_left">
```

--------------------------------

### Example usage and rendered output

Source: https://storefront.developers.shoper.pl/webcomponents/webcomponents/basket/billing-address-form/

Shows the `<billing-address-form>` component in source and its rendered HTML output.

```html
<billing-address-form></billing-address-form>
```

```html
    <billing-address-form>
        <reactive-form>
            <form id="form-a42a8a7c-a82f-4ba5-b844-a1c2aae5093c" novalidate>
                <control-connector requiredingroup class="control control_row">
                    <h-control-content class="control__content_auto control__content">
                        <h-control-element class="control__element">
                            <h-radio controlid="firstname1" controlname="isCompany" value="false" class="radio">
                                <h-radio-control class="radio__control">
                                    <input type="radio" class="radio__input" id="firstname1" name="isCompany" value="false">
                                    <label class="radio__label" for="firstname1"></label>
                                </h-radio-control>
                                <h-radio-content class="radio__content">
                                    <label class="label" for="firstname1"><span>Konsument</span></label>
                                </h-radio-content>
                            </h-radio>
                        </h-control-element>
                        <control-errors></control-errors>
                    </h-control-content>
                    <h-control-content class="control__content_auto control__content">
                        <h-control-element class="control__element">
```

--------------------------------

### Basic list description example

Source: https://storefront.developers.shoper.pl/macros/list-description/

Imports the `list_description` macro from `@macros/list_description.twig` and renders it with a simple description string.

```twig
{% from "@macros/list_description.twig" import list_description %}

{{ list_description('Example description') }}
```

--------------------------------

### Basic example

Source: https://storefront.developers.shoper.pl/macros/star-half-filled/

Renders a basic half filled star.

```twig
{% from "@macros/star_half_filled.twig" import star_half_filled %}

{{ star_half_filled() }}
```
Tokens:
Raw