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
+24 −4
Merged

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

Show file tree
Hide file tree
Changes from all 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
13 changes: 11 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,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}>
Expand Down
12 changes: 11 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,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} />
Expand Down
Loading