Storefront Settings API¶

API used to retrieve data related to the current shop like locales, page settings and skin settings.

classDiagram
direction LR
    class selectSkinSettings["selectSkinSettings$"]
    class selectPageSettings["selectPageSettings$"]
    class selectFrontstoreApiUrl["selectFrontstoreApiUrl$"]
    class selectLocales["selectLocales$"]
    class selectCountries["selectCountries$"]
    class selectCountryById["selectCountryById$"]
    class selectCountryByCode["selectCountryByCode$"]

    StorefrontSettingsAPI --> getSkinSettings
    StorefrontSettingsAPI --> getPageSettings
    StorefrontSettingsAPI --> selectSkinSettings
    StorefrontSettingsAPI --> selectPageSettings
    StorefrontSettingsAPI --> selectFrontstoreApiUrl
    StorefrontSettingsAPI --> getLocales
    StorefrontSettingsAPI --> selectLocales
    StorefrontSettingsAPI --> getCountries
    StorefrontSettingsAPI --> selectCountries
    StorefrontSettingsAPI --> getCountryById
    StorefrontSettingsAPI --> selectCountryById
    StorefrontSettingsAPI --> getCountryByCode
    StorefrontSettingsAPI --> selectCountryByCode

    class StorefrontSettingsAPI {
        getSkinSettings() TSkinSettings
        getPageSettings() Record~string,string~
        selectSkinSettings() Observable~TSkinSettings~
        selectPageSettings() Observable&lt;Record&lt;string,string&gt;&gt;
        selectFrontstoreApiUrl() Observable~string~
        getLocales() TLocaleOptions
        selectLocales() Observable~TLocaleOptions~
        getCountries() Country[]
        selectCountries() Observable~Country[]~
        getCountryById() Country|null
        selectCountryById() Observable~Country|null~
        getCountryByCode() Country|null
        selectCountryByCode() Observable~Country|null~
    }

    link getSkinSettings  "../methods/get-skin-settings/"
    link getPageSettings  "../methods/get-page-settings/"
    link selectSkinSettings  "../methods/select-skin-settings/"
    link selectPageSettings  "../methods/select-page-settings/"
    link selectFrontstoreApiUrl  "../methods/select-frontstore-api-url/"
    link getLocales  "../methods/get-locales/"
    link selectLocales  "../methods/select-locales/"
    link getCountries  "../methods/get-countries/"
    link selectCountries  "../methods/select-countries/"
    link getCountryById  "../methods/get-country-by-id/"
    link selectCountryById  "../methods/select-country-by-id/"
    link getCountryByCode  "../methods/get-country-by-code/"
    link selectCountryByCode  "../methods/select-country-by-code/"

Get API¶

To get the Storefront Settings API use its name StorefrontSettingsApi with the getApiSync method.

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

Methods¶

getSkinSettings - Get the skin settings
getPageSettings - Get the page settings
selectSkinSettings$ - Get an observable with the skin settings
selectPageSettings$ - Get an observable with the page settings
selectFrontstoreApiUrl$ - Get an observable with the url to the frontstore API
getLocales - Get the locales currently used in a shop
selectLocales$ - Get an observable with the locales currently used in a shop
getCountries - Get a list of countries supported in the shop
selectCountries$ - Get an observable with the list of countries supported in the shop
getCountryById - Get country details by id
selectCountryById$ - Get an observable with the country details by id
getCountryByCode - Get country details by code
selectCountryByCode$ - Get an observable with the country details by code

Example¶

In this example we make a StorefrontSettingsApi call to retrieve settings of a currently active skin.

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

        const skinSettings = storefrontSettingsApi.getSkinSettings();

        if (skinSettings.isBuyingEnabledToUnregistered) {
            // do something
        }
    });

Example¶

In this example we make a StorefrontSettingsApi call to retrieve the locales currently used in a shop.

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

        const locales = storefrontSettingsApi.getLocales();

        console.log('code of the current currency used in the shop', locales.currency);
    });

Example¶

In this example we make a StorefrontSettingsApi call to get the observable with the countries currently supported in a shop.

    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);
            });
        });
    });

Example¶

In this example we make a StorefrontSettingsApi call to get the specific country by its code.

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

        const country = storefrontSettingsApi.getCountryByCode('VN');

        console.log('country with VN code:', country);
    });

Example¶

In this example we make a StorefrontSettingsApi call to get an observable with the base url to the frontstore API.

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

        const frontstoreApiUrl$ = storefrontSettingsApi.selectFrontstoreApiUrl$();

        frontstoreApiUrl$.subscribe((frontstoreApiUrl) => {
            console.log('the base API url:', frontstoreApiUrl);
        });
    });