Adding a way to open the SearchModal

Expand and use one or multiple of the following examples to add a way to open the SearchModal.

See overview for a disambiguation of the different search components.

Open centered modal

Open aligned modal

import { onExistsObserver } from "@depict-ai/js-ui";

onExistsObserver(".open-search-button", button => {
  button.addEventListener("click", () => {
    const header = document.querySelector(".page-header");
    if (!header) return console.error("Could not find header element");
    searchProvider.openModal({
      alignerRef: header,
    });
  });
});

Render a SearchField that opens a modal aligned to the SearchField itself:

Render a SearchField that opens a modal aligned to another DOM element

import { SearchField, onExistsObserver } from "@depict-ai/js-ui";

const header = await new Promise(resolve => onExistsObserver(".page-header", resolve));
onExistsObserver(".open-search-button", button => {
  button.addEventListener("click", () => searchProvider.openModal({ alignerRef: header }));
});

📘 Modal alignment on smaller screens

When the viewport height is below 900px, the search modal will overlook the element reference passed to the alignerRef property and center the search modal to the top of the viewport. This is to use the available space as efficiently as possible.

You can find the related reference here

Transforming and enriching display data Adding the SearchPage to your site

Overview

Setup

Search

Product listing pages

Recommendations

Tracking