The basic preview search 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 preview-search-basic --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:

• 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 { ChangeEvent } from 'react';
  import { useCallback } from 'react';
  
  import type { PreviewSearchInitialState } from '@sitecore-search/react';
  import { WidgetDataType, usePreviewSearch, widget } from '@sitecore-search/react';
  import { ArticleCard, Presence, PreviewSearch } from '@sitecore-search/ui';
  
  type ArticleModel = {
    id: string;
    name: string;
    image_url: string;
    url: string;
    source_id?: string;
  };
  type InitialState = PreviewSearchInitialState<'itemsPerPage'>;
  export const PreviewSearchBasicComponent = ({ defaultItemsPerPage = 6 }) => {
    const {
      widgetRef,
      actions: { onItemClick, onKeyphraseChange },
      queryResult,
      queryResult: { isFetching, isLoading },
    } = usePreviewSearch<ArticleModel, InitialState>({
      state: {
        itemsPerPage: defaultItemsPerPage,
      },
    });
    const loading = isLoading || isFetching;
    const keyphraseHandler = useCallback(
      (event: ChangeEvent<HTMLInputElement>) => {
        const target = event.target;
        onKeyphraseChange({
          keyphrase: target.value,
        });
      },
      [onKeyphraseChange],
    );
    return (
      <PreviewSearch.Root>
        <PreviewSearch.Input onChange={keyphraseHandler} autoComplete="off" placeholder="Type to search..." />
        <PreviewSearch.Content ref={widgetRef}>
          <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>
          <Presence present={!loading}>
            <PreviewSearch.Results defaultQueryResult={queryResult}>
              {({ isFetching: loading, data: { content: articles = [] } = {} }) => (
                <PreviewSearch.Items data-loading={loading}>
                  <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 &&
                    articles.map((article, index) => (
                      <PreviewSearch.Item key={article.id} asChild>
                        <a
                          href={article.url}
                          onClick={(e) => {
                            e.preventDefault();
                            onItemClick({
                              id: article.id,
                              index,
                              sourceId: article.source_id,
                            });
                            // add redirection or any action
                          }}
                        >
                          <ArticleCard.Root>
                            <div>
                              <ArticleCard.Image src={article.image_url} />
                            </div>
                            <ArticleCard.Title>{article.name}</ArticleCard.Title>
                          </ArticleCard.Root>
                        </a>
                      </PreviewSearch.Item>
                    ))}
                </PreviewSearch.Items>
              )}
            </PreviewSearch.Results>
          </Presence>
        </PreviewSearch.Content>
      </PreviewSearch.Root>
    );
  };
  const PreviewSearchBasicWidget = widget(PreviewSearchBasicComponent, WidgetDataType.PREVIEW_SEARCH, 'content');
  export default PreviewSearchBasicWidget;

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 preview-search-basic --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:

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

  // index.jsx
  import { useCallback } from 'react';
  
  import { WidgetDataType, usePreviewSearch, widget } from '@sitecore-search/react';
  import { ArticleCard, Presence, PreviewSearch } from '@sitecore-search/ui';
  
  export const PreviewSearchBasicComponent = ({ defaultItemsPerPage = 6 }) => {
    const {
      widgetRef,
      actions: { onItemClick, onKeyphraseChange },
      queryResult,
      queryResult: { isFetching, isLoading },
    } = usePreviewSearch({
      state: {
        itemsPerPage: defaultItemsPerPage,
      },
    });
    const loading = isLoading || isFetching;
    const keyphraseHandler = useCallback(
      (event) => {
        const target = event.target;
        onKeyphraseChange({
          keyphrase: target.value,
        });
      },
      [onKeyphraseChange],
    );
    return (
      <PreviewSearch.Root>
        <PreviewSearch.Input onChange={keyphraseHandler} autoComplete="off" placeholder="Type to search..." />
        <PreviewSearch.Content ref={widgetRef}>
          <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>
          <Presence present={!loading}>
            <PreviewSearch.Results defaultQueryResult={queryResult}>
              {({ isFetching: loading, data: { content: articles = [] } = {} }) => (
                <PreviewSearch.Items data-loading={loading}>
                  <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 &&
                    articles.map((article, index) => (
                      <PreviewSearch.Item key={article.id} asChild>
                        <a
                          href={article.url}
                          onClick={(e) => {
                            e.preventDefault();
                            onItemClick({
                              id: article.id,
                              index,
                              sourceId: article.source_id,
                            });
                            // add redirection or any action
                          }}
                        >
                          <ArticleCard.Root>
                            <div>
                              <ArticleCard.Image src={article.image_url} />
                            </div>
                            <ArticleCard.Title>{article.name}</ArticleCard.Title>
                          </ArticleCard.Root>
                        </a>
                      </PreviewSearch.Item>
                    ))}
                </PreviewSearch.Items>
              )}
            </PreviewSearch.Results>
          </Presence>
        </PreviewSearch.Content>
      </PreviewSearch.Root>
    );
  };
  const PreviewSearchBasicWidget = widget(PreviewSearchBasicComponent, WidgetDataType.PREVIEW_SEARCH, 'content');
  export default PreviewSearchBasicWidget;

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 preview-search-basic --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 { ChangeEvent } from 'react';
   import { useCallback } from 'react';
   
   import type { PreviewSearchInitialState } from '@sitecore-search/react';
   import { WidgetDataType, usePreviewSearch, widget } from '@sitecore-search/react';
   import { Presence, PreviewSearch } from '@sitecore-search/ui';
   
   import { ArticleCardStyled, LoaderAnimation, LoaderContainer, PreviewSearchStyled } from './styled';
   
   type ArticleModel = {
     id: string;
     name: string;
     image_url: string;
     url: string;
     source_id?: string;
   };
   
   type InitialState = PreviewSearchInitialState<'itemsPerPage'>;
   
   export const PreviewSearchBasicComponent = ({ defaultItemsPerPage = 6 }) => {
     const {
       widgetRef,
       actions: { onItemClick, onKeyphraseChange },
       queryResult,
       queryResult: { isFetching, isLoading },
     } = usePreviewSearch<ArticleModel, InitialState>({
       state: {
         itemsPerPage: defaultItemsPerPage,
       },
     });
   
     const loading = isLoading || isFetching;
     const keyphraseHandler = useCallback(
       (event: ChangeEvent<HTMLInputElement>) => {
         const target = event.target;
         onKeyphraseChange({ keyphrase: target.value });
       },
       [onKeyphraseChange],
     );
     return (
       <PreviewSearchStyled.Root>
         <PreviewSearchStyled.Input onChange={keyphraseHandler} autoComplete="off" placeholder="Type to search..." />
         <PreviewSearchStyled.Content ref={widgetRef}>
           <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>
           <Presence present={!loading}>
             <PreviewSearch.Results defaultQueryResult={queryResult}>
               {({ isFetching: loading, data: { content: articles = [] } = {} }) => (
                 <PreviewSearchStyled.Items data-loading={loading}>
                   <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 &&
                     articles.map((article, index) => (
                       <PreviewSearchStyled.Item key={article.id} asChild>
                         <PreviewSearchStyled.Link
                           href={article.url}
                           onClick={(e) => {
                             e.preventDefault();
                             onItemClick({ id: article.id, index, sourceId: article.source_id });
                             // add redirection or any action
                           }}
                         >
                           <ArticleCardStyled.Root>
                             <ArticleCardStyled.ImageWrapper>
                               <ArticleCardStyled.Image src={article.image_url} />
                             </ArticleCardStyled.ImageWrapper>
                             <ArticleCardStyled.Name>{article.name}</ArticleCardStyled.Name>
                           </ArticleCardStyled.Root>
                         </PreviewSearchStyled.Link>
                       </PreviewSearchStyled.Item>
                     ))}
                 </PreviewSearchStyled.Items>
               )}
             </PreviewSearch.Results>
           </Presence>
         </PreviewSearchStyled.Content>
       </PreviewSearchStyled.Root>
     );
   };
   const PreviewSearchBasicWidget = widget(PreviewSearchBasicComponent, WidgetDataType.PREVIEW_SEARCH, 'content');
   export default PreviewSearchBasicWidget;

   // styled.ts
   import { keyframes, styled } from 'styled-components';
   
   import { ArticleCard, PreviewSearch, theme } from '@sitecore-search/ui';
   
   export const PreviewSearchInput = styled(PreviewSearch.Input)`
     width: 800px;
     box-sizing: border-box;
     padding: ${theme.vars.spacing.xs};
   
     &:focus {
       outline: 1px solid ${theme.vars.palette.grey['400']};
     }
   `;
   
   export const PreviewSearchContent = styled(PreviewSearch.Content)`
     animation-duration: 500ms;
     animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
     will-change: transform, opacity;
     width: var(--radix-popover-trigger-width);
     max-height: var(--radix-popover-content-available-height);
     background: ${theme.vars.palette.primary.light};
     box-shadow: 2px 5px 5px 5px ${theme.vars.palette.grey['400']};
     display: flex;
     justify-content: center;
     height: 400px;
     padding-top: 0;
     font-family: ${theme.vars.typography.fontFamilySystem};
   
     @keyframes slide-up-and-fade {
       from {
         opacity: 0;
         transform: translateY(2px);
       }
       to {
         opacity: 1;
         transform: translateY(0);
       }
     }
   
     @keyframes slide-right-and-fade {
       from {
         opacity: 0;
         transform: translateX(-2px);
       }
       to {
         opacity: 1;
         transform: translateX(0);
       }
     }
   
     @keyframes slide-down-and-fade {
       from {
         opacity: 0;
         transform: translateY(-2px);
       }
       to {
         opacity: 1;
         transform: translateY(0);
       }
     }
   
     @keyframes slide-left-and-fade {
       from {
         opacity: 0;
         transform: translateX(2px);
       }
       to {
         opacity: 1;
         transform: translateX(0);
       }
     }
   
     &[data-state='open'][data-side='top'] {
       animation-name: slide-down-and-fade;
     }
   
     &[data-state='open'][data-side='right'] {
       animation-name: slide-left-and-fade;
     }
   
     &[data-state='open'][data-side='bottom'] {
       animation-name: slide-up-and-fade;
     }
   
     &[data-state='open'][data-side='left'] {
       animation-name: slide-right-and-fade;
     }
   `;
   
   const PreviewSearchSuggestions = styled(PreviewSearch.Suggestions)`
     display: block;
     box-sizing: border-box;
     list-style: none;
     width: 16rem;
     font-size: ${theme.vars.typography.fontSize1.fontSize};
   `;
   
   const PreviewSearchSuggestionItem = styled(PreviewSearch.SuggestionItem)`
     padding: ${theme.vars.spacing.s} ${theme.vars.spacing.s};
   
     &:focus,
     &:hover {
       outline: none;
       font-weight: bold;
       color: ${theme.vars.palette.primary.main};
       background: #fff;
     }
   `;
   
   const PreviewSearchSuggestionTrigger = styled(PreviewSearch.SuggestionTrigger)`
     cursor: pointer;
     padding: ${theme.vars.spacing.s} ${theme.vars.spacing.s};
   
     &[data-state='active'],
     &:focus,
     &:hover {
       outline: none;
       font-weight: bold;
       color: ${theme.vars.palette.primary.main};
       background: #fff;
     }
   `;
   
   const PreviewSearchSuggestionsGroup = styled(PreviewSearch.SuggestionsGroup)`
     flex: 1;
     display: flex;
     flex-direction: column;
   `;
   
   const PreviewSearchLink = styled.a`
     color: ${theme.vars.palette.primary.main};
     display: flex;
     box-sizing: border-box;
     text-decoration: none;
     width: 100%;
     &:focus {
       box-shadow: 2px 2px 4px ${theme.vars.palette.primary.main};
     }
   `;
   
   const PreviewSearchItems = styled(PreviewSearch.Items)`
     flex: 3;
     background: #fff;
     overflow-y: auto;
     display: flex;
   
     &[data-loading='false'] {
       display: grid;
       grid-template-columns: 1fr 1fr 1fr;
       list-style: none;
       margin: 0;
       padding: ${theme.vars.spacing.s};
       gap: ${theme.vars.spacing.m};
     }
   `;
   
   const PreviewSearchRoot = styled(PreviewSearch.Root)``;
   const PreviewSearchItem = styled(PreviewSearch.Item)``;
   
   export const PreviewSearchStyled = {
     Root: PreviewSearchRoot,
     Input: PreviewSearchInput,
     Content: PreviewSearchContent,
     Items: PreviewSearchItems,
     Item: PreviewSearchItem,
     Suggestions: PreviewSearchSuggestions,
     SuggestionsGroup: PreviewSearchSuggestionsGroup,
     SuggestionItem: PreviewSearchSuggestionItem,
     SuggestionTrigger: PreviewSearchSuggestionTrigger,
     Link: PreviewSearchLink,
   };
   
   const ArticleRootStyled = styled(ArticleCard.Root)`
     box-shadow: 2px 2px 4px ${theme.vars.palette?.grey?.['400']};
     padding: ${theme.vars.spacing?.s};
     cursor: pointer;
     display: block;
     border: solid 1px transparent;
     text-align: center;
   
     &:focus-within {
       box-shadow: 2px 2px 4px ${theme.vars.palette?.primary?.main};
     }
   
     &:hover {
       box-shadow: 2px 2px 4px ${theme.vars.palette?.primary?.main};
     }
   `;
   
   const ArticleImageStyled = styled(ArticleCard.Image)`
     display: block;
     width: auto;
     max-width: 100%;
     height: auto;
     max-height: 100%;
   `;
   
   const ArticleImageWrapperStyled = styled.div`
     margin: auto auto 10px;
     position: relative;
     height: 6rem;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
   `;
   
   const ArticleNameStyled = styled(ArticleCard.Title)`
     max-height: 2rem;
     overflow: hidden;
     margin: 0 0 ${theme.vars.spacing?.m};
     font-family: ${theme.vars.typography?.fontFamilySystem};
     font-size: 0.8rem;
     font-weight: ${theme.vars.typography?.fontSize4?.fontWeight};
   `;
   
   const ArticleContentStyled = styled(ArticleCard.Content)`
     margin: 0;
     font-family: ${theme.vars.typography?.fontFamilySystem};
     font-size: ${theme.vars.typography?.fontSize1?.fontSize};
     font-weight: ${theme.vars.typography?.fontWeight};
     line-height: ${theme.vars.typography?.lineHeight};
     color: ${theme.vars.palette?.primary?.main};
   `;
   
   const ArticleLinkStyled = styled.a`
     text-decoration: none;
     color: ${theme.vars.palette?.primary?.main};
     font-size: ${theme.vars.typography?.fontSize4?.fontSize};
   
     &:hover {
       text-decoration: none;
     }
   
     &:focus {
       text-decoration: none;
     }
   `;
   
   export const ArticleCardStyled = {
     Root: ArticleRootStyled,
     Link: ArticleLinkStyled,
     Content: ArticleContentStyled,
     ImageWrapper: ArticleImageWrapperStyled,
     Image: ArticleImageStyled,
     Name: ArticleNameStyled,
   };
   
   // misc
   export const LoaderContainer = styled.div`
     align-items: center;
     display: flex;
     flex: 1;
   `;
   
   const Rotate = keyframes`
     from {
         transform: rotate(0deg);
     }
     to {
         transform: rotate(360deg);
     }
   `;
   
   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 SearchGroupHeadingStyled = styled.h2`
     box-sizing: border-box;
     padding-left: ${theme.vars.spacing.s};
   `;