Feature System API¶

Api name: FeatureSystemApi

This API allows you to manage features - Storefront extensions providing additional functionality.

classDiagram
direction LR
    FeatureSystemAPI --> registerDynamic

    class FeatureSystemAPI {
        registerDynamic(featuresToRegister: string | string[], silentMode?: boolean) Promise~void~
    }

    link registerDynamic "../methods/register-dynamic/"

Get API¶

To get the Feature System API use its name FeatureSystemApi with the getApiSync method.

useStorefront(async (storefront) => {
    const featureSystemApi = storefront.getApiSync('FeatureSystemApi');
});

Features¶

In Storefront, every web component or API is part of a feature, each with its own unique name. The name can match that of a web component or API, but it doesn't have to. We have three forms of feature registration:

static
dynamic
component-specific

Static Features¶

Static features register when the page loads and are available from the very beginning. This API is a part of such feature.

Dynamic Features¶

Dynamic features can be registered either synchronously or asynchronously. This depends on whether they need other features to be registered first. These features are auto-initialized while others require manual initialization. If a dynamic feature is auto-initialized and has an API, you can use the storefront.getApi for asynchronous features or storefront.getApiSync for synchronous features to fetch the API. Otherwise, if the feature does not automatically initialize, it will be necessary to register it manually using this API, as demonstrated in the example below.

Component-Specific Features¶

Component specific features register themselves when a specific webcomponent is present on a page. From that moment, all other elements associated with the feature (APIs, other web components) also become available. There are times when you might need an API that is part of a component-specific feature without placing the webcomponent on a page solely to access the API. n such cases, you can register the feature manually using this API, as demonstrated in the example below.

Methods¶

registerDynamic - register a dynamic feature

Example¶

In this example we make a FeatureSystemApi call to register an array of dynamic features.

useStorefront((storefront) => {
    const featureSystemApi = await storefront.getApiSync('FeatureSystemApi');

    await featureSystemApi.registerDynamic(['Authentication', 'Translations']);
});