Part 2: Wildcard Pages with Content SDK: Item Resolver
Learn how to create dynamic wildcard pages in Sitecore XM Cloud using the Content SDK Item Resolver. This guide walks through handling flexible URL structures, resolving route data dynamically, and integrating GraphQL queries for context-driven page rendering.
Intro
Picking up from the custom sitemap work in Part 1, this walkthrough shows how to turn those /shop/{product} URLs into fully fledged product detail pages backed by Sitecore. The goal: use a wildcard item in Sitecore, have the Content SDK resolve it, and hydrate downstream components with product data pulled from the middleware. This way, we can use the product data gathered from an API and serve it to child components rendered onto the page.
Step 1: Create the wildcard detail route
- In your XM content tree, add a child under
/sitecore/content/<site>/Home/shopnamed ,*(or your preferred wildcard token) using the same template as your product detail page. - Set Layout/Presentation as usual so the rendering tree mirrors a normal detail item.
- This item will handle any
/shop/{slug}request once the SDK rewrites the path.
Expose product data via the middleware
I created a generated list of 10 products for demo purposes but normally this would come from whichever commerce product you choose shuch as Order Cloud.
- ProductsMiddleware now serves GET
/api/productsand GET/api/products?name={slug}returning{ products: Product[] }. ProductExample.tsxreadsCONSTANTS.CONTEXT.PRODUCT_DETAILfromclientData, so any page that sets that value can surface rich product UI.
Teach the Sitecore client to hydrate products
With the wildcard item in place, extend the custom Sitecore client so /shop routes lookup the product before loading the page. The snippet below lives in src/lib/client/sitecore-client.ts
Example Usage in a Component
Components can now read that product directly from context. src/components/demo-4/ProductExample.tsx demonstrates a full product detail card without any extra fetches:
Because the Sitecore client already performed the lookup, ProductExample stays purely presentational and can be dropped anywhere on the wildcard page’s rendering tree.
Another Example for Metadata
The same hydrated product powers page-level metadata. src/sub-components/demo-4/MetaLinks.tsx checks for the product in context and emits product-specific tags:
Drop MetaLinks into the wildcard item’s presentation details and every product page inherits rich Open Graph and product schema tags without custom authoring per item. This is especially useful for Sitemap crawlers for Search Engines such as Coveo
Key moves:
- Intercept getPage whenever the incoming URL starts with /shop.
- Pull the slug, call the commerce middleware, and short-circuit with null to trigger a 404 if the product is missing.
- Ask Sitecore for
/shop/,-w-,—the wildcard route—so the rendering tree stays consistent with authoring expectations. - Attach the product JSON to clientData so any layout component can subscribe to it (in this repo, ProductExample does).
Wire it up in Next.js
- Components like ProductExample should be added to the wildcard item’s rendering layout. They can now render titles, media, price, and reviews pulled live from clientData.
Testing the flow
- Start the Next.js app and visit /shop/aurora-bamboo-desk-lamp.
- The sitemap entry ensures the link exists.
- IdkSitecoreClient finds the product by slug, injects it into the page, and the React component renders the full card.
Conclusion
In a handful of touches—middleware, Sitecore client, and two components—we turned the sitemap links into fully hydrated product pages. Authors keep working with a single wildcard item, while the Content SDK handles the rest. As always, you can view the code sample here on my Public GitHub Profile. Happy Coding!
Made in React Bricks