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 getApi method.

useStorefront(async (storefront) => {
    eventBus.on('basket.initialized', async () => {
        const basketAdditionalFieldsApi = await getApi('basketAdditionalFieldsApi');
    });
});

This API is not automatically initialized. Unless you initialize it by hand or use a proper event like in the example above, you won't be able to fetch the API. Read more in the Retrieving basket APIs section

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 ({ eventBus, getApi }) => {
    eventBus.on('basket.initialized', async () => {
        const basketAdditionalFieldsApi = await getApi('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 ({ eventBus, getApi }) => {
    eventBus.on('basket.initialized', async () => {
        const basketAdditionalFieldsApi = await getApi('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 ({ eventBus, getApi }) => {
    eventBus.on('basket.initialized', async () => {
        const basketAdditionalFieldsApi = await getApi('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 ({ eventBus, getApi }) => {
    eventBus.on('basket.initialized', async () => {
        const basketAdditionalFieldsApi = await getApi('basketAdditionalFieldsApi');

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

Objects Reference

Models reference

APIs reference