Merge pull request #119 from vtex-apps/feature/custom-page-prop

add custompage prop
vtex-apps · Mar 11, 2021 · 96d620d · 96d620d
2 parents 8ba1135 + f0b11f6
commit 96d620d
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+- `customPage` prop to the `autocomplete-result-list.v2`.
+
 ## [2.5.0] - 2021-02-23
 
 ### Added

diff --git a/docs/Autocomplete.md b/docs/Autocomplete.md
@@ -44,6 +44,7 @@ Add `autocomplete-result-list.v2` into the blocks of a `search-bar`. We also rec
 | `customBreakpoints`           | [`CustomBreakpointsProp`](#custombreakpointsprop) | Defines a maximum number of suggested products by breakpoints                                                                                                                       | -             |
 | `__unstableProductOriginVtex` | `Boolean`                                         | You can use this property as `true` if any of your product-summary props come with a `null` value. This is because some product information does not come by default in the Search. | `false`       |
 | `simulationBehavior`          | `"skip"` or `"default"`                           | If you want faster searches and do not care about most up to date prices and promotions, use `"skip"` value.                                                                        | `default`     |
+| `customPage` | `string` | Defines a custom page to the link of a suggestion. Example: `store.search.custom` |  `store.search`
 
 #### ProductLayoutEnum
 

diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "search",
   "vendor": "vtex",
-  "version": "2.5.0",
+  "version": "2.6.0-beta.0",
   "title": "Search",
   "description": "Search components and functionality for VTEX IO.",
   "scripts": {

diff --git a/react/components/Autocomplete/components/ItemList/ItemList.tsx b/react/components/Autocomplete/components/ItemList/ItemList.tsx
@@ -14,6 +14,7 @@ interface ItemListProps {
   modifier?: string
   onItemHover?: (item: Item | AttributeItem) => void
   showTitleOnEmpty?: boolean
+  customPage?: string
 }
 
 interface ItemListState {
@@ -77,7 +78,10 @@ export class ItemList extends React.Component<ItemListProps> {
                 onBlur={() => this.handleMouseOut()}
               >
                 <Link
-                  to={item.link}
+                  page={this.props.customPage ?? 'store.search'}
+                  params={{
+                    term: item.value,
+                  }}
                   query="map=ft"
                   onClick={() => this.props.onItemClick(item.value, index)}
                   className={stylesCss.itemListLink}

diff --git a/react/components/Autocomplete/index.tsx b/react/components/Autocomplete/index.tsx
@@ -76,6 +76,7 @@ interface AutoCompleteProps {
     product: Product
     actionOnClick: () => void
   }>
+  customPage?: string
 }
 
 interface AutoCompleteState {
@@ -414,6 +415,7 @@ class AutoComplete extends React.Component<
           this.props.runtime.page,
           EventType.SearchSuggestionClick
         )}
+        customPage={this.props.customPage}
       />
     )
   }
@@ -439,6 +441,7 @@ class AutoComplete extends React.Component<
               this.props.runtime.page,
               EventType.TopSearchClick
             )}
+            customPage={this.props.customPage}
           />
         ) : null}
 
@@ -454,6 +457,7 @@ class AutoComplete extends React.Component<
               this.props.runtime.page,
               EventType.HistoryClick
             )}
+            customPage={this.props.customPage}
           />
         ) : null}
       </div>