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 ({ eventBus, getApi }) => {
    eventBus.on('basket.initialized', async () => {
        const basketShippingsApi = await getApi('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 ({ 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