Product Discovery initialization

The Product Discovery initializer configures search and filtering functionality, including faceted search, sorting, and product listing. Use initialization to customize search behavior and product discovery data models.

Version: 2.1.0

Configuration options

The following table describes the configuration options available for the Product Discovery initializer:

Parameter	Type	Req?	Description
langDefinitions	langDefinitions	No	Language definitions for internationalization (i18n). Override dictionary keys for localization or branding.
models	models	No	Custom data models for type transformations. Extend or modify default models with custom fields and transformers.

Basic initialization

Initialize the drop-in with default settings:

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

await initializers.mountImmediately(initialize, {});

Language definitions

Override dictionary keys for localization or branding. The langDefinitions object maps locale keys to custom strings that override the drop-in’s default text.

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

const customStrings = {
  'AddToCart': 'Add to Bag',
  'Checkout': 'Complete Purchase',
  'Price': 'Cost',
};

const langDefinitions = {
  default: customStrings,
};

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

Tip

For complete dictionary customization including all available keys and multi-language support, see the Product Discovery Dictionary page.

Customizing data models

Extend or transform data models by providing custom transformer functions. Use the models option to add custom fields or modify existing data structures returned from the backend.

The following example shows how to customize the Product model for the Product Discovery drop-in:

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

const models = {
  Product: {
    transformer: (data) => ({
      // Add custom fields from backend data
      customField: data?.custom_field,
      promotionBadge: data?.promotion?.label,
      // Transform existing fields
      displayPrice: data?.price?.value ? `$${data.price.value}` : 'N/A',
    }),
  },
};

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

Available models

The following models can be customized through the models configuration option:

Model	Description
Product	Transforms Product data from GraphQL.
ProductSearchResult	Transforms ProductSearchResult data from GraphQL.

Configuration types

The following TypeScript definitions show the structure of each configuration object:

langDefinitions

langDefinitions?: {
  [locale: string]: {
    [key: string]: string;
  };
};

models

models?: {
  [modelName: string]: Model<any>;
};

Model definitions

The following TypeScript definitions show the structure of each customizable model:

Product

export interface ProductSearchResponse {
  productSearch: ProductSearchResult;
}

ProductSearchResult

export interface ProductSearchResult {
  facets: SearchFacet[];
  items: Product[];
  pageInfo: {
    currentPage: number;
    totalPages: number;
    totalItems: number;
    pageSize: number;
  };
  suggestions?: string[];
  totalCount: number;
  metadata?: {
    filterableAttributes: RefineOption[];
    sortableAttributes: RefineOption[];
  };
}