Cart initialization

The cart drop-in component initializer provides options for configuring language definitions and extending the default models with new fields and transformers.

Configuration options

The cart component initializer accepts the following configuration options:

Example

The following code shows an example implementation of the cart initializer configuration:

// Initialize cart
initializeDropin(async () => {
  await initializers.mountImmediately(initialize, {
    langDefinitions,
    models,
  });
})();

Set language definitions

The langDefinitions property registers the cart component dictionary files, which are used for internationalization purposes. These files allow you to provide localized text for different languages in your application.

// Fetch the dictionary files for your application
const en_US = await fetch('/i18n/en_US.json').then((res) => res.json());
const fr_FR = await fetch('/i18n/fr_FR.json').then((res) => res.json());

// Register the component with language definitions
const langDefinitions = {
  default: en_US,
  en_US,
  fr_FR,
};

// Register initializers
initializers.register(api.initialize, {
  langDefinitions,
});

Set models

You can extend the default models in the cart component and provide transformers to process new fields.

The models property is an object that contains the default models that you might want to extend and the transformers to use to transform the data. By default, the cart component initializer only accepts the CartModel.

The following example shows how to extend the default models with new fields and transformers:

// Initialize cart
initializeDropin(async () => {
  await initializers.mountImmediately(initialize, {
    langDefinitions,
    models: {
      CartModel: {
        transformer: (data) => ({
          printedCardIncluded: data?.printed_card_included,
          giftReceiptIncluded: data?.gift_receipt_included,
        }),
      },
    },
  });
})();