The horizontal recommendation widget template

A horizontal recommendation widget displays recommendations with pagination controls.

Screenshot of a horizontal recommendation widget.

The following sections describe the horizontal recommendation widget template, and contains an API reference, and instructions on how to create code blocks that you can add to the WidgetsProvider in your React project using Search JS SDK for React. The widget uses the search results query hook to request and retrieve data.

To create a widget component, you can choose to use Search UI components CLI, a command line interface, or copy and paste code blocks manually.

Generate or create the component

Important

Remember to adjust the entity model in the widget template to match your implementation.

Plain component

TS CLI

With the Sitecore Search CLI you can replicate all necessary files of the widget template in your React project. The following procedure includes instructions for installing the CLI in your project and specifying the location where widget components are created.

If you have previously installed the CLI in your project and have a location defined in a file called .sc-search-settings.json, you can proceed directly to step 3.

To install the UI Components CLI in your project:

To install the Search UI Components CLI, open the terminal of your IDE or command prompt and run the following command:
RequestResponse
```
npx install --save-dev @sitecore-search/cli
```
To define the location of where widget components will be created, at the root of your project, in a file called .sc-search-settings.json, specify the location as shown in the following code block.
RequestResponse
```
{
    "components-path": "src-test/components"
}
```
To create the widget component, go to the location you defined in the .sc-search-settings.json file then open the terminal of your IDE or command prompt and run the following command:
RequestResponse
```
npx sc-search new-widget --language typescript --template recommendation-basic-horizontal --entity content --styling plain
```

Styled component

TS CLI

If you have previously installed the CLI in your project and have a location defined in a file called .sc-search-settings.json, you can proceed directly to step 3.

To install the UI Components CLI in your project:

To install the Search UI Components CLI, open the terminal of your IDE or command prompt and run the following command:
RequestResponse
```
npx install --save-dev @sitecore-search/cli
```
To define the location of where widget components will be created, at the root of your project, in a file called .sc-search-settings.json, specify the location as shown in the following code block.
RequestResponse
```
{
    "components-path": "src-test/components"
}
```
To create the widget component in index.tsx and styled.ts files, go to the location you defined in the .sc-search-settings.json file then open the terminal of your IDE or command prompt and run the following command:
RequestResponse
```
npx sc-search new-widget --language typescript --template recommendation-basic-horizontal --entity content --styling styled
```

CSS styled component

TS CLI

If you have previously installed the CLI in your project and have a location defined in a file called .sc-search-settings.json, you can proceed directly to step 3.

To install the UI Components CLI in your project:

To install the Search UI Components CLI, open the terminal of your IDE or command prompt and run the following command:
RequestResponse
```
npx install --save-dev @sitecore-search/cli
```
To define the location of where widget components will be created, at the root of your project, in a file called .sc-search-settings.json, specify the location as shown in the following code block.
RequestResponse
```
{
    "components-path": "src-test/components"
}
```
To create the widget component in index.tsx and styles.css files, go to the location you defined in the .sc-search-settings.json file then open the terminal of your IDE or command prompt and run the following command:
RequestResponse
```
npx sc-search new-widget --language typescript --template recommendation-basic-horizontal --entity content --styling css
```

CSS module styled component

TS CLI

If you have previously installed the CLI in your project and have a location defined in a file called .sc-search-settings.json, you can proceed directly to step 3.

To install the UI Components CLI in your project:

To install the Search UI Components CLI, open the terminal of your IDE or command prompt and run the following command:
RequestResponse
```
npx install --save-dev @sitecore-search/cli
```
To define the location of where widget components will be created, at the root of your project, in a file called .sc-search-settings.json, specify the location as shown in the following code block.
RequestResponse
```
{
    "components-path": "src-test/components"
}
```
To create the widget component in index.tsx and styles.module.css files, go to the location you defined in the .sc-search-settings.json file then open the terminal of your IDE or command prompt and run the following command:
RequestResponse
```
npx sc-search new-widget --language typescript --template recommendation-basic-horizontal --entity content --styling cssModule
```

Options

Items to display

itemsToDisplay sets the maximum number of items displayed in this component.

Default: 6

RequestResponse

<RecommendationCarousel
	rfkId="rfkid_2"
 	title="Latest news"
 	itemsToDisplay={12}
/>

Do you have some feedback for us?

If you have suggestions for improving this article,