From dc7d8635064a58f7a71b29ce3ea1f87ecf2a5209 Mon Sep 17 00:00:00 2001 From: Henrique Date: Wed, 3 Jul 2024 19:11:16 -0300 Subject: [PATCH 1/2] feat: pass placement to product summary and query --- CHANGELOG.md | 4 ++++ react/components/GalleryLayoutItem.tsx | 9 ++++++-- react/components/SearchQuery.js | 30 +++++++++++++++++--------- 3 files changed, 31 insertions(+), 12 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b559dde62..a9eb88d53 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [Unreleased] +### Added + +- Pass `placement` to product search query and product-summary. + ## [3.132.2] - 2024-05-20 ### Fixed diff --git a/react/components/GalleryLayoutItem.tsx b/react/components/GalleryLayoutItem.tsx index 24c2fb47d..4b931717f 100644 --- a/react/components/GalleryLayoutItem.tsx +++ b/react/components/GalleryLayoutItem.tsx @@ -1,8 +1,9 @@ import type { ComponentType } from 'react' -import React, { useMemo, useCallback, memo } from 'react' -import ProductSummary from 'vtex.product-summary/ProductSummaryCustom' +import React, { memo, useCallback, useMemo } from 'react' import { usePixel } from 'vtex.pixel-manager' +import ProductSummary from 'vtex.product-summary/ProductSummaryCustom' import { useSearchPage } from 'vtex.search-page-context/SearchPageContext' +import { useRuntime } from 'vtex.render-runtime' import type { Product } from '../Gallery' import type { PreferredSKU } from '../GalleryLayout' @@ -29,6 +30,9 @@ const GalleryLayoutItem: React.FC = ({ }) => { const { push } = usePixel() const { searchQuery } = useSearchPage() + const { + route: { routeId }, + } = useRuntime() const product = useMemo( () => ProductSummary.mapCatalogProductToProductSummary(item, preferredSKU), @@ -61,6 +65,7 @@ const GalleryLayoutItem: React.FC = ({ actionOnClick={handleClick} listName={listName} position={position} + placement={routeId} /> ) } diff --git a/react/components/SearchQuery.js b/react/components/SearchQuery.js index f57a2ef83..931c663eb 100644 --- a/react/components/SearchQuery.js +++ b/react/components/SearchQuery.js @@ -1,20 +1,20 @@ -import { useMemo, useRef, useCallback, useEffect, useState } from 'react' +import { canUseDOM } from 'exenv' +import { equals } from 'ramda' +import { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { useQuery } from 'react-apollo' import { useRuntime } from 'vtex.render-runtime' +import facetsQuery from 'vtex.store-resources/QueryFacetsV2' import productSearchQuery from 'vtex.store-resources/QueryProductSearchV3' import searchMetadataQuery from 'vtex.store-resources/QuerySearchMetadataV2' -import facetsQuery from 'vtex.store-resources/QueryFacetsV2' -import { equals } from 'ramda' -import { canUseDOM } from 'exenv' +import { FACETS_RENDER_THRESHOLD } from '../constants/filterConstants' +import useRedirect from '../hooks/useRedirect' +import useSession from '../hooks/useSession' import { + buildQueryArgsFromSelectedFacets, buildSelectedFacetsAndFullText, detachFiltersByType, - buildQueryArgsFromSelectedFacets, } from '../utils/compatibilityLayer' -import { FACETS_RENDER_THRESHOLD } from '../constants/filterConstants' -import useRedirect from '../hooks/useRedirect' -import useSession from '../hooks/useSession' function getCookie(cname) { if (!canUseDOM) { @@ -169,7 +169,12 @@ const useCorrectSearchStateVariables = ( } const useQueries = (variables, facetsArgs, price) => { - const { getSettings, query: runtimeQuery } = useRuntime() + const { + getSettings, + query: runtimeQuery, + route: { routeId }, + } = useRuntime() + const settings = getSettings('vtex.store') const isLazyFacetsFetchEnabled = settings?.enableFiltersFetchOptimization @@ -177,8 +182,13 @@ const useQueries = (variables, facetsArgs, price) => { const productSearchResult = useQuery(productSearchQuery, { variables: { ...variables, - showSponsored: true, variant: getCookie('sp-variant'), + advertisementOptions: { + showSponsored: true, + sponsoredCount: 3, + advertisementPlacement: routeId, + repeatSponsoredProducts: true, + }, }, }) From 7a489553955ea73f55922e8f1dd18e9d252f3257 Mon Sep 17 00:00:00 2001 From: Henrique Date: Fri, 19 Jul 2024 14:38:06 -0300 Subject: [PATCH 2/2] fix: correct advertisement placement --- react/components/GalleryLayoutItem.tsx | 5 ----- react/components/SearchQuery.js | 8 ++------ 2 files changed, 2 insertions(+), 11 deletions(-) diff --git a/react/components/GalleryLayoutItem.tsx b/react/components/GalleryLayoutItem.tsx index 4b931717f..e196aea78 100644 --- a/react/components/GalleryLayoutItem.tsx +++ b/react/components/GalleryLayoutItem.tsx @@ -3,7 +3,6 @@ import React, { memo, useCallback, useMemo } from 'react' import { usePixel } from 'vtex.pixel-manager' import ProductSummary from 'vtex.product-summary/ProductSummaryCustom' import { useSearchPage } from 'vtex.search-page-context/SearchPageContext' -import { useRuntime } from 'vtex.render-runtime' import type { Product } from '../Gallery' import type { PreferredSKU } from '../GalleryLayout' @@ -30,9 +29,6 @@ const GalleryLayoutItem: React.FC = ({ }) => { const { push } = usePixel() const { searchQuery } = useSearchPage() - const { - route: { routeId }, - } = useRuntime() const product = useMemo( () => ProductSummary.mapCatalogProductToProductSummary(item, preferredSKU), @@ -65,7 +61,6 @@ const GalleryLayoutItem: React.FC = ({ actionOnClick={handleClick} listName={listName} position={position} - placement={routeId} /> ) } diff --git a/react/components/SearchQuery.js b/react/components/SearchQuery.js index 931c663eb..c710be21f 100644 --- a/react/components/SearchQuery.js +++ b/react/components/SearchQuery.js @@ -169,11 +169,7 @@ const useCorrectSearchStateVariables = ( } const useQueries = (variables, facetsArgs, price) => { - const { - getSettings, - query: runtimeQuery, - route: { routeId }, - } = useRuntime() + const { getSettings, query: runtimeQuery } = useRuntime() const settings = getSettings('vtex.store') @@ -186,7 +182,7 @@ const useQueries = (variables, facetsArgs, price) => { advertisementOptions: { showSponsored: true, sponsoredCount: 3, - advertisementPlacement: routeId, + advertisementPlacement: 'top_search', repeatSponsoredProducts: true, }, },