Adobe Commerce Storefront

https://experienceleague.adobe.com/developer/commerce/storefront/
Admin
Adobe Commerce Storefront combines Edge Delivery Services, Commerce drop-in components, and Content...
Tokens:471,250
Snippets:5,330
Trust Score:10
Update:2 months ago
Show doc for...
Tokens:
Raw
### Clone and install dependencies

Source: https://experienceleague.adobe.com/developer/commerce/storefront/setup/configuration/aem-prerender

Initial setup steps to download the repository and install required Node.js packages.

```bash
git clone https://github.com/adobe-rnd/aem-commerce-prerender.git
cd aem-commerce-prerender
npm install
```

--------------------------------

### Run interactive skills setup

Source: https://experienceleague.adobe.com/developer/commerce/storefront/ai/boilerplate-skills

Initiates the interactive setup process for installing skills in the project root.

```bash
aio commerce extensibility tools-setup
```

--------------------------------

### Verify documentation setup with a prompt

Source: https://experienceleague.adobe.com/developer/commerce/storefront/ai/static-text-files

Use this example prompt to test if your AI agent is correctly referencing the provided documentation context.

```text

1
Using the Storefront documentation, how do I display a **Delivery estimate** message in the Product Details drop-in below the existing **Add to Cart** button?

```

--------------------------------

### Complete drop-in integration example

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/all/quick-start

A full example combining imports, initialization, and rendering within a block decorate function.

```javascript
import { SignIn } from '@dropins/storefront-auth/containers/SignIn.js';
import { render as authRenderer } from '@dropins/storefront-auth/render.js';
import { rootLink } from '../../scripts/commerce.js';
import '../../scripts/initializers/auth.js';

export default async function decorate(block) {
  await authRenderer.render(SignIn, {
    routeForgotPassword: () => rootLink('/customer/forgot-password'),
    routeRedirectOnSignIn: () => rootLink('/customer/account'),
  })(block);
}
```

--------------------------------

### Run non-interactive skills setup

Source: https://experienceleague.adobe.com/developer/commerce/storefront/ai/boilerplate-skills

Automated installation command for CI pipelines using command-line flags to bypass prompts.

```bash
aio commerce extensibility tools-setup \
  --starter-kit aem-boilerplate-commerce \
  --agent Cursor \
  --package-manager npm
```

--------------------------------

### Absolute Path Example

Source: https://experienceleague.adobe.com/developer/commerce/storefront/ai/dropins-mcp

Example of using an absolute path for the command in the configuration file.

```text
/Users/yourname/.nvm/versions/node/v20.11.0/bin/dropins-mcp
```

--------------------------------

### Usage Example

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins-b2b/quote-management/containers/order-summary

Example of how to render the OrderSummary container using the storefront provider.

```APIDOC
import { render as provider } from '@dropins/storefront-quote-management/render.js';
import { OrderSummary } from '@dropins/storefront-quote-management/containers/OrderSummary.js';

await provider.render(OrderSummary, {
  showTotalSaved: true,
  updateLineItems: () => {},
  initialData: {}
})(block);
```

--------------------------------

### Start development server

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/all/creating

Launches the local development environment for testing components.

```bash
npm run dev
```

--------------------------------

### Install project dependencies

Source: https://experienceleague.adobe.com/developer/commerce/storefront/boilerplate/getting-started

Run this command to install all required project dependencies after cloning the repository.

```bash
npm install
```

--------------------------------

### Usage Example

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins-b2b/purchase-order/containers/purchase-order-approval-flow

Example of how to render the PurchaseOrderApprovalFlow container using the provider.

```APIDOC
import { render as provider } from '@dropins/storefront-purchase-order/render.js';
import { PurchaseOrderApprovalFlow } from '@dropins/storefront-purchase-order/containers/PurchaseOrderApprovalFlow.js';

await provider.render(PurchaseOrderApprovalFlow, {
  className: "Example Name",
  withHeader: true,
  withWrapper: true
})(block);
```

--------------------------------

### Install Storefront SDK package

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/all/creating

Command to install the required @adobe-commerce/elsie package.

```bash
npm install @adobe-commerce/elsie
```

--------------------------------

### Usage Example

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins-b2b/quote-management/containers/shipping-address-display

Example of how to render the ShippingAddressDisplay container using the provider.

```APIDOC
import { render as provider } from '@dropins/storefront-quote-management/render.js';
import { ShippingAddressDisplay } from '@dropins/storefront-quote-management/containers/ShippingAddressDisplay.js';

const address = props.quoteData?.shipping_address;
await provider.render(ShippingAddressDisplay, {
  shippingAddress: address,
  loading: false
})(block);
```

--------------------------------

### Install Adobe I/O CLI and Commerce plugin

Source: https://experienceleague.adobe.com/developer/commerce/storefront/ai/boilerplate-skills

