Merge pull request #88 from gustavopvasconcellos/feature/suggestion-c…

…ustom-page

Suggestion custom page

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+- New `customPage` prop on `Suggestion`
+
 ## [1.3.1] - 2020-07-22
 
 ### Fixed

docs/Suggestions.md

@@ -17,6 +17,12 @@ Add the `search-suggestions` block to the `search-result-layout.desktop` or `sea
 }
 ```
 
+### Props
+
+| Prop name    | Type     | Description                                                                                                    | Default value |
+| ------------ | -------- | -------------------------------------------------------------------------------------------------------------- | ------------- |
+| `customPage` | `string` | Defines a custom page to the link of a suggestion. Example: `store.search.custom`. Defaults to `store.search`. |               |
+
 ## Customization
 
 In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).

react/components/Suggestions/index.tsx

@@ -1,19 +1,23 @@
-import React from "react";
+import React, { FC } from "react";
 import { Link } from "vtex.render-runtime";
 import styles from "./styles.css";
 import { FormattedMessage } from "react-intl";
 import searchSuggestionsQuery from "vtex.store-resources/QuerySearchSuggestions";
 import { useSearchPage } from "vtex.search-page-context/SearchPageContext";
 import { useQuery } from "react-apollo";
 
+interface SuggestionsProps {
+  customPage: string;
+}
+
 interface Suggestion {
   searches: {
     term: string;
     count: number;
   }[];
 }
 
-const Suggestions = () => {
+const Suggestions: FC<SuggestionsProps> = ({ customPage }) => {
   const {
     searchQuery: {
       variables: { fullText },
@@ -49,7 +53,11 @@ const Suggestions = () => {
           <li className={styles.suggestionsListItem} key={search.term}>
             <Link
               className={`${styles.suggestionsListLink} link f7`}
-              to={`/${search.term}?map=ft`}
+              page={customPage || "store.search"}
+              query="map=ft"
+              params={{
+                term: search.term,
+              }}
             >
               {search.term}
             </Link>