The horizontal recommendation widget template

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:

1. To install the Search UI Components CLI, open the terminal of your IDE or command prompt and run the following command:

   npx install --save-dev @sitecore-search/cli

2. 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.

   {
       "components-path": "src-test/components"
   }

3. 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:

   npx sc-search new-widget --language typescript --template recommendation-basic-horizontal --entity content --styling plain

TS manual

When you manually create widget templates in your React project, you need to ensure that you install any required dependencies and create all necessary files.

if you have previously installed the required NPM packages, you can skip the dependency installation steps.

To create the widget component using this widget template in your project:

1. In your project, to install the development dependency, open the terminal of your IDE or command prompt and run the following command:

   npm install @radix-ui/react-icons@^1.3.0

2. In a folder for the widget component, create a file called index.tsx then in the file, paste following code block.

   // index.tsx
   import type { RecommendationInitialState } from '@sitecore-search/react';
   import { WidgetDataType, useRecommendation, widget } from '@sitecore-search/react';
   import { ArticleCard, Presence } from '@sitecore-search/ui';
   
   type ArticleModel = {
     id: string;
     name: string;
     author?: string;
     url?: string;
     image_url?: string;
     source_id?: string;
   };
   type RecommendationProps = {
     title?: string;
     itemsToDisplay?: number;
   };
   type InitialState = RecommendationInitialState<'itemsPerPage'>;
   const DEFAULT_IMG_URL = 'https://placehold.co/500x300?text=No%20Image'; // TODO: Update with corresponding fallback image
   
   export const RecommendationBasicHorizontalComponent = ({ title = '', itemsToDisplay = 6 }: RecommendationProps) => {
     const {
       widgetRef,
       actions: { onItemClick },
       queryResult: { isLoading, isFetching, data: { content: articles = [] } = {} },
     } = useRecommendation<ArticleModel, InitialState>({
       state: {
         itemsPerPage: itemsToDisplay,
       },
     });
     const loading = isLoading || isFetching;
     return (
       <div>
         <Presence present={loading}>
           <div>
             <svg aria-busy={loading} aria-hidden={!loading} focusable="false" role="progressbar" viewBox="0 0 20 20">
               <path d="M7.229 1.173a9.25 9.25 0 1 0 11.655 11.412 1.25 1.25 0 1 0-2.4-.698 6.75 6.75 0 1 1-8.506-8.329 1.25 1.25 0 1 0-.75-2.385z" />
             </svg>
           </div>
         </Presence>
         {!loading && (
           <>
             {title && <h3>{title}</h3>}
             <div ref={widgetRef}>
               {articles.map((item, index) => (
                 <ArticleCard.Root key={item.id}>
                   <div>
                     <ArticleCard.Image src={item?.image_url || DEFAULT_IMG_URL} />
                   </div>
                   <div>
                     <a
                       href={item.url}
                       onClick={(event) => {
                         event.preventDefault();
                         onItemClick({
                           id: item.id,
                           index,
                           sourceId: item.source_id,
                         });
                       }}
                     >
                       <ArticleCard.Title>{item.name}</ArticleCard.Title>
                       <ArticleCard.Subtitle>{item.author}</ArticleCard.Subtitle>
                     </a>
                   </div>
                 </ArticleCard.Root>
               ))}
             </div>
           </>
         )}
       </div>
     );
   };
   const RecommendationBasicHorizontalWidget = widget(RecommendationBasicHorizontalComponent, WidgetDataType.RECOMMENDATION, 'content');
   export default RecommendationBasicHorizontalWidget;

JS 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:

1. To install the Search UI Components CLI, open the terminal of your IDE or command prompt and run the following command:

   npx install --save-dev @sitecore-search/cli

2. 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.

   {
       "components-path": "src-test/components"
   }

3. At the location listed in .sc-search-settings.json, to create the widget component in an index.jsx file, paste the following command in the terminal of your IDE.

   npx sc-search new-widget --language javascript --template recommendation-basic-horizontal --entity content --styling plain

JS manual

When you manually create widget templates in your React project, you need to ensure that you install any required dependencies and create all necessary files.

if you have previously installed the required NPM packages, you can skip the dependency installation steps.

To create the widget component using this widget template in your project:

1. In your project, to install the development dependency, open the terminal of your IDE or command prompt and run the following command:

   npm install @radix-ui/react-icons@^1.3.0