Global installation of the Adobe I/O CLI and the required Commerce plugin.

```bash
npm install -g @adobe/aio-cli
aio plugins:install https://github.com/adobe-commerce/aio-cli-plugin-commerce
```

--------------------------------

### Basic Usage

Source: https://experienceleague.adobe.com/developer/commerce/storefront/sdk/components/icon

Example of how to import and use the Icon component in a project.

```APIDOC
import { Icon } from '@adobe-commerce/elsie/components/Icon';

<Icon source="Add" size="24" title="Add Item" />
```

--------------------------------

### Initializer setup

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/all/creating

Imports the initializer for managing component lifecycle and configuration.

```javascript
import { initializers } from '@dropins/tools/initializer.js';
```

--------------------------------

### Configure GraphQL Schema

Source: https://experienceleague.adobe.com/developer/commerce/storefront/sdk/get-started/cli

Configuration examples for different GraphQL backends in the .elsie.js file.

```javascript
// For Adobe Commerce Catalog Service
schema: {
    endpoint: "https://catalog-service-sandbox.adobe.io/graphql",
    headers: {
        "MAGENTO-ENVIRONMENT-ID": "..."
        "MAGENTO-STORE-VIEW-CODE": "..."
        "MAGENTO-WEBSITE-CODE": "..."
        "MAGENTO-STORE-CODE": "..."
        "MAGENTO-CUSTOMER-GROUP": "..."
        "API-KEY": "..."
    }
}
```

```javascript
// For Adobe Mesh API
schema: {
    endpoint: "https://graph.adobe.io/api/.../graphql?api_key=...",
    headers: {
        "some-mesh-specific-header": "mesh-header-value"
    }
}
```

```javascript
// For Adobe Commerce (non-Mesh)
schema: {
    endpoint: "https://commerce-backend-url.test.graphql",
    headers: {}
}
```

--------------------------------

### Initialize Product Discovery with default configuration

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/product-discovery/initialization

Demonstrates the basic initialization pattern using mountImmediately without custom configuration.

```javascript
import { initializers } from '@dropins/tools/initializer.js';
import { initialize } from '@dropins/storefront-product-discovery';

// All configuration options are optional
await initializers.mountImmediately(initialize, {
  langDefinitions: {}, // Uses built-in English strings
  models: {}, // Uses default data models

});
```

--------------------------------

### Run setup wizard

Source: https://experienceleague.adobe.com/developer/commerce/storefront/setup/configuration/aem-prerender

Executes the interactive wizard to generate the .env configuration file.

```bash
npm run setup
```

--------------------------------

### Start local development server

Source: https://experienceleague.adobe.com/developer/commerce/storefront/boilerplate/getting-started

Initiates the local development server to preview storefront changes.

```bash
npm start
```

--------------------------------

### Initialize and Render Quick Order Containers

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins-b2b/quick-order/quick-start

Demonstrates importing necessary dependencies and rendering the QuickOrderItems, QuickOrderMultipleSku, and QuickOrderCsvUpload containers within a block.

```javascript
1
// 1. Import initializers (Quick Order + dependencies: cart, PDP, search)
2
import '../../scripts/initializers/quick-order.js';
3
import '../../scripts/initializers/cart.js';
4
import '../../scripts/initializers/pdp.js';
5
import '../../scripts/initializers/search.js';
6


7
// 2. Import containers, provider, APIs, and commerce helpers
8
import { render as quickOrderProvider } from '@dropins/storefront-quick-order/render.js';
9
import QuickOrderItems from '@dropins/storefront-quick-order/containers/QuickOrderItems.js';
10
import QuickOrderMultipleSku from '@dropins/storefront-quick-order/containers/QuickOrderMultipleSku.js';
11
import QuickOrderCsvUpload from '@dropins/storefront-quick-order/containers/QuickOrderCsvUpload.js';
12
import * as pdpApi from '@dropins/storefront-pdp/api.js';
13
import * as searchApi from '@dropins/storefront-product-discovery/api.js';
14
import * as cartApi from '@dropins/storefront-cart/api.js';
15
import { rootLink } from '../../scripts/commerce.js';
16


17
// 3. Render in your block (for example, commerce-b2b-quick-order)
18
export default async function decorate(block) {
19
  const itemsContainer = block.querySelector('.quick-order-items-container');
20
  const multipleSkuContainer = block.querySelector('.quick-order-multiple-sku-container');
21
  const csvUploadContainer = block.querySelector('.quick-order-csv-upload-container');
22


23
  quickOrderProvider.render(QuickOrderItems, {
24
    getProductsData: pdpApi.getProductsData,
25
    productsSearch: searchApi.search,
26
    searchFilter: [
27
      { attribute: 'categoryPath', eq: '' },
28
      { attribute: 'visibility', in: ['Search', 'Catalog, Search'] },
29
    ],
30
    handleAddToCart: async (values) => {
31
      if (!values.length) return;
32
      try {
33
        await cartApi.addProductsToCart(values);
34
        window.location.href = rootLink('/cart');
35
      } catch (error) {
36
        return error.message || 'Failed to add products to cart.';
37
      }
38
    },
39
    slots: { ProductPrice: (ctx) => { /* ... */ }, ProductOptions: (ctx) => { /* ... */ } },
40
  })(itemsContainer);
41


42
  quickOrderProvider.render(QuickOrderMultipleSku, { className: 'quick-order-multiple-sku' })(multipleSkuContainer);
43
  quickOrderProvider.render(QuickOrderCsvUpload, { className: 'quick-order-csv-upload' })(csvUploadContainer);
44
}
```

