add sponsoredCount-prop

CHANGELOG.md

@@ -7,8 +7,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Removed
+- `sponsoredProductsBehavior` prop which is deprecated
+
 ### Added
 
+- `sponsoredCount` prop
 - Shipping filter on filters section
 
 ### Fixed

docs/README.md

@@ -148,6 +148,7 @@ Check all props to configure your search data in the table below:
 | `installmentCriteria` | `enum` | Defines which price should be displayed when different installments are available. Possible values are: `MAX_WITHOUT_INTEREST` (displays the maximum installment option with no interest attached to it) or `MAX_WITH_INTEREST` (displays the maximum installment option whether it has interest attached to it or not). | `"MAX_WITHOUT_INTEREST"` |
 | `excludedPaymentSystems` | `string` | List of payment systems that should not be considered when displaying the installment options to users. This prop configuration only works if the `installmentCriteria` prop was also declared. In case it was not, all available payment systems will be displayed regardless. | `undefined` |
 | `includedPaymentSystems` | `string` | List of payment systems that should be considered when displaying the installment options to users. This prop configuration only works if the `installmentCriteria` prop was also declared. In case it was not, all available payment systems will be displayed regardless.| `undefined` |
+| `sponsoredCount` | `number` | Maximum amount of sponsored products.| `3` |
 
 > ℹ️ Pagination does not display results after page 50. You can configure it to display more products per page using the prop `maxItemsPerPage` by increasing the quantity of products on each page.
 

react/components/SearchQuery.js

@@ -144,7 +144,7 @@ const useCorrectSearchStateVariables = (
   return result
 }
 
-const useQueries = (variables, facetsArgs, price) => {
+const useQueries = (variables, facetsArgs, price, sponsoredCount) => {
   const { getSettings, query: runtimeQuery } = useRuntime()
 
   const settings = getSettings('vtex.store')
@@ -157,7 +157,7 @@ const useQueries = (variables, facetsArgs, price) => {
       variant: getCookie('sp-variant'),
       advertisementOptions: {
         showSponsored: true,
-        sponsoredCount: 3,
+        sponsoredCount,
         advertisementPlacement: 'top_search',
         repeatSponsoredProducts: true,
       },
@@ -282,7 +282,7 @@ const SearchQuery = ({
   searchState: searchStateQuery,
   lazyItemsQuery: lazyItemsQueryProp,
   __unstableProductOriginVtex,
-  sponsoredProductsBehavior,
+  sponsoredCount = 3,
 }) => {
   const [selectedFacets, fullText] = buildSelectedFacetsAndFullText(
     query,
@@ -403,7 +403,7 @@ const SearchQuery = ({
     productSearchResult,
     facetsLoading,
     fetchMore,
-  } = useQueries(variables, facetsArgs, priceRange, sponsoredProductsBehavior)
+  } = useQueries(variables, facetsArgs, priceRange, sponsoredCount)
 
   const redirectUrl = data && data.productSearch && data.productSearch.redirect