[Example] Display product attributes to PLP

[cctina516]

Ticket: https://jira.corp.adobe.com/browse/ACCS-332

This PR uses an alpha package ("@dropins/storefront-product-discovery": "3.0.0-alpha21") for the product discovery drop-in that is currently in the code review queue. This PR serves as an implementation example for two capabilities for the Product Listing Page:

1. Displaying product attributes as badges on product cards using the ProductImage slot
2. Extending the GraphQL fragment via build.mjs to fetch additional product fields (e.g., lowStock) that aren't in the default payload

Test Instructions

Part 1: Display product attributes on PLP

1. Update the package.json to use the "@dropins/storefront-product-discovery": "3.0.0-alpha21" alpha package and run npm install
2. Review the example integration in blocks/product-list-page/product-list-page.js (line 157-163)

Part 2: Extending the GraphQL fragment via build.mjs

1. To fetch additional data not in the default payload, add an entry to build.mjs. Review the example integration in build.mjs
2. After pulling the changes, run npm install. This extends the ProductView fragment in storefront-product-discovery to include lowStock
3. Review the example integration in blocks/product-list-page/product-list-page.js (line 165-170)

Note

Please ignore files in scripts/__dropins__ as those are generated with npm install. To fetch additional data not in the default payload, please modify build.mjs.

Preview URL: https://plp-attributes--aem-boilerplate-commerce--hlxsites.aem.live/apparel

Test URLs:

• Before: https://main--aem-boilerplate-commerce--hlxsites.aem.live/
• After: https://plp-attributes--aem-boilerplate-commerce--hlxsites.aem.live/
  https://plp-attributes--aem-boilerplate-commerce--hlxsites.aem.live/apparel

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

• Re-run PSI checks
• Re-sync branch

Commits

• 36615f6 ✅ (latest)
• cd39613 ✅
• 99a2a19 ✅
• e569220 ✅

[aem-code-sync]

	Page	Scores	Audits	Google
📱	/
🖥️	/
📱	/apparel
🖥️	/apparel