--------------------------------

### OrderSummaryLine Usage Example

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/cart/tutorials/order-summary-lines

Example of using the OrderSummaryLine container with mandatory props.

```typescript
1
    <OrderSummaryLine
2
      label={translations.subtotalLabel}
3
      price={subTotal.price}
4
      classSuffixes={['subTotal']}
5
    >
6
      {children}
7
    </OrderSummaryLine>
8
  );
```

--------------------------------

### Install reCAPTCHA SDK

Source: https://experienceleague.adobe.com/developer/commerce/storefront/sdk/reference/recaptcha

Use npm to install the reCAPTCHA package in your project.

```bash
npm i @adobe/reCAPTCHA
```

--------------------------------

### View CLI Help

Source: https://experienceleague.adobe.com/developer/commerce/storefront/sdk/get-started/cli

Displays all available commands for the Drop-In SDK.

```bash
npx elsie --help
```

--------------------------------

### Initialize Wishlist with Default Configuration

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/wishlist/initialization

Demonstrates the basic initialization pattern using default settings.

```javascript
import { initializers } from '@dropins/tools/initializer.js';
import { initialize } from '@dropins/storefront-wishlist';

// All configuration options are optional
await initializers.mountImmediately(initialize, {
  langDefinitions: {}, // Uses built-in English strings
  models: {}, // Uses default data models
  // Drop-in-specific defaults:
  // isGuestWishlistEnabled: undefined // See configuration options below
});
```

--------------------------------

### initialize

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/product-details/initialization

Initializes and mounts the Product Details drop-in component with the specified configuration.

```APIDOC
## initialize(config)

### Description
Configures and mounts the Product Details drop-in component. This method accepts a configuration object to define localization, product scope, and data transformation models.

### Parameters
- **scope** (string) - Optional - The scope value for the product.
- **langDefinitions** (object) - Optional - Maps locale identifiers to dictionaries of key-value pairs for UI text.
- **defaultLocale** (string) - Optional - The default locale used as a fallback.
- **globalLocale** (string) - Optional - The global locale setting.
- **sku** (string) - Optional - The SKU of the product to display.
- **acdl** (boolean) - Optional - Enables or disables Adobe Client Data Layer integration.
- **anchors** (string) - Optional - Anchor configuration for the component.
- **persistURLParams** (boolean) - Optional - Whether to persist URL parameters.
- **preselectFirstOption** (boolean) - Optional - Whether to preselect the first product option.
- **optionsUIDs** (string) - Optional - UIDs for product options.
- **models** (object) - Optional - Configuration for transforming product data models.
```

--------------------------------

### Initialize Requisition List with default configuration

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins-b2b/requisition-list/initialization

Demonstrates the basic initialization pattern using the default configuration settings.

```javascript
import { initializers } from '@dropins/tools/initializer.js';
import { initialize } from '@dropins/storefront-requisition-list';

// All configuration options are optional
await initializers.mountImmediately(initialize, {
  langDefinitions: {}, // Uses built-in English strings
  models: {}, // Uses default data models
});
```

--------------------------------

### Install AEM CLI globally

Source: https://experienceleague.adobe.com/developer/commerce/storefront/boilerplate/getting-started

Optional command to install the AEM CLI globally for access from any directory.

```bash
npm install -g @adobe/aem-cli
```

--------------------------------

### Configure SignUp container with redirects

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/user-auth/containers/sign-up

Example demonstrating how to render the SignUp container with custom redirect logic and email confirmation settings.

```javascript
1
export default async function decorate(block) {
2
  const isAuthenticated = !!getCookie('auth_dropin_user_token');
3

4
  if (isAuthenticated) {
5
    window.location.href = '/customer/account';
6
  } else {
7
    await authRenderer.render(SignUp, {
8
      hideCloseBtnOnEmailConfirmation: true,
9
      routeSignIn: () => '/customer/login',
10
      routeRedirectOnSignIn: () => '/customer/account',
11
    })(block);
12
  }
13
}
```

