From 084e49803c5cc5831013b749a151f286489d9b29 Mon Sep 17 00:00:00 2001 From: Felipe Sales Date: Wed, 8 Jan 2025 11:53:42 -0300 Subject: [PATCH 1/6] Add sku info to --- react/ProductOpenGraph.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/react/ProductOpenGraph.tsx b/react/ProductOpenGraph.tsx index b3e69d8..e6caaa4 100644 --- a/react/ProductOpenGraph.tsx +++ b/react/ProductOpenGraph.tsx @@ -67,6 +67,9 @@ function ProductOpenGraph() { selectedItem ? { property: 'product:sku', content: selectedItem.itemId } : null, + selectedItem + ? { property: 'product:retailer_part_no', content: selectedItem.itemId } // Used in the Synerise integration + : null, { property: 'product:condition', content: 'new' }, { property: 'product:brand', content: product.brand }, { property: 'product:retailer_item_id', content: product.productReference }, From d9c915505b0761a3489acc46a5134121bf03c467 Mon Sep 17 00:00:00 2001 From: Felipe Sales Date: Wed, 8 Jan 2025 12:02:33 -0300 Subject: [PATCH 2/6] Fix lint --- react/ProductOpenGraph.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/react/ProductOpenGraph.tsx b/react/ProductOpenGraph.tsx index e6caaa4..32c4988 100644 --- a/react/ProductOpenGraph.tsx +++ b/react/ProductOpenGraph.tsx @@ -21,6 +21,7 @@ interface MetaTag { } function ProductOpenGraph() { + const { disableOffers } = useAppSettings() const productContext = useContext(ProductContext) as ProductContext const runtime = useRuntime() as RenderContext const hasValue = productContext?.product @@ -75,8 +76,8 @@ function ProductOpenGraph() { { property: 'product:retailer_item_id', content: product.productReference }, { property: 'product:price:currency', content: `${currency}` }, ...productImage(selectedItem), + productPrice({ selectedItem, disableOffers }), productAvailability(selectedItem), - productPrice(selectedItem), ].filter(Boolean) as MetaTag[] return ( @@ -114,8 +115,13 @@ function productAvailability(selectedItem?: SKU): MetaTag { return { property: 'product:availability', content: `${availability}` } } -function productPrice(selectedItem?: SKU): MetaTag | null { - const { disableOffers } = useAppSettings() +function productPrice({ + selectedItem, + disableOffers, +}: { + selectedItem?: SKU + disableOffers: boolean +}): MetaTag | null { const seller = selectedItem?.sellers.find( ({ commertialOffer }) => commertialOffer.AvailableQuantity > 0 ) From 5e31f261b8bbc2fe9be95b7b045c428b4049aef2 Mon Sep 17 00:00:00 2001 From: Felipe Sales Date: Wed, 8 Jan 2025 12:09:03 -0300 Subject: [PATCH 3/6] Add the product categories to the OG tags --- react/ProductOpenGraph.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/react/ProductOpenGraph.tsx b/react/ProductOpenGraph.tsx index 32c4988..b4e8e3d 100644 --- a/react/ProductOpenGraph.tsx +++ b/react/ProductOpenGraph.tsx @@ -71,10 +71,14 @@ function ProductOpenGraph() { selectedItem ? { property: 'product:retailer_part_no', content: selectedItem.itemId } // Used in the Synerise integration : null, + { property: 'product:retailer_item_id', content: product.productReference }, { property: 'product:condition', content: 'new' }, { property: 'product:brand', content: product.brand }, - { property: 'product:retailer_item_id', content: product.productReference }, { property: 'product:price:currency', content: `${currency}` }, + ...product.categories.map(category => ({ + property: 'product:category', + content: category, + })), ...productImage(selectedItem), productPrice({ selectedItem, disableOffers }), productAvailability(selectedItem), From 4407fb152b3f21b8fc764b98fbc6b87ed18078ae Mon Sep 17 00:00:00 2001 From: Felipe Sales Date: Wed, 8 Jan 2025 12:15:30 -0300 Subject: [PATCH 4/6] Update changelog --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6252203..cef1aea 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 + +- `product:retailer_part_no` and `product:category` to the ProductOpenGraph. + ## [1.3.0] - 2024-02-09 ### Added From d3454c579a1fd6250da7049a9edf60ad064a9439 Mon Sep 17 00:00:00 2001 From: Felipe Sales Date: Wed, 8 Jan 2025 12:23:28 -0300 Subject: [PATCH 5/6] Fix tests --- react/ProductOpenGraph.tsx | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/react/ProductOpenGraph.tsx b/react/ProductOpenGraph.tsx index b4e8e3d..c1bc1f7 100644 --- a/react/ProductOpenGraph.tsx +++ b/react/ProductOpenGraph.tsx @@ -5,7 +5,7 @@ import { RenderContext, canUseDOM, } from 'vtex.render-runtime' -import { ProductContext, SKU } from 'vtex.product-context' +import { ProductContext, SKU, Product } from 'vtex.product-context' import useAppSettings from './hooks/useAppSettings' @@ -75,10 +75,7 @@ function ProductOpenGraph() { { property: 'product:condition', content: 'new' }, { property: 'product:brand', content: product.brand }, { property: 'product:price:currency', content: `${currency}` }, - ...product.categories.map(category => ({ - property: 'product:category', - content: category, - })), + ...productCategories(product), ...productImage(selectedItem), productPrice({ selectedItem, disableOffers }), productAvailability(selectedItem), @@ -144,4 +141,15 @@ function productPrice({ } } +function productCategories(product?: Product) { + if (!product || !product.categories || !product.categories.length) { + return [null] + } + + return product.categories.map(category => ({ + property: 'product:category', + content: category, + })) +} + export default ProductOpenGraph From 6f354d1c6e197b363b31a3b479532209e77167bc Mon Sep 17 00:00:00 2001 From: Felipe Sales Date: Fri, 10 Jan 2025 09:29:52 -0300 Subject: [PATCH 6/6] Using product Id instead of skuId --- react/ProductOpenGraph.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react/ProductOpenGraph.tsx b/react/ProductOpenGraph.tsx index c1bc1f7..188c645 100644 --- a/react/ProductOpenGraph.tsx +++ b/react/ProductOpenGraph.tsx @@ -69,7 +69,7 @@ function ProductOpenGraph() { ? { property: 'product:sku', content: selectedItem.itemId } : null, selectedItem - ? { property: 'product:retailer_part_no', content: selectedItem.itemId } // Used in the Synerise integration + ? { property: 'product:retailer_part_no', content: product.productId } // Used in the Synerise integration : null, { property: 'product:retailer_item_id', content: product.productReference }, { property: 'product:condition', content: 'new' },