Product Discovery slots

Learn about the slots provided in the Product Discovery drop-in component.

Extending drop-in components describes default properties available to all slots.

SearchResults slots

The slots for the SearchResults container allow you to customize the appearance of product search results.

slots?: {
    ProductActions?: SlotProps<{
      product: Product;
      variables: SearchVariables | null;
    }>;

    ProductPrice?: SlotProps<{
      product: Product;
      variables: SearchVariables | null;
    }>;

    ProductName?: SlotProps<{
      product: Product;
      variables: SearchVariables | null;
    }>;

    ProductImage?: SlotProps<{
      product: Product;
      variables: SearchVariables | null;
      defaultImageProps: ImageProps
    }>

    NoResults?: SlotProps<{
      error: string | null;
      variables: SearchVariables | null
    }>;

    Header?: SlotProps<{
      products: Product[];
      variables: SearchVariables | null
    }>;

    Footer?: SlotProps<{
      products: Product[];
      variables: SearchVariables | null
    }>;
};

Product interface

The Product interface provides access to product data in slot context objects:

export interface Product {
  id: string;
  name: string;
  sku: string;
  shortDescription: string;
  url: string;
  urlKey: string;
  metaTitle: string;
  metaKeywords: string;
  metaDescription: string;
  lowStock: boolean;
  links: any[];
  images: ProductImage[];
  description: string;
  externalId: string;
  inputOptions: any[];
  addToCartAllowed: boolean;
  price?: ProductViewPrice;
  priceRange?: {
    minimum: ProductViewPrice;
    maximum: ProductViewPrice;
  };
  inStock: boolean;
  typename: string;
  initialized?: boolean;
}

export interface ProductViewPrice {
  final: ProductPrice;
  regular: ProductPrice;
  roles?: string[];
}

export interface ProductPrice {
  amount: {
    value: number;
    currency: string;
  };
}

export interface ProductImage {
  label: string;
  roles: string[];
  url: string;
}

SearchVariables interface

The SearchVariables interface provides access to search parameters and context in slot context objects:

export type Scope = 'search' | 'popover' | string;

export interface SearchVariables {
  scope?: Scope;
  phrase?: string;
  filter?: SearchFilter[];
  sort?: SortOrder[];
  currentPage?: number;
  pageSize?: number;
  context?: SearchContext;
}

export interface SearchContext {
  customerGroup?: string;
  userViewHistory?: ViewHistoryRecord[];
}

export interface ViewHistoryRecord {
  sku: string;
  dateTime: string;
}

export interface SearchFilter {
  attribute: string;
  in?: string[];
  eq?: string;
  range?: {
    from: number;
    to: number;
  };
}

export interface SortOrder {
  attribute: string;
  direction: 'ASC' | 'DESC';
}

Header slot

The Header slot allows you to change content at the top of the SearchResults container.

The context object passed to the callback function includes a products property containing the search results and a variables property with the current search parameters. You can access properties like products.length for result count, variables.phrase for the search term, variables.currentPage for pagination info, and iterate through products to display summary information.

Footer slot

The Footer slot allows you to change content at the bottom of the SearchResults container.

The context object passed to the callback function includes a products property containing the search results and a variables property with the current search parameters. You can access properties like products.length for result count, variables.currentPage and variables.pageSize for pagination controls, and iterate through products to display summary information.

ProductActions slot

The ProductActions slot allows you to add or replace content in the actions section of each product’s rendering.

The context object passed to the callback function includes a product property containing the product data and a variables property with the current search parameters. You can access properties like product.addToCartAllowed, product.inStock, and product.id to conditionally render actions. The variables.context?.customerGroup can be used to show different actions based on user permissions.

ProductPrice slot

The ProductPrice slot allows you to add or replace content in the price section of each product’s rendering.

The context object passed to the callback function includes a product property containing the product data and a variables property with the current search parameters. You can access product.price for the current price or product.priceRange for min/max pricing. Use variables.context?.customerGroup to display role-based pricing.

ProductName slot

The ProductName slot allows you to add or replace content in the name section of each product’s rendering.

The context object passed to the callback function includes a product property containing the product data and a variables property with the current search parameters. You can access properties like product.name, product.sku, and product.shortDescription for display. The variables.phrase can be used to highlight matching search terms.

ProductImage slot

The ProductImage slot allows you to add or replace content in the image section of each product’s rendering.

The context object passed to the callback function includes a product property containing the product data, a variables property with the current search parameters, and a defaultImageProps property with the following structure:

interface ImageProps {
  loading: 'lazy';
  src: string;
  alt: string;
  width: string;
  height: string;
}

NoResults slot

The NoResults slot allows you to customize what is displayed when there are no matching results or if an error occurs.

The context includes:

• error: An error message or null
• variables: The search parameters used for the query

You can access variables.phrase to show the search term that returned no results, variables.filter to display applied filters, and variables.scope to customize messaging based on the search context.

Example implementation

provider.render(SearchResults, {
  slots: {
    ProductName: (ctx) => {
      const skuDiv = document.createElement('div');
      skuDiv.innerHTML = ctx.product.sku;
      ctx.prependSibling(skuDiv);
    },
    NoResults: (ctx) => {
      const message = document.createElement('p');
      message.textContent = ctx.error
        ? `Error: ${ctx.error}`
        : 'No products found for your search.';
      return message;
    }
  }
})($searchResultsContainer);

Facets slots

The slots for the Facets container allow you to customize the appearance of the facets.

slots?: {
    Facet?: SlotProps<{ data: SearchFacet }>;
    SelectedFacets?: SlotProps<{ data: SearchFacet[] }>;
    Facets?: SlotProps<{ data: SearchFacet[] }>;
    FacetBucket?: SlotProps<{ data: FacetBucket }>;
    FacetBucketLabel?: SlotProps<{ data: FacetBucket }>;
};

Facet slot

The Facet slot allows you to customize the appearance of each individual facet.

The context object includes a data property with the facet details:

export interface SearchFacet {
  title: string;
  attribute: string;
  buckets: FacetBucket[];
}

export interface FacetBucket {
  title: string;
  count: number;
  __typename: string;
  from?: number;
  to?: number;
  selected?: boolean;
}

Facets slot

The Facets slot allows you to customize the appearance of the entire list of facets.

The context object includes a data property containing an array of SearchFacet objects.

SelectedFacets slot

The SelectedFacets slot allows you to customize the list of currently selected facets.

The context object includes a data property containing an array of SearchFacet objects that represent the selected filters.

FacetBucket slot

The FacetBucket slot allows you to customize the rendering of each bucket within a facet.

The context object includes a data property containing a FacetBucket object.

FacetBucketLabel slot

The FacetBucketLabel slot allows you to customize only the label portion of each bucket within a facet.

The context object includes a data property containing a FacetBucket object.