Skip to content
Adobe Commerce Storefront

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.