Skip to content

addShippingInfo(shipping: BasketShipping, template: HTMLTemplateElement | string): void

The addShippingInfo method allows to add shipping information to the given shipping option.

Input parameters

shipping

shipping is a mandatory parameter of the BasketShipping type that represents the shipping we want to add the info for.

template

template is a mandatory parameter of the HTMLTemplateElement | string type that represents the template of the shipping that can later be displayed on the page or an id of the element which will be a template for a later use.

Returned value

A returned value has a type of void as this method returns nothing.

Example

In this example we make a basketShippingsApi call to add shipping information to the first available shipping option.

useStorefront(async (storefront) => {
    let basketShippingsApi = storefront.getApiSync('basketShippingsApi');

    if (!basketShippingsApi) {
        const featureSystemApi = this.getApiSync(FEATURE_SYSTEM_API_NAME);
        await featureSystemApi.registerDynamic('basket');

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

    const basketShippingOptions = basketShippingsApi.get();

    const template = `
        <template>
            <img src="logo-of-the-shipping.png"></img>
            My shipping information
        </template>
    `;

    basketShippingsApi.addShippingInfo(basketShippingOptions[0], template);
});

Example

In this example we integrate a map template inside one of the shipping methods.

To do that we add the integration module that will contain the template for a map.

map-integration

Inside the module's HTML section we insert the <template> with some id which will represent the map container

<template id="map-integration-example">
    <button class="btn btn_primary btn_s">Show a map</button>
</template>

Finally, we add the template as a shipping info for a desired shipping after the basket has been initialized. Of course the code responsible for clicking a button is not presented in this example as it may vary depending on the map.

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

            // finding a desired shipping by its id
            const shipping = basketShippingsApi.get().find((shipping) => shipping.id === 2);

            basketShippingsApi.addShippingInfo(shipping, 'map-integration-example');
        });
    });
});

Basket Address API methods reference

Models reference