Skip to content

Address Card

The <address-card> webcomponent is used to render an address card based on given data.

Attributes

Attribute name Type Default Description
address Address null The address object with details to display
country Country null The country of an address to display

Example

HTML
<address-card></address-card>
JS
useStorefront(async (storefront) => {
    let basketAddressesApi = storefront.getApiSync('basketAddressesApi');
    let settingsApi = this.getApiSync('StorefrontSettingsApi');

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

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

    const $addressCard = document.querySelector('address-card');

    this._basketAddressesApi.selectBillingAddress$().subscribe((billingAddress) => {
        if (!billingAddress) return;

        $addressCard.setAttribute('address', JSON.stringify(billingAddress));

        const countryCode = billingAddress.country;
        const countryId = billingAddress.countryId;

        if (countryCode) {
            const billingCountry = settingsApi.getCountryByCode(countryCode);
            $addressCard.setAttribute('country', JSON.stringify(billingCountry));
        }
        if (countryId) {
            const billingCountry = settingsApi.getCountryById(countryId);
            $addressCard.setAttribute('country', JSON.stringify(billingCountry));
        }
    });
});

Webcomponents reference

Styles reference