useSearchProductRecommendations

The useSearchProductRecommendations hook is a specialized wrapper around useFetch used to fetch product recommendations. It connects to the search provider's recommendation engine (e.g., Coveo or SAP Commerce Machine Learning) to provide personalized product suggestions based on a product code, cart contents, or user history. It works on the client as well as on the server.

import { useSearchProductRecommendations } from '@archibald/search';

const { data: recommendations, isLoading } = useSearchProductRecommendations(options, fetchOptions);

Parameters

Name	Type	Required	Description
options	SearchRecommendationsRequestOptions	✔️	Options for the recommendations request.
fetchOptions	FetchMinOptions		Standard options for the useFetch hook.

options

• Type: SearchRecommendationsRequestOptions

Property	Type	Description
slotId	string	The ID of the recommendation slot (required).
productId	string	Optional product code to base recommendations on.
cart	SearchRecommendationsCartAndPurchased[]	Optional current cart items for better recommendations.
purchased	SearchRecommendationsCartAndPurchased[]	Optional historical purchased items.

fetchOptions

Standard data fetching options. See useFetch for more information.

Return value

• Type: FetchResult<SearchRecommendationResponse>

Property	Type	Description
data	SearchRecommendationResponse | null	The recommendations data, including product list and headline.
isLoading	boolean	True if the request is in progress.
isDone	boolean	True if the request has finished.

Example

import { useSearchProductRecommendations } from '@archibald/search';

function RelatedProducts({ currentProductCode }) {
    const { data, isLoading } = useSearchProductRecommendations({
        slotId: 'pdp-related-products',
        productId: currentProductCode
    });

    if (isLoading || !data?.products?.length) return null;

    return (
        <section>
            <h4>{data.headline || 'You may also like'}</h4>
            <ProductCarousel products={data.products} />
        </section>
    );
}