usePreviewSearch

Use the preview search query hook to request and retrieve data for preview search widgets.

Request parameters

Name

Type

Description

keyphrase

string

String to search for.

category

string

Name of category

suggestion

string

String for suggestion search.

trendingCategory

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.

Do you have some feedback for us?

If you have suggestions for improving this article,