--------------------------------

### Install Dropins MCP Globally

Source: https://experienceleague.adobe.com/developer/commerce/storefront/ai/dropins-mcp

Install the package globally to ensure the binary is accessible to desktop applications.

```bash
npm install -g @dropins/mcp
```

--------------------------------

### Initialize Recommendations with default configuration

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/recommendations/initialization

Demonstrates the default initialization pattern using mountImmediately without custom overrides.

```javascript
import { initializers } from '@dropins/tools/initializer.js';
import { initialize } from '@dropins/storefront-recommendations';

// All configuration options are optional
await initializers.mountImmediately(initialize, {
  langDefinitions: {}, // Uses built-in English strings
  models: {}, // Uses default data models

});
```

--------------------------------

### Default Fastly Image URL Example

Source: https://experienceleague.adobe.com/developer/commerce/storefront/sdk/reference/initializer

Example of a standard image URL generated with default Fastly-style optimization parameters.

```text
/media/catalog/product/adobestoredata/ADB150.jpg?auto=webp&quality=80&crop=false&fit=cover&width=960&height=1191
```

--------------------------------

### Initialize User Account with default configuration

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/user-account/initialization

Demonstrates the default setup for the User Account drop-in using the mountImmediately initializer.

```javascript
import { initializers } from '@dropins/tools/initializer.js';
import { initialize } from '@dropins/storefront-account';

// All configuration options are optional
await initializers.mountImmediately(initialize, {
  langDefinitions: {}, // Uses built-in English strings
  models: {}, // Uses default data models
  // Drop-in-specific defaults:
  // authHeaderConfig: undefined // See configuration options below
});
```

--------------------------------

### Install AEM Boilerplate Commerce skill set

Source: https://experienceleague.adobe.com/developer/commerce/storefront/ai

Commands to install the Adobe I/O CLI and the commerce extensibility plugin.

```bash
npm install -g @adobe/aio-cli
aio plugins:install https://github.com/adobe-commerce/aio-cli-plugin-commerce
aio commerce extensibility tools-setup
```

--------------------------------

### Initialize Personalization with default configuration

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/personalization/initialization

Demonstrates the default initialization process using mountImmediately when no custom configuration is required.

```javascript
import { initializers } from '@dropins/tools/initializer.js';
import { initialize } from '@dropins/storefront-personalization';

// All configuration options are optional
await initializers.mountImmediately(initialize, {
  langDefinitions: {}, // Uses built-in English strings
  models: {}, // Uses default data models

});
```

--------------------------------

### Clone and enter the storefront repository

Source: https://experienceleague.adobe.com/developer/commerce/storefront/get-started/create-storefront

Use these commands to download the storefront repository to your local machine and navigate into the project directory.

```bash
git clone https://github.com/my-org/my-storefront.git
cd my-storefront
```

--------------------------------

### initialize

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/product-discovery/initialization

Initializes the Product Discovery drop-in with optional configuration for language definitions and data models.

```APIDOC
## initialize(initialize, options)

### Description
Configures and mounts the Product Discovery drop-in. This function is used to set up internationalization strings and custom data transformers.

### Parameters
- **initialize** (Function) - Required - The initialization function imported from @dropins/storefront-product-discovery.
- **options** (Object) - Optional - Configuration object.
  - **langDefinitions** (Object) - Optional - Maps locale keys to custom strings for UI localization.
  - **models** (Object) - Optional - Maps model names (Product, ProductSearchResult) to transformer functions for data modification.

### Request Example
await initializers.mountImmediately(initialize, {
  langDefinitions: {
    default: { 'AddToCart': 'Add to Bag' }
  },
  models: {
    Product: {
      transformer: (data) => ({ customField: data?.custom_field })
    }
  }
});
```

--------------------------------

### Install Storefront Compatibility Package

Source: https://experienceleague.adobe.com/developer/commerce/storefront/setup/configuration/storefront-compatibility/install

Add the package to your project using Composer. Select the version matching your Adobe Commerce installation.

```bash
composer require adobe-commerce/storefront-compatibility:4.7.13
```

```bash
composer require adobe-commerce/storefront-compatibility:4.8.8
```

```bash
composer require adobe-commerce/storefront-compatibility:4.9.0
```

--------------------------------

### Initialize Product Details Drop-in

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/product-details/initialization

Mounts the Product Details drop-in using the initializer tool with required configuration parameters.

```javascript
import { initializers } from '@dropins/tools/initializer.js';
import { initialize } from '@dropins/storefront-pdp';

await initializers.mountImmediately(initialize, {
  scope: 'value',
  langDefinitions: {},
  defaultLocale: 'value',
  globalLocale: 'value',
  sku: 'value',
  acdl: true,
  anchors: 'value',
  persistURLParams: true,
  preselectFirstOption: true,
  optionsUIDs: 'abc123',
  models: {},
});
```

