usePreviewSearch
Use the preview search query hook to request and retrieve data for preview search widgets.
Request parameters
Name |
Type |
Description |
---|---|---|
|
string |
String to search for. |
|
string |
Name of category |
|
string |
String for suggestion search. |
|
string |
Name of trending category |
Generic response
RequestResponse
{
actions: {
onSuggestionChange: ({ suggestion: string }) => void,
onTrendingCategoryChange: ({ trendingCategory: string }) => void,
onKeyphraseChange: ({ keyphrase: string }) => void,
onCategoryChange: ({ category: string }) => void,
onProductClick: ({ sku: string }) => void // Track click product event
},
// the following are default values
context: {
keyphrase: string,
category: string,
suggestion: string,
trendingCategory: string,
},
queryResult: {
isLoading, // The query has no data and is currently fetching
isError,// The query encountered an error
isSuccess, // The query was successful and data is available
isFetching, // In any state, if the query is fetching at any time (including background refetching) isFetching will be true.
data: {
suggestion: {
trending_category: [
{
text: string,
id: string,
in_content: string,
url: string
}
] = [],
category: [
{
text: string,
id: string,
in_content: string,
url_path: string
}
] = [],
keyphrase: [
{
text: string,
id: string,
in_content: string
}] = []
} = {},
content: { product: { value: products = [] } = {} } = {},
} = {},
}
}
Import
RequestResponse
import { usePreviewSearch } from '@sitecore-discover/react';
Example
RequestResponse
import React from 'react';
import { WidgetDataType, WidgetsProvider, usePreviewSearch, widget } from '@sitecore-discover/react';
const MyApp = () => {
return (
<WidgetsProvider
env='<environment>'
customerKey='<customer key>'
apiKey='<API key provided in CEC>'
useToken
> <MyPreviewSearchWidget /> </WidgetsProvider>)};
const PreviewSearch = ({
defaultKeyphrase = '',
defaultProductsPerPage = 6,
}) => {
const {
actions: { onKeyphraseChange, onCategoryChange, onSuggestionChange, onTrendingCategoryChange, onProductClick },
// the following are default values
context: {
productsPerPage = defaultProductsPerPage,
keyphrase = defaultKeyphrase,
},
queryResult: {
isLoading,
isFetching,
data: {
content: { product: { value: products = [] } = {} } = {},
suggestion: {
trending_category: trendingCategories = [],
category: categories = [],
keyphrase: suggestions = [],
} = {}
} = {},
},
} = usePreviewSearch((query) => {
// initialization code
return {
// initial values
productsPerPage,
keyphrase: defaultKeyphrase,
};
});
return (<> // Logic here. Refer to Search Results Examples
</>);
}
const MyPreviewSearchWidget = widget(PreviewSearch, WidgetDataType.PREVIEW_SEARCH);
export default MyPreviewSearchWidget;
Note
Convert a UI component into a widget component before adding it to pages.
To convert a component into a widget component, pass the UI component to the widget
or setWidget
function.