2. In a folder for the widget component, create a file called index.jsx then in the file, paste following code block.

   // index.jsx
   import { WidgetDataType, useRecommendation, widget } from '@sitecore-search/react';
   import { ArticleCard, Presence } from '@sitecore-search/ui';
   
   const DEFAULT_IMG_URL = 'https://placehold.co/500x300?text=No%20Image'; // TODO: Update with corresponding fallback image
   
   export const RecommendationBasicHorizontalComponent = ({ title = '', itemsToDisplay = 6 }) => {
     const {
       widgetRef,
       actions: { onItemClick },
       queryResult: { isLoading, isFetching, data: { content: articles = [] } = {} },
     } = useRecommendation({
       state: {
         itemsPerPage: itemsToDisplay,
       },
     });
     const loading = isLoading || isFetching;
     return (
       <div>
         <Presence present={loading}>
           <div>
             <svg aria-busy={loading} aria-hidden={!loading} focusable="false" role="progressbar" viewBox="0 0 20 20">
               <path d="M7.229 1.173a9.25 9.25 0 1 0 11.655 11.412 1.25 1.25 0 1 0-2.4-.698 6.75 6.75 0 1 1-8.506-8.329 1.25 1.25 0 1 0-.75-2.385z" />
             </svg>
           </div>
         </Presence>
         {!loading && (
           <>
             {title && <h3>{title}</h3>}
             <div ref={widgetRef}>
               {articles.map((item, index) => (
                 <ArticleCard.Root key={item.id}>
                   <div>
                     <ArticleCard.Image src={item?.image_url || DEFAULT_IMG_URL} />
                   </div>
                   <div>
                     <a
                       href={item.url}
                       onClick={(event) => {
                         event.preventDefault();
                         onItemClick({
                           id: item.id,
                           index,
                           sourceId: item.source_id,
                         });
                       }}
                     >
                       <ArticleCard.Title>{item.name}</ArticleCard.Title>
                       <ArticleCard.Subtitle>{item.author}</ArticleCard.Subtitle>
                     </a>
                   </div>
                 </ArticleCard.Root>
               ))}
             </div>
           </>
         )}
       </div>
     );
   };
   const RecommendationBasicHorizontalWidget = widget(RecommendationBasicHorizontalComponent, WidgetDataType.RECOMMENDATION, 'content');
   export default RecommendationBasicHorizontalWidget;

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:

1. To install the Search UI Components CLI, open the terminal of your IDE or command prompt and run the following command:

   npx install --save-dev @sitecore-search/cli

2. 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.

   {
       "components-path": "src-test/components"
   }

3. 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:

   npx sc-search new-widget --language typescript --template recommendation-basic-horizontal --entity content --styling styled

TS manual

When you manually create widget templates in your React project, you need to ensure that you install any required dependencies and create all necessary files.

if you have previously installed the required NPM packages, you can skip the dependency installation steps.

To create the widget component using this widget template in your project:

1. In your project, to install development dependencies, open the terminal of your IDE or command prompt and run the following command:

   npm install styled-components@^6.1.0 @radix-ui/react-icons@^1.3.0

2. In your project, to install the development dependency, open the terminal of your IDE or command prompt and run the following command:

   npm install --save-dev @types/styled-components@^5.1.29