--------------------------------

### Install Adobe Commerce drop-in package

Source: https://experienceleague.adobe.com/developer/commerce/storefront/licensing

Use the npm package manager to install a specific drop-in component from the @dropins scope.

```bash
npm install @dropins/storefront-cart
```

--------------------------------

### Initialize Quick Order with default configuration

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins-b2b/quick-order/initialization

Uses initializeDropin to coordinate the setup process, including setting the GraphQL endpoint and mounting the drop-in with placeholders.

```javascript
import { initializers } from '@dropins/tools/initializer.js';
import { initialize, setEndpoint } from '@dropins/storefront-quick-order/api.js';
import { initializeDropin } from './index.js';
import { CORE_FETCH_GRAPHQL, fetchPlaceholders } from '../commerce.js';

await initializeDropin(async () => {
  setEndpoint(CORE_FETCH_GRAPHQL);
  const labels = await fetchPlaceholders('placeholders/quick-order.json');
  const langDefinitions = {
    default: { ...labels },
  };
  return initializers.mountImmediately(initialize, { langDefinitions });
})();
```

--------------------------------

### Shipping Address Additional Input Example

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins-b2b/quote-management/functions

Example of the additional input object structure for providing extra details like VAT ID or delivery instructions when setting a shipping address.

```javascript
additionalInput: {
  vat_id: 'GB123456789',
  custom_attribute: 'value',
  delivery_instructions: 'Leave at door'
}
```

--------------------------------

### initialize(options)

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/product-details/initialization

Initializes the Product Details drop-in with custom model configurations.

```APIDOC
## initialize(options)

### Description
Initializes the Product Details drop-in. The `models` option allows for extending or transforming data models using custom transformer functions.

### Parameters
- **models** (Object) - Optional - Configuration object for data models.

#### Model Properties
- **initialData** (any) - Optional - Provides initial data for the model before backend data is fetched.
- **transformer** (Function) - Optional - Transforms product data returned from GraphQL. Signature: `(data?: ProductModel) => ProductModel`.
- **fallbackData** (Function) - Optional - Provides fallback data when a simple product variant is selected. Signature: `(parentProduct: any, simpleProduct: ProductModel) => ProductModel`.

### Usage Example
```javascript
import { initializers } from '@dropins/tools/initializer.js';
import { initialize } from '@dropins/storefront-pdp';

const models = {
  ProductModel: {
    transformer: (data) => ({
      ...data,
      customField: data?.custom_field,
      promotionBadge: data?.promotion?.label,
      displayPrice: data?.price?.value ? `${data.price.value}` : 'N/A',
    }),
  },
};

await initializers.mountImmediately(initialize, { models });
```
```

--------------------------------

### initializeWishlist

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/wishlist/functions

Loads the wishlist state when the drop-in starts.

```APIDOC
## initializeWishlist

### Description
The `initializeWishlist` function loads wishlist state when the drop-in starts. Call it during setup so containers receive data before rendering.

### Signature
`const initializeWishlist = async (): Promise<Wishlist | null>`

### Events
- Emits `wishlist/data` and `wishlist/initialized`.

### Returns
- **Wishlist | null** - The initialized wishlist object or null.
```

--------------------------------

### Get Countries

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/cart/functions

Retrieves a list of available countries.

```typescript
const getCountries = async (): Promise<[CountryData]>
```

--------------------------------

### View generated component files

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/all/creating

Example output showing the files created when generating a new component.

```bash
~/composable-login [main] » npx elsie generate component --pathname LoginForm
🆕 src/components/LoginForm/LoginForm.css created
🆕 src/components/LoginForm/LoginForm.stories.tsx created
🆕 src/components/LoginForm/LoginForm.test.tsx created
🆕 src/components/LoginForm/LoginForm.tsx created
🆕 src/components/LoginForm/index.ts created
🆕 src/components/index.ts created
~/composable-login [main] »
```

--------------------------------

### Subscribe to Quote Renaming

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins-b2b/quote-management/events

Example of subscribing to the quote-management/quote-renamed event.

```javascript
1
import { events } from '@dropins/tools/event-bus.js';
2

3
events.on('quote-management/quote-renamed', (payload) => {
4
  console.log('quote-management/quote-renamed event received:', payload);
5
  // Add your custom logic here
6
});
```

--------------------------------

### Initialize PDP with default configuration

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/product-details/initialization

Demonstrates the default initialization state when no custom configuration is provided.

