Testing if your store receives search suggestions api response

Before you beggin this installation, follow this 4 steps to test:

• First: open Postman and click in import;
• Second: Choose Raw text and paste this cURL (don't forget to change {{storeId}} to the name of your store and {{term}} for some term for search):

curl --location --request POST 'https://{{storeId}}.myvtex.com/_v/private/graphql/v1' \
--header 'Content-Type: application/json' \
--header 'Cookie: VtexWorkspace=master%3A-' \
--data-raw '{"query":"query ($fullText: String!) {\r\n    searchSuggestions(\r\n          fullText: $fullText\r\n      ) @context(provider: \"vtex.search-graphql\") {\r\n      searches {\r\n        term       \r\n      }\r\n    }\r\n} \r\n","variables":{"fullText":"{{term}}"}}'

• Third: Click in continue and import after this;
• Fourth: Click in send and look if has some response inside the searches array (test 5 terms differents to make sure).

If you don't get any response in several attempts, ask VTEX for a Cold Start in Intelligence Search. If you have some response, go to next section.

Pre-Installation

Before you install this app, you need to prepare somethings in your project, follow this 3 steps:

• First: Install axios in your project to make the request, use this command in your terminal: yarn add axios or npm install axios;
• Second: Create a file searchSuggestions.ts in src/api. After this, paste this code in the file created:

import axios from 'axios';
import { api } from '../../store.config';
import type { GatsbyFunctionRequest, GatsbyFunctionResponse } from 'gatsby';
import type { SearchSuggestionsApiResponse } from '@acctglobal/search-suggestions';

const searchSuggestions = async (
  req: GatsbyFunctionRequest,
  res: GatsbyFunctionResponse
) => {
  const query = `query ($fullText: String!) {
    searchSuggestions(
          fullText: $fullText
      ) @context(provider: "vtex.search-graphql") {
      searches {
        term       
      }
    }
  }`;

  try {
    const { fullText }: { fullText: string } = req.body;

    const { data }: { data: SearchSuggestionsApiResponse } = await axios.post(
      `https://${api.storeId}.myvtex.com/_v/private/graphql/v1`,
      {
        query,
        variables: {
          fullText,
        },
      },
      {
        headers: {
          Accept: 'application/vnd.vtex.ds.v10+json',
          'Content-Type': 'application/json',
        },
      }
    );

    res.send(JSON.stringify(data));
  } catch (error) {
    throw new Error(`Fail in request: ${error.message}`);
  }
};

export default searchSuggestions;

• Third: Create a component to make the request and show the suggestions. Paste this code inside the component created:

  example file: src/components/ShowSearchSuggestions/ShowSearchSuggestions.tsx

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { useSearch } from '@faststore/sdk';
import { SearchSuggestions } from '@acctglobal/search-suggestions';
import type {
  SearchSuggestionsApiResponse,
  Searches,
} from '@acctglobal/search-suggestions';

export const ShowSearchSuggestions = () => {
  const [searchSuggestions, setSearchSuggestions] = useState<Searches[]>([]);
  const [loading, setLoading] = useState(false);
  const { state: stateSearch } = useSearch();

  useEffect(() => {
    const requestSuggestions = async () => {
      setLoading(true);

      const request = await axios.post('/api/searchSuggestions', {
        fullText: stateSearch.term,
      });
      const data: SearchSuggestionsApiResponse = await request.data;
      const suggestions = data?.data?.searchSuggestions?.searches ?? [];
      setSearchSuggestions(suggestions);

      setLoading(false);
    };

    requestSuggestions();
  }, [stateSearch.term]);

  return (
    <SearchSuggestions
      searchSuggestions={searchSuggestions}
      loading={loading}
    />
  );
};

• Fourth: Import this component inside the search page.

  src/pages/s.tsx

import React from 'react'
import { ShowSearchSuggestions } from 'src/components/ShowSearchSuggestions/ShowSearchSuggestions'

const Page = () => {
  ...
  return (
    ...
    <ShowSearchSuggestions />
    ...
  )
}

Installation

yarn add @acctglobal/search-suggestions
npm install @acctglobal/search-suggestions

import { SearchSuggestions } from '@acctglobal/search-suggestions'
...
return (
  // Show every suggestions
  <SearchSuggestions searchSuggestions={searchSuggestions} loading={loading} />

  // Limit the number of suggestions and show a button to display the rest
  <SearchSuggestions
    searchSuggestions={searchSuggestions}
    loading={loading}
    itemsToShow={6}
  />

  // Show user search
  <SearchSuggestions
    searchSuggestions={searchSuggestions}
    loading={loading}
    searchFor={stateSearch.term}
  />

  // Limit the number of suggestion and customizate texts
  <SearchSuggestions
    searchSuggestions={searchSuggestions}
    loading={loading}
    itemsToShow={6}
    searchFor={stateSearch.term}
    searchForText="Custom search text"
    titleText='Custom title text'
    showMoreSuggestionsText='Show more custom text'
    showLessSuggestionsText='Show less custom text'
  />

  // All props to apply
  <SearchSuggestions
    searchSuggestions={searchSuggestions}
    loading={loading}
    itemsToShow={6}
    searchFor={stateSearch.term}
    loadingText="Custom loading text"
    searchForText="Custom search text"
    titleText='Custom title text'
    showMoreSuggestionsText='Show more custom text'
    showLessSuggestionsText='Show less custom text'
    searchForStyle={{...}}
    searchForTermStyle={{...}}
    titleStyle={{...}}
    allSuggestionsContainerStyle={{...}}
    suggestionLinkStyle={{...}}
    suggestionLinkHoveredStyle={{...}}
    buttonStyle={{...}}
    buttonHoveredStyle={{...}}
  />
)

OBS: Exist more one prop, its responsable for alterate the default comportment to search (urlSearch). See the table Main Props if you need it.

Pre-defined classes

The SearchSuggestions can be fully customized from props. But if you want something even more specific, you can use the predefined classes. Are they:

• suggestions-main-container (the outermost level of SearchSuggestions component);
• suggestion-search_for (text for presentation user search - generated from the prop searchFor)
• suggestion-search_for-term (term of user search, inside the presentation text - generated from the prop searchFor);
• suggestions-all_suggestions-container (container of all suggestions);
• suggestions-loading (loading text when the request is in progress);
• suggestion-link (container of each suggestion);
• suggestion-button-container (the container of button to show/hide suggestions - generated from the prop itemsToShow);
• suggestion-button (the button to show/hide suggestions - generated from the prop itemsToShow).

Props Reference

Main Props

All props are optional, except searchSuggestions and loading

| Prop | Type | Default | Description | | :----------------------------: | :-----------------------: | :---------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------: | | searchSuggestions | Array<{term: string}> | | Array of suggestions (use the query and component previouslly created in Pre-Installation) | | loading | boolean | | Show text when the request is in progress | | loadingText | string | "Carregando sugestões..." | Text to show when loading is true | | searchFor | string | | Show the presentation for user search | | searchForText | string | "Você pesquisou por " | Sets the quantity of suggestions to show | | itemsToShow | number | | Sets the quantity of suggestions to show | | titleText | string | "Ver por interesse:" | Sets the text of title | | showMoreSuggestionsText | string | "Ver todas as sugestões" | Sets the text of "show more suggestions" button | | showLessSuggestionsText | string | "Ocultar algumas sugestões" | Sets the text of "show less suggestions" button | | urlSearch | string | "/s/?q={{term}}&sort=score_desc&page=0" | Sets the base url to make searchs, change only if you need. Please use this format: "customUrlTotest/{{term}}/search" | | searchForStyle | object as CSSProperties | | Sets the style of user searh term | | searchForTermStyle | object as CSSProperties | | Sets the style of user searh presentation | | titleStyle | object as CSSProperties | | Sets the style of title text | | allSuggestionsContainerStyle | object as CSSProperties | | Sets the style of all suggestions container | | suggestionLinkStyle | object as CSSProperties | | Sets the style of link inside the suggestion | | suggestionLinkHoveredStyle | object as CSSProperties | | Sets the style of link inside the suggestion when in hover | | buttonStyle | object as CSSProperties | | Sets the style of button to show/hide suggestions | | buttonHoveredStyle | object as CSSProperties | | Sets the style of button to show/hide suggestions when in hover |

Examples

Default

const ShowSearchSuggestions = () => {
  ...
  return (
    <SearchSuggestions
      searchSuggestions={searchSuggestions}
      loading={loading}
    />
  )
}

Limit Suggestions

const ShowSearchSuggestions = () => {
  ...
  return (
    <SearchSuggestions
      loading={loading}
      searchSuggestions={mockSearchSuggestions}
      itemsToShow={6}
    />
  )
}

User search

const ShowSearchSuggestions = () => {
  ...
  return (
    <SearchSuggestions
      loading={loading}
      searchSuggestions={mockSearchSuggestions}
      itemsToShow={6}
      searchFor={stateSearch.term}
    />
  )
}

Custom Texts

const ShowSearchSuggestions = () => {
  ...
  return (
    <SearchSuggestions
      searchSuggestions={searchSuggestions}
      loading={loading}
      itemsToShow={6}
      searchFor={stateSearch.term}
      searchForText='Custom search text'
      titleText='Custom Title'
      showMoreSuggestionsText='Show more custom text'
      showLessSuggestionsText='Show less custom text'
    />
  )
}

Custom Styles

const ShowSearchSuggestions = () => {
  ...
  return (
    <SearchSuggestions
      searchSuggestions={searchSuggestions}
      loading={loading}
      itemsToShow={6}
      searchFor={stateSearch.term}
      searchForStyle={{
        color: 'green',
        fontSize: '30px',
      }}
      searchForTermStyle={{
        color: 'red',
        fontSize: '30px',
      }}
      titleStyle={{
        color: 'red',
        textDecoration: 'underline',
        textAlign: 'center',
      }}
      allSuggestionsContainerStyle={{
        display: 'grid',
        justifyContent: 'center',
        gap: '5px 0',
        padding: 'unset',
      }}
      suggestionLinkStyle={{
        border: '2px solid red',
        background: 'blue',
        color: 'red',
      }}
      suggestionLinkHoveredStyle={{
        background: 'red',
        color: 'blue',
      }}
      buttonStyle={{
        background: 'red',
        textDecoration: 'overline',
        border: '2px solid yellow',
      }}
    />
  )
}