3. In a folder for the widget component, create files called index.tsx and styled.ts then in respective files, paste following code blocks.

   // index.tsx
   import type { RecommendationInitialState } from '@sitecore-search/react';
   import { WidgetDataType, useRecommendation, widget } from '@sitecore-search/react';
   import { Presence } from '@sitecore-search/ui';
   
   import {
     ArticleCardStyled,
     GridStyled,
     LoaderAnimation,
     LoaderContainer,
     RecommendationContainer,
     TitleStyled,
   } from './styled';
   
   type ArticleModel = {
     id: string;
     name: string;
     author?: string;
     url?: string;
     image_url?: string;
     source_id?: string;
   };
   
   type RecommendationProps = {
     title?: string;
     itemsToDisplay?: number;
   };
   
   type InitialState = RecommendationInitialState<'itemsPerPage'>;
   
   const DEFAULT_IMG_URL = 'https://placehold.co/500x300?text=No%20Image'; // TODO: Update with corresponding fallback image
   
   export const RecommendationBasicHorizontalComponent = ({ title = '', itemsToDisplay = 6 }: RecommendationProps) => {
     const {
       widgetRef,
       actions: { onItemClick },
       queryResult: { isLoading, isFetching, data: { content: articles = [] } = {} },
     } = useRecommendation<ArticleModel, InitialState>({
       state: {
         itemsPerPage: itemsToDisplay,
       },
     });
   
     const loading = isLoading || isFetching;
   
     return (
       <RecommendationContainer>
         <Presence present={loading}>
           <LoaderContainer>
             <LoaderAnimation
               aria-busy={loading}
               aria-hidden={!loading}
               focusable="false"
               role="progressbar"
               viewBox="0 0 20 20"
             >
               <path d="M7.229 1.173a9.25 9.25 0 1 0 11.655 11.412 1.25 1.25 0 1 0-2.4-.698 6.75 6.75 0 1 1-8.506-8.329 1.25 1.25 0 1 0-.75-2.385z" />
             </LoaderAnimation>
           </LoaderContainer>
         </Presence>
         {!loading && (
           <>
             {title && <TitleStyled>{title}</TitleStyled>}
             <GridStyled ref={widgetRef}>
               {articles.map((item, index) => (
                 <ArticleCardStyled.Root key={item.id}>
                   <ArticleCardStyled.ImageWrapper>
                     <ArticleCardStyled.Image src={item?.image_url || DEFAULT_IMG_URL} />
                   </ArticleCardStyled.ImageWrapper>
                   <ArticleCardStyled.Content>
                     <ArticleCardStyled.Link
                       href={item.url}
                       onClick={(event) => {
                         event.preventDefault();
                         onItemClick({ id: item.id, index, sourceId: item.source_id });
                       }}
                     >
                       <ArticleCardStyled.Title>{item.name}</ArticleCardStyled.Title>
                       <ArticleCardStyled.Subtitle>{item.author}</ArticleCardStyled.Subtitle>
                     </ArticleCardStyled.Link>
                   </ArticleCardStyled.Content>
                 </ArticleCardStyled.Root>
               ))}
             </GridStyled>
           </>
         )}
       </RecommendationContainer>
     );
   };
   
   const RecommendationBasicHorizontalWidget = widget(RecommendationBasicHorizontalComponent, WidgetDataType.RECOMMENDATION, 'content');
   export default RecommendationBasicHorizontalWidget;

   // styled.ts
   import { keyframes, styled } from 'styled-components';
   
   import { ArticleCard, theme } from '@sitecore-search/ui';
   
   const ArticleCardRootStyled = styled(ArticleCard.Root)`
     cursor: pointer;
     box-sizing: border-box;
     box-shadow: 0 0 2px 2px ${theme.vars.palette.grey['400']};
     background: #fff;
     margin: ${theme.vars.spacing.m};
     position: relative;
     -webkit-transition: 0.3s all ease;
     transition: 0.15s all ease;
     width: 250px;
   
     &:focus-within {
       box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.15);
       transform: scale(1.025);
       opacity: 1;
       transition: 0.35s all ease;
     }
   
     &:hover {
       box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.15);
       transform: scale(1.025);
       opacity: 1;
       transition: 0.35s all ease;
     }
   `;
   
   const ArticleCardContentStyled = styled.div`
     padding: ${theme.vars.spacing.m};
   `;
   
   const ArticleCardLinkStyled = styled.a`
     color: ${theme.vars.palette.text.primary};
     font-size: ${theme.vars.typography.fontSize3.fontSize};
     text-decoration: none;
   
     &:hover {
       text-decoration: none;
     }
   
     &:focus {
       text-decoration: none;
     }
     &::after {
       position: absolute;
       inset: 0;
       display: block;
       content: ' ';
     }
   `;
   
   const ArticleCardImageStyled = styled(ArticleCard.Image)`
     width: 100%;
   `;
   
   const ArticleCardImageWrapperStyled = styled.div`
     position: relative;
     height: 120px;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
   `;
   const ArticleCardTitleStyled = styled(ArticleCard.Title)`
     color: ${theme.vars.palette.text.primary};
     font-family: ${theme.vars.typography.fontFamilySystem};
     font-size: ${theme.vars.typography.h3.fontSize};
     font-weight: ${theme.vars.typography.h3.fontWeight};
     line-height: ${theme.vars.typography.h3.lineHeight};
     margin: 0 0 ${theme.vars.spacing.m};
   `;
   
   const ArticleCardSubtitleStyled = styled(ArticleCard.Subtitle)`
     color: ${theme.vars.palette.text.secondary};
     font-family: ${theme.vars.typography.fontFamilySystem};
     font-size: ${theme.vars.typography.fontSize3.fontSize};
     font-weight: ${theme.vars.typography.fontSize3.fontWeight};
     line-height: ${theme.vars.typography.fontSize3.lineHeight};
     margin: 0 0 ${theme.vars.spacing.m};
   `;
   
   export const TitleStyled = styled.h3`
     color: ${theme.vars.palette.primary.main};
     font-family: ${theme.vars.typography.fontFamilySystem};
     font-size: ${theme.vars.typography.h3.fontSize};
   `;
   
   export const GridStyled = styled.div`
     display: flex;
     flex-flow: row wrap;
   `;
   
   export const LoaderContainer = styled.div`
     align-items: center;
     display: flex;
     min-height: 50vh;
   `;
   
   const Rotate = keyframes`
     from {
         transform: rotate(0deg);
     }
     to {
         transform: rotate(360deg);
     }
   `;
   
   export const RecommendationContainer = styled.div`
     max-width: 1280px;
     margin: 0 auto;
   `;
   
   export const LoaderAnimation = styled.svg`
     animation: ${Rotate} 2s linear infinite;
     display: block;
     fill: ${theme.vars.palette.primary.main};
     height: 50px;
     margin: auto;
     width: 50px;
   `;
   
   export const ArticleCardStyled = {
     Root: ArticleCardRootStyled,
     Content: ArticleCardContentStyled,
     Link: ArticleCardLinkStyled,
     Image: ArticleCardImageStyled,
     ImageWrapper: ArticleCardImageWrapperStyled,
     Title: ArticleCardTitleStyled,
     Subtitle: ArticleCardSubtitleStyled,
   };