```javascript
import { initializers } from '@dropins/tools/initializer.js';
import { initialize } from '@dropins/storefront-pdp';

// All configuration options are optional
await initializers.mountImmediately(initialize, {
  langDefinitions: {}, // Uses built-in English strings
  models: {}, // Uses default data models
  // Drop-in-specific defaults:
  // scope: undefined // See configuration options below
  // defaultLocale: undefined // See configuration options below
  // globalLocale: undefined // See configuration options below
  // sku: undefined // See configuration options below
  // acdl: undefined // See configuration options below
  // anchors: undefined // See configuration options below
  // persistURLParams: undefined // See configuration options below
  // preselectFirstOption: undefined // See configuration options below
  // optionsUIDs: undefined // See configuration options below
});
```

--------------------------------

### Subscribe to Quote Duplication

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins-b2b/quote-management/events

Example of subscribing to the quote-management/quote-duplicated event.

```javascript
1
import { events } from '@dropins/tools/event-bus.js';
2

3
events.on('quote-management/quote-duplicated', (payload) => {
4
  console.log('quote-management/quote-duplicated event received:', payload);
5
  // Add your custom logic here
6
});
```

--------------------------------

### Subscribe to Quote Initialization

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins-b2b/quote-management/events

Example of subscribing to the quote-management/quote-data/initialized event.

```javascript
1
import { events } from '@dropins/tools/event-bus.js';
2

3
events.on('quote-management/quote-data/initialized', (payload) => {
4
  console.log('quote-management/quote-data/initialized event received:', payload);
5
  // Add your custom logic here
6
});
```

--------------------------------

### initialize(options)

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins-b2b/quick-order/initialization

Initializes the Quick Order drop-in with configuration options including language definitions and feature flag overrides.

```APIDOC
## initialize(options)

### Description
Initializes the Quick Order drop-in. This function is used to set up the environment, including language definitions and feature flag overrides.

### Parameters
- **options** (Object) - Required
  - **langDefinitions** (LangDefinitions) - Optional - Language definitions for internationalization (i18n). Used to override dictionary keys for localization or branding.
  - **quickOrderActive** (boolean) - Optional - Override for the Quick Order feature flag. When false, containers show a disabled overlay. Defaults to the value from storeConfig.quickorder_active.

### Example
```javascript
import { initialize } from '@dropins/storefront-quick-order/api.js';

const langDefinitions = {
  default: {
    QuickOrder: {
      QuickOrderItem: {
        addAllToCart: 'Add All to Cart',
        emptyList: 'No products in the list',
      },
    },
  },
};

initialize({ langDefinitions, quickOrderActive: true });
```
```

--------------------------------

### Initialize Order drop-in with default configuration

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/order/initialization

Demonstrates the default setup for the Order drop-in using the mountImmediately initializer.

```javascript
import { initializers } from '@dropins/tools/initializer.js';
import { initialize } from '@dropins/storefront-order';

// All configuration options are optional
await initializers.mountImmediately(initialize, {
  langDefinitions: {}, // Uses built-in English strings
  models: {}, // Uses default data models
  // Drop-in-specific defaults:
  // orderRef: undefined // See configuration options below
  // returnRef: undefined // See configuration options below
  // orderData: undefined // See configuration options below
  // routeOrdersList: undefined // See configuration options below
});
```

--------------------------------

### Subscribe to Quantities Updated

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins-b2b/quote-management/events

Example of subscribing to the quantities-updated event.

```javascript
import { events } from '@dropins/tools/event-bus.js';

events.on('quote-management/quantities-updated', (payload) => {
  console.log('quote-management/quantities-updated event received:', payload);
  // Add your custom logic here
});
```

--------------------------------

### Subscribe to Permissions Event

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins-b2b/quote-management/events

Example of subscribing to the permissions event.

```javascript
import { events } from '@dropins/tools/event-bus.js';

events.on('quote-management/permissions', (payload) => {
  console.log('quote-management/permissions event received:', payload);
  // Add your custom logic here
});
```

--------------------------------

### Usage Example for getCustomerCompanyInfo

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins-b2b/company-switcher/functions

Demonstrates how to import and use the function to retrieve and log company context.

```javascript
import { getCustomerCompanyInfo } from '@dropins/storefront-company-switcher/api.js';

// Get current company context
const info = await getCustomerCompanyInfo();
console.log('Active company:', info.currentCompany.companyName);
console.log('Company ID:', info.currentCompany.companyId);
console.log('Available companies:', info.customerCompanies.length);

// Use context to load company-specific data
if (info.currentCompany.companyId) {
  loadCompanyData(info.currentCompany.companyId);
}
```

--------------------------------

### Get GroupHeaderManager Instance

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins-b2b/company-switcher/functions

Retrieves the singleton instance of the GroupHeaderManager.

```typescript
function getGroupHeaderManager(): any
```

--------------------------------

### Initialize with Organized Dictionary

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/all/dictionaries

Use a specific drop-in dictionary file to configure the drop-in instance.

