## Purpose

The purpose of this project is to provide a dev-ready starting point for developers to implement the search popover. A user of this library should have a Commerce store instance.

This repo is provided as a reference implementation only. While you’re expected to create your own customizations based on these assets, those customizations can’t be supported by Adobe.

## Usage

### Setup a livesearch instance

```
const storeDetails: StoreDetailsProps = {
    environmentId: <Storefront_ID>,
    websiteCode: "base",
    storeCode: "main_website_store",
    storeViewCode: "default",
    searchUnitId: searchUnitId,
    config: {
        minQueryLength: 5,
        pageSize: 8,
        currencySymbol: "$",
    },
};
```

### If reroute is needed on popover (In AEM/CIF). This is optional

```
const storeConfig = JSON.parse(
    document
        .querySelector("meta[name='store-config']")
        .getAttribute("content"),
);
const { storeRootUrl } = storeConfig;
const redirectUrl = storeRootUrl.split(".html")[0];
const storeDetails: StoreDetailsProps = {
    environmentId: <Storefront_ID>,
    websiteCode: "base",
    storeCode: "main_website_store",
    storeViewCode: "default",
    searchUnitId: searchUnitId,
    config: {
        minQueryLength: 5,
        pageSize: 8,
        currencySymbol: "$",
    },
  route: ({ sku }) => {
        // Will result to `http://localhost:4502/content/venia/us/en.cifproductredirect.html/MT11`
        return `${redirectUrl}.cifproductredirect.html/${sku}`;
    },
    searchRoute: {
        route: `${redirectUrl}/search.html`,
        query: "search_query",
    },
};

```

```

const searchApi = new LiveSearch(storeDetails);
const { performSearch, pageSize, minQueryLength, currencySymbol } = searchApi;
```

### Popover form react component

```
<FormWithPopover
   performSearch={performSearch}
   submitSearchRedirect={submitSearchRedirect}
   pageSize={pageSize}
   minQueryLength={minQueryLength}
   currencySymbol={currencySymbol}
/>
```

### Popover attached to html component

```
const container = document.getElementById(selectorDetails.resultsSelector);
    ReactDOM.render(
        <AttachedPopover
            performSearch={performSearch}
            pageSize={pageSize}
            minQueryLength={minQueryLength}
            currencySymbol={currencySymbol}
            formSelector={selectorDetails.resultsSelector}
            inputSelector={selectorDetails.inputSelector}
        />,
        container,
    );
```

### Autocomplete hook to create your own popover

```
const {
        active,
        formProps,
        formRef,
        inputProps,
        inputRef,
        loading,
        searchTerm,
        results,
        resultsRef,
        setActive,
        setLoading,
        setResults,
        setSearchTerm,
    } = useAutocomplete(performSearch, minQueryLength);
```

## Available Scripts

You can run a local demo. In the project directory, you can run:

### `npm run dev`

Runs the app in the development mode.<br> Open [http://localhost:3000/v1/index.html](http://localhost:3000/v1/index.html) to view it in the browser.

### `npm run test`

Launches the test runner in the interactive watch mode.<br> See the section about
[running tests](https://jestjs.io/docs/en/webpack) for more
information.

### `npm run build`

Builds the app for production to the `build` folder.<br> It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.<br> Your app is ready to be deployed!

See the section about [deployment](https://webpack.js.org/guides/production/) for
more information.

---