Merge pull request #637 from vtex-apps/feature/adserver

add sponsoredProducts query to the PLP

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

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

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