@W-17643479@ Add page meta data to search results and product pages

[vcua-mobify]

SCAPI products and search results can now return page meta tags that have been configured in Business Manager.

This PR updates the PDP and PLP to include any page meta data that is available.

Testing the changes:
Start the app

(Note: The meta tags may appear before or after the style tags so you may want to check both locations)
Search:
Search for a product (ie. shirt)
In dev tools, view the network request and see 'pageMetaTags` is included in the search results
View the HTML header and see that the page meta tags have been added

Category:
Navigate to a category page
In dev tools, view the network request and see 'pageMetaTags` is included in the search results
View the HTML header and see that the page meta tags have been added

Product detail:
Navigate to a PDP
In dev tools, view the network request and see 'pageMetaTags` is included in the product data
View the HTML header and see that the page meta tags have been added

[adamraya]

Is there a scenario where pageMetaTags is included in the response but is empty, and we would want to fall back to pageDescription?

Suggested change

	{product?.pageMetaTags ? (
	{product?.pageMetaTags?.length ? (

[vcua-mobify]

I don't think it will ever be empty (the PDP meta data is auto generated based on other properties of the product so I think there'll always be something) but having extra safety is good so I'll add this change.

[adamraya]

Similarly, I think we should also consider the scenario where the pageMetaTags does not include a description key. In that case, the code will fall back to using the pageDescription.

Suggested change

	{product?.pageMetaTags ? (
	// description is one of the page meta tags returned for products
	// and this is the same as product?.pageDescription
	product.pageMetaTags?.map((pageMetaTag) => {
	const name = pageMetaTag.id
	const content = pageMetaTag.value
	return <meta name={name} content={content} key={name} />
	})
	) : (
	<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} />

[vcua-mobify]

My understanding is that the description meta tag is generated from the product description so they will always be the same value. But I can add this fallback just in case.

[adamraya]

Should the meta title be consistent with the content of the <title> tag, or default to product.pageTitle if the meta title is not provided?

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

Line 458 in eb7121f

<title>{product?.pageTitle}</title>

[vcua-mobify]

Unlike with description, the title meta tag and page title do appear to be different. (It seems that the title meta tag is generated based on the page title, the price, and the site id?)

I think using the page title as the title is more straightforward as what you enter in BM is what you'll get with no extras added.

[adamraya]

Thanks for addressing edge cases. +1 Looks good to me.

[joeluong-sfcc]

LGTM, was able to manually confirm that both PDP and PLP SCAPI calls include the page_meta_tags in the expand query parameter, and that the data from the pageMetaTags property in the response is able to be found in the meta tags on the DOM