```javascript
1
import { initializers } from '@dropins/tools/initializer.js';
2
import { initialize } from '@dropins/storefront-cart/api.js';
3
import { cartDictionary } from '../config/dictionaries/cart.js';
4

5
const langDefinitions = {
6
  default: {
7
    ...cartDictionary,
8
  },
9
};
10

11
await initializers.mountImmediately(initialize, { langDefinitions });
```

--------------------------------

### Basic Usage

Source: https://experienceleague.adobe.com/developer/commerce/storefront/sdk/components/accordion

Example of how to implement a basic Accordion with a single section.

```APIDOC
import { Accordion, AccordionSection } from '@adobe-commerce/elsie/components/Accordion';

<Accordion>
   <AccordionSection title={"Title"}>
     <p>Short product details should be kept to 6 lines maximum.</p>
   </AccordionSection>
</Accordion>
```

--------------------------------

### Subscribe to Quote Template Data

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins-b2b/quote-management/events

Example of subscribing to the quote-management/quote-template-data event.

```javascript
1
import { events } from '@dropins/tools/event-bus.js';
2

3
events.on('quote-management/quote-template-data', (payload) => {
4
  console.log('quote-management/quote-template-data event received:', payload);
5
  // Add your custom logic here
6
});
```

--------------------------------

### Initialize Payment Services with default configuration

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/payment-services/initialization

Demonstrates the default initialization pattern using the mountImmediately method. All configuration options are optional and default to undefined if not provided.

```javascript
import { initializers } from '@dropins/tools/initializer.js';
import { initialize } from '@dropins/storefront-payment-services';

// All configuration options are optional
await initializers.mountImmediately(initialize, {
  langDefinitions: {}, // Uses built-in English strings
  // Drop-in-specific defaults:
  // apiUrl: undefined // See configuration options above
  // getCustomerToken: undefined // See configuration options above
  // storeViewCode: undefined // See configuration options above
});
```

--------------------------------

### Subscribe to Quote Review Submission

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins-b2b/quote-management/events

Example of subscribing to the quote-management/quote-sent-for-review event.

```javascript
1
import { events } from '@dropins/tools/event-bus.js';
2

3
events.on('quote-management/quote-sent-for-review', (payload) => {
4
  console.log('quote-management/quote-sent-for-review event received:', payload);
5
  // Add your custom logic here
6
});
```

--------------------------------

### Initialize Company Switcher with default configuration

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins-b2b/company-switcher/initialization

Demonstrates the default initialization process using the mountImmediately method. All configuration options are optional and will fall back to internal defaults if omitted.

```javascript
import { initializers } from '@dropins/tools/initializer.js';
import { initialize } from '@dropins/storefront-company-switcher';

// All configuration options are optional
await initializers.mountImmediately(initialize, {
  langDefinitions: {}, // Uses built-in English strings
  models: {}, // Uses default data models
  // Drop-in-specific defaults:
  // companyHeader: undefined // See configuration options below
  // customerGroupHeader: undefined // See configuration options below
  // companySessionStorageKey: undefined // See configuration options below
  // groupSessionStorageKey: undefined // See configuration options below
  // fetchGraphQlModules: undefined // See configuration options below
  // groupGraphQlModules: undefined // See configuration options below
});
```

--------------------------------

### Subscribe to Quote Items Removal

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins-b2b/quote-management/events

Example of subscribing to the quote-management/quote-items-removed event.

```javascript
1
import { events } from '@dropins/tools/event-bus.js';
2

3
events.on('quote-management/quote-items-removed', (payload) => {
4
  console.log('quote-management/quote-items-removed event received:', payload);
5
  // Add your custom logic here
6
});
```

--------------------------------

### initialize

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins-b2b/company-switcher/initialization

Initializes the Company Switcher drop-in with custom configuration settings.

```APIDOC
## initialize(config)

### Description
Configures and initializes the Company Switcher drop-in for managing multi-company contexts in B2B storefronts.

### Parameters
- **langDefinitions** (object) - Optional - Maps locale identifiers to dictionaries of key-value pairs for UI text.
- **companyHeader** (string) - Optional - Custom header name for company context.
- **customerGroupHeader** (string) - Optional - Custom header name for customer group context.
- **companySessionStorageKey** (string) - Optional - Key used for company session storage.
- **groupSessionStorageKey** (string) - Optional - Key used for group session storage.
- **fetchGraphQlModules** (array) - Optional - List of GraphQL modules for fetching data.
- **groupGraphQlModules** (array) - Optional - List of GraphQL modules for group data.

### Usage Example
```javascript
import { initializers } from '@dropins/tools/initializer.js';
import { initialize } from '@dropins/storefront-company-switcher';

await initializers.mountImmediately(initialize, {
  langDefinitions: {},
  companyHeader: 'X-Custom-Header',
  customerGroupHeader: 'X-Custom-Header',
  companySessionStorageKey: 'customKey',
  groupSessionStorageKey: 'customKey',
  fetchGraphQlModules: [],
  groupGraphQlModules: [],
});
```
```

