Neti Pot Manufacturer

    @acctglobal/search-suggestions
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    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

    default

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

    Limit Suggestions

    limit suggestions limit suggestions 2

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

    User search

    user search

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

    Custom Texts

    custom texts custom texts 2

    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

    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',
          }}
        />
      )
    }

    Keywords

    none

    Install

    npm i @acctglobal/search-suggestions

    DownloadsWeekly Downloads

    196

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    118 kB

    Total Files

    55

    Last publish

    Collaborators

    • luiz.priolli
    • ricardo.freitas
    • fabioacct