Skip to content

Basket Additional Fields API

Feature name: basket

Api name: basketAdditionalFieldsApi

API used to perform actions related to additional fields of a basket like getting all the available fields, changing their values or validating them.

classDiagram
direction LR
    class select["select$"]
    class selectSectionValidation["selectSectionValidation$"]

    BasketAdditionalFieldsAPI --> get
    BasketAdditionalFieldsAPI --> select
    BasketAdditionalFieldsAPI --> change
    BasketAdditionalFieldsAPI --> upload
    BasketAdditionalFieldsAPI --> getSectionValidation
    BasketAdditionalFieldsAPI --> selectSectionValidation

    class BasketAdditionalFieldsAPI {
        get() TAdditionalFields
        select$() Observable~TAdditionalFields~
        change(fieldId: string, value: Record~string,string~ | string | null) Promise<Record<string,string[]>|undefined>
        upload(action: BasketAction, file: File) boolean
        getSectionValidation() TSectionValidation
        selectSectionValidation$(): Observable~TSectionValidation~
    }

    link get "../methods/get/"
    link select "../methods/select/"
    link change "../methods/change/"
    link upload "../methods/upload/"
    link getSectionValidation "../methods/get-section-validation/"
    link selectSectionValidation "../methods/select-section-validation/"

Get API

To get the Basket Additional Fields API use its name basketAdditionalFieldsApi with the getApiSync method.

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

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 basketAdditionalFieldsAPI = storefront.getApiSync('basketAdditionalFieldsApi');
});

Methods

  • get - get additional fields in a basket
  • select$ - select current additional fields in a basket
  • change - change a current value of a given additional field
  • upload - upload a file into the additional field with the file input
  • getSectionValidation - validate a basket section where additional fields are present
  • selectSectionValidation$ - select a validation of a basket section where additional fields are present

Event Bus events

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

Example

In this example we make a basketAdditionalFieldsApi call to get additional fields in the basket.

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

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

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

    basketAdditionalFieldsApi.get();
});

Example

In this example we make a basketAdditionalFieldsApi call to change the value of a given checkbox additional field in a basket.

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

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

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

    const checkboxControlId = 7;
    const newCheckboxValue = '1';

    await basketAdditionalFieldsApi.change(checkboxControlId, newCheckboxValue);
});

Example

In this example we make a basketAdditionalFieldsApi call to upload a file from a given additional field of a basket.

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

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

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

    const additionalFields = basketAdditionalFieldsApi.get();

    const fileAdditionalField = additionalFields.find((additionalField) => additionalField.fileKey && additionalField.fileName);
    const exampleFile = new File([], 'test.jpg');

    await basketAdditionalFieldsApi.upload(fileAdditionalField.actions.upload, exampleFile);
});

Example

In this example we make a basketAdditionalFieldsApi call to validate the basket section with additional fields.

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

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

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

    const validation = basketAdditionalFieldsApi.getSectionValidation();
});

Objects Reference

Models reference

APIs reference