--------------------------------

### Subscribe to Quote Data Error

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins-b2b/quote-management/events

Example of subscribing to the quote-data/error event.

```javascript
import { events } from '@dropins/tools/event-bus.js';

events.on('quote-management/quote-data/error', (payload) => {
  console.log('quote-management/quote-data/error event received:', payload);
  // Add your custom logic here
});
```

--------------------------------

### Subscribe to Negotiable Quote Requested

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins-b2b/quote-management/events

Example of subscribing to the negotiable-quote-requested event.

```javascript
import { events } from '@dropins/tools/event-bus.js';

events.on('quote-management/negotiable-quote-requested', (payload) => {
  console.log('quote-management/negotiable-quote-requested event received:', payload);
  // Add your custom logic here
});
```

--------------------------------

### Initialize and Render Product Discovery

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/product-discovery/quick-start

Basic pattern for importing the initializer, container, and provider to render a component within a block.

```javascript
1
// 1. Import initializer (handles all setup)
2
import '../../scripts/initializers/search.js';
3

4
// 2. Import the container you need
5
import Facets from '@dropins/storefront-product-discovery/containers/Facets.js';
6

7
// 3. Import the provider
8
import { render as provider } from '@dropins/storefront-product-discovery/render.js';
9

10
// 4. Render in your block
11
export default async function decorate(block) {
12
  await provider.render(Facets, {
13
    // Configuration options - see Containers page
14
  })(block);
15
}
```

--------------------------------

### Subscribe to Negotiable Quote Deleted

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins-b2b/quote-management/events

Example of subscribing to the negotiable-quote-deleted event.

```javascript
import { events } from '@dropins/tools/event-bus.js';

events.on('quote-management/negotiable-quote-deleted', (payload) => {
  console.log('quote-management/negotiable-quote-deleted event received:', payload);
  // Add your custom logic here
});
```

--------------------------------

### Initialize CompanyRegistration Container

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins-b2b/company-management/containers/company-registration

Demonstrates how to render the CompanyRegistration container with authentication status and callback handlers.

```javascript
import { render as provider } from '@dropins/storefront-company-management/render.js';
import { CompanyRegistration } from '@dropins/storefront-company-management/containers/CompanyRegistration.js';

await provider.render(CompanyRegistration, {
  isAuthenticated: true,
  onRedirectLogin: (redirectLogin) => console.log('RedirectLogin', redirectLogin),
  onRedirectAccount: (redirectAccount) => console.log('RedirectAccount', redirectAccount),
})(block);
```

--------------------------------

### Customize ReturnListImage Slot

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/order/slots

Implementation example for overriding the ReturnListImage section.

```javascript
import { render as provider } from '@dropins/storefront-order/render.js';
import { OrderReturns } from '@dropins/storefront-order/containers/OrderReturns.js';

await provider.render(OrderReturns, {
  slots: {
    ReturnListImage: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom ReturnListImage';
      ctx.appendChild(element);
    }
  }
})(block);
```

--------------------------------

### Initialize Checkout with Default Configuration

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/checkout/initialization

Mount the checkout drop-in using default settings when no custom configuration is required.

```javascript
import { initializers } from '@dropins/tools/initializer.js';
import { initialize } from '@dropins/storefront-checkout';

// All configuration options are optional
await initializers.mountImmediately(initialize, {
  langDefinitions: {}, // Uses built-in English strings
  models: {}, // Uses default data models
  // Drop-in-specific defaults:
  // defaults: undefined // See configuration options below
  // shipping: undefined // See configuration options below
  // features: undefined // See configuration options below
});
```

--------------------------------

### Customize DetailsActionParams Slot

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/order/slots

Implementation example for overriding the DetailsActionParams section.

```javascript
import { render as provider } from '@dropins/storefront-order/render.js';
import { OrderReturns } from '@dropins/storefront-order/containers/OrderReturns.js';

await provider.render(OrderReturns, {
  slots: {
    DetailsActionParams: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom DetailsActionParams';
      ctx.appendChild(element);
    }
  }
})(block);
```

--------------------------------

### Customize ReturnItemsDetails Slot

Source: https://experienceleague.adobe.com/developer/commerce/storefront/dropins/order/slots

Implementation example for overriding the ReturnItemsDetails section.

```javascript
import { render as provider } from '@dropins/storefront-order/render.js';
import { OrderReturns } from '@dropins/storefront-order/containers/OrderReturns.js';

await provider.render(OrderReturns, {
  slots: {
    ReturnItemsDetails: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom ReturnItemsDetails';
      ctx.appendChild(element);
    }
  }
})(block);
```
Tokens:
Raw