change(fieldId: string, value: Record<string, string> | string | null): Promise<Record<string, string[]> | undefined>¶
The change method allows to change a value of a given additional field in a basket. It is recommended to use this method while updating a value of an additional field control because of convenient validation provided by getSectionValidation and selectSectionValidation methods.
Input parameters¶
fieldId¶
fieldId is a mandatory parameter of the string type that represents the id of a field that we want to change the value for.
value¶
value is a mandatory parameter of the Record<string, string> | string | null type which represents a new value of a control. It can vary based on the control type, eg. file control will accept a different type of value than input. It is also presented in the examples below.
Returned value¶
A returned value has a type of Promise<Record<string, string[]> | undefined> with the field ids as keys and their potential errors and messages they may have occurred during the change process as their values.
Example¶
In this example we make a basketAdditionalFieldsApi call to change the value of a given input 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 inputControlId = 12;
const newInputValue = 'new value';
await basketAdditionalFieldsApi.change(inputControlId, newInputValue);
});
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 change the value of a given file additional field in a basket. The values of file key and file name usually get taken from the TFileUploadResponse object which can be acquired from the upload method.
useStorefront(async (storefront) => {
let basketAdditionalFieldsApi = storefront.getApiSync('basketAdditionalFieldsApi');
if (!basketAdditionalFieldsApi) {
const featureSystemApi = this.getApiSync('FeatureSystemApi');
await featureSystemApi.registerDynamic('basket');
basketAdditionalFieldsApi = storefront.getApiSync('basketAdditionalFieldsApi');
}
const fileControlId = 12;
const additionalFields = basketAdditionalFieldsApi.get();
const fileAdditionalField = additionalFields.find((additionalField) => additionalField.fileKey && additionalField.fileName);
const exampleFile = new File([], 'test.jpg');
const fileUploadStatus = await this._basketAdditionalFieldsApi.upload(fileAdditionalField.actions.upload, exampleFile);
if (fileUploadStatus && fileUploadStatus.isError === false) {
await this._basketAdditionalFieldsApi.change(fileAdditionalField.id, {
fileKey: fileUploadStatus.fileKey,
fileName: file.name
});
}
});