diff --git a/CHANGELOG.md b/CHANGELOG.md index b69b475c..49b55ee8 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/docs/README.md b/docs/README.md index e9abcb83..acc8b428 100644 --- a/docs/README.md +++ b/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 `biggy@vtex.com.br` 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. diff --git a/react/components/SearchQuery.js b/react/components/SearchQuery.js index 70cfdc56..3f46120d 100644 --- a/react/components/SearchQuery.js +++ b/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"], diff --git a/react/utils/compatibility-layer.ts b/react/utils/compatibility-layer.ts index 2ad3364c..e719d72d 100644 --- a/react/utils/compatibility-layer.ts +++ b/react/utils/compatibility-layer.ts @@ -19,12 +19,10 @@ type FetchMore = (options: FetchMoreOptions) => Promise; */ 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),