Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vcua-mobify merged 5 commits into from
Feb 4, 2025
Merged

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

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
eb7121f
Add page meta data to search results and product pages
vcua-mobify Jan 31, 2025
73a2622
Changelog
vcua-mobify Jan 31, 2025
5af8ab4
Merge branch 'develop' into add-page-meta-tags
vcua-mobify Jan 31, 2025
0bdded1
Merge branch 'develop' into add-page-meta-tags
vcua-mobify Jan 31, 2025
5bc9c77
Apply suggestions
vcua-mobify Feb 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/template-retail-react-app/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@
- Replace transfer basket call with merge basket on checkout [#2138](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2138)
- [BUG] Fix images being fetced multiple times on Safari [#2223](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2223)
- Support Node 22 [#2218](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2218)

tags
- PDP / PLP: Add page meta data tags that have been defined in BM [#2232](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2232)

### Accessibility Improvements
- [a11y] Fix LinkList component to follow a11y practise [#2098])(https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2098)
Expand Down
15 changes: 13 additions & 2 deletions packages/template-retail-react-app/app/pages/product-detail/index.jsx
View file
Open in desktop
Copy link
Contributor

@adamraya adamraya Feb 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>

Copy link
Contributor Author

@vcua-mobify vcua-mobify Feb 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,8 @@ const ProductDetail = () => {
'prices',
'variations',
'set_products',
'bundled_products'
'bundled_products',
'page_meta_tags'
],
allImages: true
}
Expand Down Expand Up @@ -455,7 +456,17 @@ const ProductDetail = () => {
>
<Helmet>
<title>{product?.pageTitle}</title>
<meta name="description" content={product?.pageDescription} />
{product?.pageMetaTags ? (
Copy link
Contributor

@adamraya adamraya Feb 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 ? (

Copy link
Contributor Author

@vcua-mobify vcua-mobify Feb 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Screenshot 2025-02-03 at 3 29 33 PM

// 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} />
Copy link
Contributor

@adamraya adamraya Feb 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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} />

Copy link
Contributor Author

@vcua-mobify vcua-mobify Feb 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

)}
</Helmet>

<Stack spacing={16}>
Expand Down
14 changes: 13 additions & 1 deletion packages/template-retail-react-app/app/pages/product-list/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
},
Expand Down Expand Up @@ -411,6 +418,11 @@ const ProductList = (props) => {
<title>{category?.pageTitle ?? searchQuery}</title>
<meta name="description" content={category?.pageDescription ?? searchQuery} />
<meta name="keywords" content={category?.pageKeywords} />
{productSearchResult?.pageMetaTags?.map((pageMetaTag) => {
const name = pageMetaTag.id
const content = pageMetaTag.value
return <meta name={name} content={content} key={name} />
})}
</Helmet>
{showNoResults ? (
<EmptySearchResults searchQuery={searchQuery} category={category} />
Expand Down
Loading