@W-17643479@ Add page meta data to search results and product pages (#2282)

* Add page meta data to search results and product pages

* Changelog

* Apply suggestions

---------

Signed-off-by: vcua-mobify <47404250+vcua-mobify@users.noreply.github.com>

Author: vcua-mobify

packages/template-retail-react-app/CHANGELOG.md

@@ -1,6 +1,7 @@
 ## v6.1.0-dev (Feb 18, 2025)
 
 - Fix hreflang alternate links [#2269](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2269)
+- PDP / PLP: Add page meta data tags that have been defined in BM [#2232](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2232)
 
 ## v6.0.0 (Feb 18, 2025)
 

packages/template-retail-react-app/app/pages/product-detail/index.jsx

@@ -99,7 +99,8 @@ const ProductDetail = () => {
                     'prices',
                     'variations',
                     'set_products',
-                    'bundled_products'
+                    'bundled_products',
+                    'page_meta_tags'
                 ],
                 allImages: true
             }
@@ -455,7 +456,15 @@ const ProductDetail = () => {
         >
             <Helmet>
                 <title>{product?.pageTitle}</title>
-                <meta name="description" content={product?.pageDescription} />
+                {product?.pageMetaTags?.length > 0 &&
+                    product.pageMetaTags.map(({id, value}) => (
+                        <meta name={id} content={value} key={id} />
+                    ))}
+                {/* Fallback for description if not included in pageMetaTags */}
+                {!product?.pageMetaTags?.some((tag) => tag.id === 'description') &&
+                    product?.pageDescription && (
+                        <meta name="description" content={product.pageDescription} />
+                    )}
             </Helmet>
 
             <Stack spacing={16}>

packages/template-retail-react-app/app/pages/product-list/index.jsx

@@ -159,7 +159,14 @@ const ProductList = (props) => {
                 perPricebook: true,
                 allVariationProperties: true,
                 allImages: true,
-                expand: ['promotions', 'variations', 'prices', 'images', 'custom_properties'],
+                expand: [
+                    'promotions',
+                    'variations',
+                    'prices',
+                    'images',
+                    'page_meta_tags',
+                    'custom_properties'
+                ],
                 refine: _refine
             }
         },
@@ -411,6 +418,9 @@ const ProductList = (props) => {
                 <title>{category?.pageTitle ?? searchQuery}</title>
                 <meta name="description" content={category?.pageDescription ?? searchQuery} />
                 <meta name="keywords" content={category?.pageKeywords} />
+                {productSearchResult?.pageMetaTags?.map(({id, value}) => {
+                    return <meta name={id} content={value} key={id} />
+                })}
             </Helmet>
             {showNoResults ? (
                 <EmptySearchResults searchQuery={searchQuery} category={category} />