Basket Products API¶

Feature name: basket

Api name: basketProductsApi

API used to perform actions related to products in a basket like retrieving a list of products currently in a basket, their sum or a number of positions in the basket.

classDiagram
direction LR
    class select["select$"]
    class selectBasketCount["selectBasketCount$"]
    class selectBasketPositions["selectBasketPositions$"]
    class selectSum["selectSum$"]
    class selectDiscountedSum["selectDiscountedSum$"]
    class selectSectionValidation["selectSectionValidation$"]

    BasketProductsAPI --> get
    BasketProductsAPI --> select
    BasketProductsAPI --> remove
    BasketProductsAPI --> update
    BasketProductsAPI --> getBasketCount
    BasketProductsAPI --> selectBasketCount
    BasketProductsAPI --> getBasketPositions
    BasketProductsAPI --> selectBasketPositions
    BasketProductsAPI --> getSum
    BasketProductsAPI --> selectSum
    BasketProductsAPI --> getDiscountedSum
    BasketProductsAPI --> selectDiscountedSum
    BasketProductsAPI --> getSectionValidation
    BasketProductsAPI --> selectSectionValidation

    class BasketProductsAPI {
        get(): ProductBasket[];
        select(): Observable<ProductBasket[]>;
        remove(product: ProductBasket): void;
        update(product: ProductBasket, quantity: number): void;
        getBasketCount(): number;
        selectBasketCount(): Observable<number>;
        getBasketPositions(): number;
        selectBasketPositions(): Observable<number>;
        getSum(): FullPrice;
        selectSum(): Observable<FullPrice>;
        getDiscountedSum(): FullPrice;
        selectDiscountedSum(): Observable<FullPrice>;
        getSectionValidation(): TSectionValidation;
        selectSectionValidation(): Observable<TSectionValidation>;
    }

    link get "../methods/get/"
    link select "../methods/select/"
    link remove "../methods/remove/"
    link update "../methods/update/"
    link getBasketCount "../methods/get-basket-count/"
    link selectBasketCount "../methods/select-basket-count/"
    link getBasketPositions "../methods/get-basket-positions/"
    link selectBasketPositions "../methods/select-basket-positions/"
    link getSum "../methods/get-sum/"
    link selectSum "../methods/select-sum/"
    link getDiscountedSum "../methods/get-discounted-sum/"
    link selectDiscountedSum "../methods/select-discounted-sum/"
    link getSectionValidation "../methods/get-section-validation/"
    link selectSectionValidation "../methods/select-section-validation/"

Get API¶

To get the Basket Products API use its name basketProductsApi with the getApiSync method.

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

This API is not automatically initialized. Unless you initialize it by hand, you won't be able to fetch the API. To do it you can use the registerDynamic method from the Feature System API. Here is an example on how to do it:

useStorefront(async (storefront) => {
    const featureSystemApi = this.getApiSync('FeatureSystemApi');
    await featureSystemApi.registerDynamic('basket');

    const basketProductsApi = storefront.getApiSync('basketProductsApi');
});

Methods¶

get - retrieve a list of items inside the basket
select$ - select a list of items inside the basket
remove - remove an item from the basket
update - update the item quantity in basket
getBasketCount - retrieve a number of items in the basket
selectBasketCount$ - select a number of items in the basket
getBasketPositions - retrieve a number of positions in the basket
selectBasketPositions$ - retrieve a number of positions in the basket
getSum - retrieve a sum of all products in the basket before applying all discounts and promotions
selectSum$ - select a sum of all products in the basket before applying all discounts and promotions
getDiscountedSum - retrieve a sum of all products in the basket after applying all discounts and promotions
selectDiscountedSum$ - retrieve a sum of all products in the basket after applying all discounts and promotions
getSectionValidation - validate a section containing products and check for potential errors
selectSectionValidation$ - select a validation of a section containing products and check for potential errors

Event Bus events¶

This API listens to the following events with the Event Bus:

basket.basketUpdated

Example¶

In this example we make a basketProductsApi call to retrieve a list of items inside the basket.

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

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

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

    const productsInBasket = basketProductsApi.get();
});

Example¶

In this example we make a basketProductsApi call to select a sum of all products in the basket after applying all discounts and promotions.

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

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

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

    const discountedSum$ = this._basketProductsApi.selectDiscountedSum$();
});

Example¶

In this example we make a basketProductsApi call to select a number of positions in the basket.

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

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

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

    const amountOfProductPositionsInBasket$ = this._basketProductsApi.selectBasketPositions$();
});

Example¶

In this example we make a basketProductsApi call to validate a section containing products and check for potential errors.

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

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

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

    const validation = this._basketProductsApi.getSectionValidation();
});

Models reference¶

APIs reference¶

Feature System API