JS 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:

1. To install the Search UI Components CLI, open the terminal of your IDE or command prompt and run the following command:

   npx install --save-dev @sitecore-search/cli

2. 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.

   {
       "components-path": "src-test/components"
   }

3. To create the widget component in index.jsx and styled.js 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:

   npx sc-search new-widget --language javascript --template recommendation-basic-horizontal --entity content --styling styled

JS manual

When you manually create widget templates in your React project, you need to ensure that you install any required dependencies and create all necessary files.

if you have previously installed the required NPM packages, you can skip the dependency installation steps.

To create the widget component using this widget template in your project:

1. In your project, to install development dependencies, open the terminal of your IDE or command prompt and run the following command:

   npm install styled-components@^6.1.0 @radix-ui/react-icons@^1.3.0

2. In your project, to install the development dependency, open the terminal of your IDE or command prompt and run the following command:

   npm install --save-dev @types/styled-components@^5.1.29

3. In a folder for the widget component, create files called index.jsx and styled.js then in respective files, paste following code blocks.

   // index.jsx
   import { WidgetDataType, useRecommendation, widget } from '@sitecore-search/react';
   import { Presence } from '@sitecore-search/ui';
   
   import {
     ArticleCardStyled,
     GridStyled,
     LoaderAnimation,
     LoaderContainer,
     RecommendationContainer,
     TitleStyled,
   } from './styled';
   
   const DEFAULT_IMG_URL = 'https://placehold.co/500x300?text=No%20Image'; // TODO: Update with corresponding fallback image
   
   export const RecommendationBasicHorizontalComponent = ({ title = '', itemsToDisplay = 6 }) => {
     const {
       widgetRef,
       actions: { onItemClick },
       queryResult: { isLoading, isFetching, data: { content: articles = [] } = {} },
     } = useRecommendation({
       state: {
         itemsPerPage: itemsToDisplay,
       },
     });
     const loading = isLoading || isFetching;
     return (
       <RecommendationContainer>
         <Presence present={loading}>
           <LoaderContainer>
             <LoaderAnimation
               aria-busy={loading}
               aria-hidden={!loading}
               focusable="false"
               role="progressbar"
               viewBox="0 0 20 20"
             >
               <path d="M7.229 1.173a9.25 9.25 0 1 0 11.655 11.412 1.25 1.25 0 1 0-2.4-.698 6.75 6.75 0 1 1-8.506-8.329 1.25 1.25 0 1 0-.75-2.385z" />
             </LoaderAnimation>
           </LoaderContainer>
         </Presence>
         {!loading && (
           <>
             {title && <TitleStyled>{title}</TitleStyled>}
             <GridStyled ref={widgetRef}>
               {articles.map((item, index) => (
                 <ArticleCardStyled.Root key={item.id}>
                   <ArticleCardStyled.ImageWrapper>
                     <ArticleCardStyled.Image src={item?.image_url || DEFAULT_IMG_URL} />
                   </ArticleCardStyled.ImageWrapper>
                   <ArticleCardStyled.Content>
                     <ArticleCardStyled.Link
                       href={item.url}
                       onClick={(event) => {
                         event.preventDefault();
                         onItemClick({
                           id: item.id,
                           index,
                           sourceId: item.source_id,
                         });
                       }}
                     >
                       <ArticleCardStyled.Title>{item.name}</ArticleCardStyled.Title>
                       <ArticleCardStyled.Subtitle>{item.author}</ArticleCardStyled.Subtitle>
                     </ArticleCardStyled.Link>
                   </ArticleCardStyled.Content>
                 </ArticleCardStyled.Root>
               ))}
             </GridStyled>
           </>
         )}
       </RecommendationContainer>
     );
   };
   const RecommendationBasicHorizontalWidget = widget(RecommendationBasicHorizontalComponent, WidgetDataType.RECOMMENDATION, 'content');
   export default RecommendationBasicHorizontalWidget;

   // styled.js
   import { keyframes, styled } from 'styled-components';
   
   import { ArticleCard, theme } from '@sitecore-search/ui';
   
   const ArticleCardRootStyled = styled(ArticleCard.Root)`
     cursor: pointer;
     box-sizing: border-box;
     box-shadow: 0 0 2px 2px ${theme.vars.palette.grey['400']};
     background: #fff;
     margin: ${theme.vars.spacing.m};
     position: relative;
     -webkit-transition: 0.3s all ease;
     transition: 0.15s all ease;
     width: 250px;
   
     &:focus-within {
       box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.15);
       transform: scale(1.025);
       opacity: 1;
       transition: 0.35s all ease;
     }
   
     &:hover {
       box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.15);
       transform: scale(1.025);
       opacity: 1;
       transition: 0.35s all ease;
     }
   `;
   const ArticleCardContentStyled = styled.div`
     padding: ${theme.vars.spacing.m};
   `;
   const ArticleCardLinkStyled = styled.a`
     color: ${theme.vars.palette.text.primary};
     font-size: ${theme.vars.typography.fontSize3.fontSize};
     text-decoration: none;
   
     &:hover {
       text-decoration: none;
     }
   
     &:focus {
       text-decoration: none;
     }
     &::after {
       position: absolute;
       inset: 0;
       display: block;
       content: ' ';
     }
   `;
   const ArticleCardImageStyled = styled(ArticleCard.Image)`
     width: 100%;
   `;
   const ArticleCardImageWrapperStyled = styled.div`
     position: relative;
     height: 120px;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
   `;
   const ArticleCardTitleStyled = styled(ArticleCard.Title)`
     color: ${theme.vars.palette.text.primary};
     font-family: ${theme.vars.typography.fontFamilySystem};
     font-size: ${theme.vars.typography.h3.fontSize};
     font-weight: ${theme.vars.typography.h3.fontWeight};
     line-height: ${theme.vars.typography.h3.lineHeight};
     margin: 0 0 ${theme.vars.spacing.m};
   `;
   const ArticleCardSubtitleStyled = styled(ArticleCard.Subtitle)`
     color: ${theme.vars.palette.text.secondary};
     font-family: ${theme.vars.typography.fontFamilySystem};
     font-size: ${theme.vars.typography.fontSize3.fontSize};
     font-weight: ${theme.vars.typography.fontSize3.fontWeight};
     line-height: ${theme.vars.typography.fontSize3.lineHeight};
     margin: 0 0 ${theme.vars.spacing.m};
   `;
   export const TitleStyled = styled.h3`
     color: ${theme.vars.palette.primary.main};
     font-family: ${theme.vars.typography.fontFamilySystem};
     font-size: ${theme.vars.typography.h3.fontSize};
   `;
   export const GridStyled = styled.div`
     display: flex;
     flex-flow: row wrap;
   `;
   export const LoaderContainer = styled.div`
     align-items: center;
     display: flex;
     min-height: 50vh;
   `;
   const Rotate = keyframes`
     from {
         transform: rotate(0deg);
     }
     to {
         transform: rotate(360deg);
     }
   `;
   export const RecommendationContainer = styled.div`
     max-width: 1280px;
     margin: 0 auto;
   `;
   export const LoaderAnimation = styled.svg`
     animation: ${Rotate} 2s linear infinite;
     display: block;
     fill: ${theme.vars.palette.primary.main};
     height: 50px;
     margin: auto;
     width: 50px;
   `;
   export const ArticleCardStyled = {
     Root: ArticleCardRootStyled,
     Content: ArticleCardContentStyled,
     Link: ArticleCardLinkStyled,
     Image: ArticleCardImageStyled,
     ImageWrapper: ArticleCardImageWrapperStyled,
     Title: ArticleCardTitleStyled,
     Subtitle: ArticleCardSubtitleStyled,
   };

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:

