Skip to content
Adobe Commerce Storefront

Search is only available in production builds. Try building and previewing the site to test it out locally.

Product Discovery installation

This guide will help you install and configure the Product Discovery drop-in component in your storefront.

Prerequisites

Before you begin, ensure you have:

  • Adobe Commerce instance with Live Search enabled
  • Access to your store’s GraphQL endpoint
  • Required API keys and credentials
  • Node.js and npm installed on your development environment

Step-by-step

Use the following steps to install the Product Discovery drop-in component:

Install the packages

Use a CDN or NPM (recommended for performance) to install the drop-in component tools (@dropins/tools) and product discovery (@dropins/storefront-product-discovery) packages.

npm install @dropins/tools @dropins/storefront-product-discovery

Map the packages

In the <head> tag of your index.html or head.html file, use an importmap pointed to the node_modules directory, a custom local directory, or CDN (for run-time environments).

<script type="importmap">
  {
    "imports": {
      "@dropins/tools/": "/node_modules/@dropins/tools/",
      "@dropins/storefront-product-discovery/": "/node_modules/@dropins/storefront-product-discovery/"
    }
  }
</script>
<script src="/scripts/scripts.js" type="module"></script>

With the importmap defined for both runtime and build-time environments, you can now import the required files from these packages into your product list page block as described in the next step.

Initialize the drop-in

The code below shows how to register the Product Discovery drop-in, configure placeholders and translation files, and set GraphQL endpoint and headers. You can add these functions as a script to your website and import them on blocks where Product Discovery components are rendered.

import { initializers } from '@dropins/tools/initializer.js';
import { initialize, setFetchGraphQlHeaders, setEndpoint } from '@dropins/storefront-product-discovery/api.js';
import { getHeaders } from '@dropins/tools/lib/aem/configs.js';
import { initializeDropin } from './index.js';
import { fetchPlaceholders, commerceEndpointWithQueryParams } from '../commerce.js';


await initializeDropin(async () => {
  setEndpoint(await commerceEndpointWithQueryParams());
  setFetchGraphQlHeaders((prev) => ({ ...prev, ...getHeaders('cs') }));


  const labels = await fetchPlaceholders('placeholders/search.json');
  const langDefinitions = {
    default: {
      ...labels
    }
  };


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

Import the required files

Import the required files from @dropins/tools, @dropins/storefront-product-discovery, and your initializer file into a JavaScript file for your product list page and header blocks.

// Component tools
import { initializers } from '@dropins/tools/initializer.js';
import { events } from '@dropins/tools/event-bus.js';


// Drop-in component functions
import * as api from '@dropins/storefront-product-discovery/api.js';


// Drop-in component provider
import { render as provider } from '@dropins/storefront-product-discovery/render.js';


// Drop-in component containers
import SearchResults from '@dropins/storefront-product-discovery/containers/SearchResults.js';
import Facets from '@dropins/storefront-product-discovery/containers/Facets.js';
import Pagination from '@dropins/storefront-product-discovery/containers/Pagination.js';
import SortBy from '@dropins/storefront-product-discovery/containers/SortBy.js';


// Initializers
import '../../scripts/initializers/product-discovery-initializer.js';

Configure and render the Product Discovery components

Render the Product Discovery components on the page. The example below shows rendering for a PLP and a quick search overlay.

const fragment = document.createRange().createContextualFragment(`
  <div class="search__wrapper">
    <div class="search__left-column">
      <div class="search__facets"></div>
    </div>
    <div class="search__right-column">
      <div class="search__result-info"></div>
      <div class="search__product-list"></div>
      <div class="search__pagination"></div>
    </div>
  </div>
`);


const $resultInfo = fragment.querySelector('.search__result-info');
const $facets = fragment.querySelector('.search__facets');
const $productList = fragment.querySelector('.search__product-list');
const $pagination = fragment.querySelector('.search__pagination');


provider.render(SortBy)($resultInfo);
provider.render(Facets)($facets);
provider.render(SearchResults)($productList);
provider.render(Pagination)($pagination);


block.appendChild(fragment);

The Commerce boilerplate template includes all of the necessary drop-in components and configurations to help you get started quickly, so Adobe recommends relying on the boilerplate instead of installing, configuring, and integrating the drop-in components individually.