Merge pull request #17 from vtex-apps/bugfix/exito-duplicated-products

Bugfix/exito duplicated products

CHANGELOG.md

@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Changed
+
+- Page is now a state instead of being defined by `from` and `too`
+
+### Added
+
+- GA documentation
+
 ## [0.4.2] - 2020-01-09
 
 ### Added

docs/README.md

@@ -14,6 +14,7 @@ a more complete search experience.
   - [Enhanced Search Result](#enhanced-search-result)
   - [Plug & Play](#plug--play)
   - [Catalog Integration](#catalog-integration)
+  - [Google Analytics Configuration](#google-analytics-configuration)
 - [Blocks API](#blocks-api)
   - [Configuration](#configuration)
 - [Troubleshooting](#troubleshooting)
@@ -196,6 +197,14 @@ http://api.biggylabs.com.br/track-api/v2/affiliate
 If you end up having any questions about this step, feel free to send an e-mail to `[email protected]`
 with the subject `[YOUR STORE] Search App - Catalog Integration`.
 
+### Google Analytics Configuration
+
+Our search engine uses `_query` as the querystring for the search term. If you want to track the search in GA you need to register it.
+
+Inside Google Analytics, go to Admin → View → View Settings.  Then, on the Site Search Settings block, add a new parameter called `_query` into Query Parameter input. Query Parameter field accepts up to 5 different parameters.
+
+![image](https://user-images.githubusercontent.com/40380674/71663408-de09fd00-2d33-11ea-96bb-f9c6e48312a8.png)
+
 ## Blocks API
 
 When implementing this app as a block, various inner blocks may be available.

react/components/SearchQuery.js

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { useQuery } from "react-apollo";
 import PropTypes from "prop-types";
 import { path, pathOr, isEmpty, reject } from "ramda";
@@ -21,6 +22,8 @@ const SearchQuery = ({
   attributePath,
   variables,
 }) => {
+  const [page, setPage] = useState(1);
+
   const searchResult = useQuery(searchResultQuery, {
     variables,
     ssr: false,
@@ -36,7 +39,7 @@ const SearchQuery = ({
 
   const products = path(["data", "searchResult", "products"], searchResult);
 
-  const fetchMore = makeFetchMore(searchResult.fetchMore, variables.count);
+  const fetchMore = makeFetchMore(searchResult.fetchMore, page, setPage);
   const recordsFiltered = pathOr(
     0,
     ["data", "searchResult", "total"],

react/utils/compatibility-layer.ts

@@ -19,12 +19,10 @@ type FetchMore = (options: FetchMoreOptions) => Promise<any>;
  */
 export const makeFetchMore = (
   fetchMore: FetchMore,
-  maxItemsPerPage: number,
+  page: number,
+  setPage: (page: number) => void,
 ): FetchMore => async ({ variables, updateQuery = () => {} }) => {
-  const { to } = variables;
-  const page = variables.page
-    ? variables.page
-    : Math.floor(to / maxItemsPerPage) + 1;
+  setPage(page + 1);
 
   await fetchMore({
     updateQuery: makeUpdateQuery(page),