@magento/storefront-search-as-you-type
v1.0.4
Published
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.
Downloads
1,445
Readme
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. Open http://localhost:3000/v1/index.html to view it in the browser.
npm run test
Launches the test runner in the interactive watch mode. See the section about running tests for more information.
npm run build
Builds the app for production to the build
folder. 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. Your app is ready to be deployed!
See the section about deployment for more information.