diff --git a/CHANGELOG.md b/CHANGELOG.md index 02aa7f827..a328d00be 100644 --- 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 +- `sponsoredProducts` query to the PLP. + ## [3.124.1] - 2023-07-21 ### Fixed diff --git a/react/SearchContent.js b/react/SearchContent.js index 28a8d7c4e..38e234518 100644 --- a/react/SearchContent.js +++ b/react/SearchContent.js @@ -9,7 +9,15 @@ import { const SearchContent = () => { const { searchQuery, showFacets, lazyItemsRemaining } = useSearchPage() const { mobileLayout, showContentLoader } = useSearchPageState() - const products = path(['data', 'productSearch', 'products'], searchQuery) + + const searchProducts = + path(['data', 'productSearch', 'products'], searchQuery) || [] + + const sponsoredProducts = + path(['data', 'sponsoredProducts'], searchQuery) || [] + + const products = searchProducts.concat(sponsoredProducts) + const redirect = path(['data', 'productSearch', 'redirect'], searchQuery) /* No need to show the spinner if it is loading because diff --git a/react/components/SearchQuery.js b/react/components/SearchQuery.js index 39ee1104a..9e27434ab 100644 --- a/react/components/SearchQuery.js +++ b/react/components/SearchQuery.js @@ -4,6 +4,7 @@ import { useRuntime } from 'vtex.render-runtime' import productSearchQuery from 'vtex.store-resources/QueryProductSearchV3' import searchMetadataQuery from 'vtex.store-resources/QuerySearchMetadataV2' import facetsQuery from 'vtex.store-resources/QueryFacetsV2' +import sponsoredProductsQuery from 'vtex.store-resources/QuerySponsoredProducts' import { equals } from 'ramda' import { @@ -143,7 +144,12 @@ const useCorrectSearchStateVariables = ( return result } -const useQueries = (variables, facetsArgs, price) => { +const useQueries = ( + variables, + facetsArgs, + price, + sponsoredProductsBehavior = 'skip' +) => { const { getSettings, query: runtimeQuery } = useRuntime() const isLazyFacetsFetchEnabled = getSettings('vtex.store')?.enableFiltersFetchOptimization @@ -152,6 +158,14 @@ const useQueries = (variables, facetsArgs, price) => { variables, }) + const { data: { sponsoredProducts } = [] } = useQuery( + sponsoredProductsQuery, + { + variables, + skip: sponsoredProductsBehavior === 'skip', + } + ) + const { refetch: searchRefetch, loading: searchLoading, @@ -241,6 +255,7 @@ const useQueries = (variables, facetsArgs, price) => { sampling: facets?.sampling, }, searchMetadata, + sponsoredProducts, }, productSearchResult, refetch, @@ -268,6 +283,7 @@ const SearchQuery = ({ searchState: searchStateQuery, lazyItemsQuery: lazyItemsQueryProp, __unstableProductOriginVtex, + sponsoredProductsBehavior, }) => { const [selectedFacets, fullText] = buildSelectedFacetsAndFullText( query, @@ -388,7 +404,7 @@ const SearchQuery = ({ productSearchResult, facetsLoading, fetchMore, - } = useQueries(variables, facetsArgs, priceRange) + } = useQueries(variables, facetsArgs, priceRange, sponsoredProductsBehavior) const redirectUrl = data && data.productSearch && data.productSearch.redirect