1. To install the Search UI Components CLI, open the terminal of your IDE or command prompt and run the following command:

   npx install --save-dev @sitecore-search/cli

2. 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.

   {
       "components-path": "src-test/components"
   }

3. 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:

   npx sc-search new-widget --language typescript --template recommendation-basic-horizontal --entity content --styling css

TS manual

When you manually create widget templates in your React project, you need to ensure that you install any required dependencies and create all necessary files.

To create the widget component using this widget template in your project:

1. In your project, to install the development dependency, open the terminal of your IDE or command prompt and run the following command:

   npm install @radix-ui/react-icons@^1.3.0

2. In a folder for the widget component, create files called index.tsx and styles.css then in respective files, paste following code blocks.

   // index.tsx
   import type { RecommendationInitialState } from '@sitecore-search/react';
   import { WidgetDataType, useRecommendation, widget } from '@sitecore-search/react';
   import { ArticleCard, Presence } from '@sitecore-search/ui';
   
   import './styles.css';
   
   type ArticleModel = {
     id: string;
     name: string;
     author?: string;
     url?: string;
     image_url?: string;
     source_id?: string;
   };
   type RecommendationProps = {
     title?: string;
     itemsToDisplay?: number;
   };
   type InitialState = RecommendationInitialState<'itemsPerPage'>;
   const DEFAULT_IMG_URL = 'https://placehold.co/500x300?text=No%20Image'; // TODO: Update with corresponding fallback image
   
   export const RecommendationBasicHorizontalComponent = ({ title = '', itemsToDisplay = 6 }: RecommendationProps) => {
     const {
       widgetRef,
       actions: { onItemClick },
       queryResult: { isLoading, isFetching, data: { content: articles = [] } = {} },
     } = useRecommendation<ArticleModel, InitialState>({
       state: {
         itemsPerPage: itemsToDisplay,
       },
     });
     const loading = isLoading || isFetching;
     return (
       <div className="sitecore-recommendation-container">
         <Presence present={loading}>
           <div className="sitecore-loader-container">
             <svg
               aria-busy={loading}
               aria-hidden={!loading}
               focusable="false"
               role="progressbar"
               viewBox="0 0 20 20"
               className="sitecore-loader-animation"
             >
               <path d="M7.229 1.173a9.25 9.25 0 1 0 11.655 11.412 1.25 1.25 0 1 0-2.4-.698 6.75 6.75 0 1 1-8.506-8.329 1.25 1.25 0 1 0-.75-2.385z" />
             </svg>
           </div>
         </Presence>
         {!loading && (
           <>
             {title && <h3 className="sitecore-title">{title}</h3>}
             <div ref={widgetRef} className="sitecore-grid">
               {articles.map((item, index) => (
                 <ArticleCard.Root key={item.id} className="sitecore-article-card-root">
                   <div className="sitecore-article-card-image-wrapper">
                     <ArticleCard.Image src={item?.image_url || DEFAULT_IMG_URL} className="sitecore-article-card-image" />
                   </div>
                   <div className="sitecore-article-card-content">
                     <a
                       href={item.url}
                       onClick={(event) => {
                         event.preventDefault();
                         onItemClick({
                           id: item.id,
                           index,
                           sourceId: item.source_id,
                         });
                       }}
                       className="sitecore-article-card-link"
                     >
                       <ArticleCard.Title className="sitecore-article-card-title">{item.name}</ArticleCard.Title>
                       <ArticleCard.Subtitle className="sitecore-article-card-subtitle">
                         {item.author}
                       </ArticleCard.Subtitle>
                     </a>
                   </div>
                 </ArticleCard.Root>
               ))}
             </div>
           </>
         )}
       </div>
     );
   };
   const RecommendationBasicHorizontalWidget = widget(RecommendationBasicHorizontalComponent, WidgetDataType.RECOMMENDATION, 'content');
   export default RecommendationBasicHorizontalWidget;

   // styles.css
   @keyframes rotate-animation {
     from {
       transform: rotate(0deg);
     }
     to {
       transform: rotate(360deg);
     }
   }
   
   /* ArticleCardRoot */
   .sitecore-article-card-root {
     cursor: pointer;
     box-sizing: border-box;
     box-shadow: 0 0 2px 2px var(--sdc-palette-grey-400);
     background: #fff;
     margin: var(--sdc-spacing-m);
     position: relative;
     transition: 0.15s all ease;
     width: 250px;
   }
   
   .sitecore-article-card-root:focus-within {
     box-shadow: 0 0 8px 3px rgb(0 0 0 / 15%);
     transform: scale(1.025);
     opacity: 1;
     transition: 0.35s all ease;
   }
   
   .sitecore-article-card-root:hover {
     box-shadow: 0 0 8px 3px rgb(0 0 0 / 15%);
     transform: scale(1.025);
     opacity: 1;
     transition: 0.35s all ease;
   }
   
   /* ArticleCardContent */
   .sitecore-article-card-content {
     padding: var(--sdc-spacing-m);
   }
   
   /* ArticleCardLink */
   .sitecore-article-card-link {
     color: var(--sdc-palette-text-primary);
     font-size: var(--sdc-typography-fontSize3-fontSize);
     text-decoration: none;
   }
   
   .sitecore-article-card-link:hover {
     text-decoration: none;
   }
   
   .sitecore-article-card-link:focus {
     text-decoration: none;
   }
   
   .sitecore-article-card-link::after {
     position: absolute;
     inset: 0;
     display: block;
     content: ' ';
   }
   
   /* ArticleCardImage */
   .sitecore-article-card-image {
     width: 100%;
   }
   
   /* ArticleCardImageWrapper */
   .sitecore-article-card-image-wrapper {
     position: relative;
     height: 120px;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
   }
   
   /* ArticleCardTitle */
   .sitecore-article-card-title {
     color: var(--sdc-palette-text-primary);
     font-family: var(--sdc-typography-fontFamilySystem);
     font-size: var(--sdc-typography-h3-fontSize);
     font-weight: var(--sdc-typography-h3-fontWeight);
     line-height: var(--sdc-typography-h3-lineHeight);
     margin: 0 0 var(--sdc-spacing-m);
   }
   
   /* ArticleCardSubtitle */
   .sitecore-article-card-subtitle {
     color: var(--sdc-palette-text-secondary);
     font-family: var(--sdc-typography-fontFamilySystem);
     font-size: var(--sdc-typography-fontSize3-fontSize);
     font-weight: var(--sdc-typography-fontSize3-fontWeight);
     line-height: var(--sdc-typography-fontSize3-lineHeight);
     margin: 0 0 var(--sdc-spacing-m);
   }
   
   /* Title */
   .sitecore-title {
     color: var(--sdc-palette-primary-main);
     font-family: var(--sdc-typography-fontFamilySystem);
     font-size: var(--sdc-typography-h3-fontSize);
   }
   
   /* Grid */
   .sitecore-grid {
     display: flex;
     flex-flow: row wrap;
   }
   
   /* LoaderContainer */
   .sitecore-loader-container {
     align-items: center;
     display: flex;
     min-height: 50vh;
   }
   
   /* RecommendationContainer */
   .sitecore-recommendation-container {
     max-width: 1280px;
     margin: 0 auto;
   }
   
   /* LoaderAnimation */
   .sitecore-loader-animation {
     animation: rotate-animation 2s linear infinite;
     display: block;
     fill: var(--sdc-palette-primary-main);
     height: 50px;
     margin: auto;
     width: 50px;
   }