Blog Slices — Developer Reference

Technical reference for developers working on blog product slices. For content editor instructions on creating blog posts in Prismic, see Creating Blog Content.

Overview

Blog content is managed through Prismic CMS and rendered by the Next.js frontend. Content editors create blog posts in Prismic, add slices (reusable content blocks) to the body, and the frontend hydrates those slices with live product data from the CardNexus API.

Blog Post Structure

Every blog post in Prismic has these fields:

Push Card

The push card appears in the blog sidebar on desktop. It’s a promotional card with a background image, foreground logo, and a link.

The push card only renders when the background_image is populated.

Available Slices

The blog post Slice Zone supports these slice types:

Product Slices

These slices embed live CardNexus product data into blog posts. They all follow the same pattern:

1. Content editor adds product IDs in Prismic
2. The product hydration system collects all product IDs from all slices on the page
3. Products are fetched in a single batch via product.getProducts
4. Each slice component reads from the shared product cache

How Product Hydration Works

The hydration code lives in apps/frontend/libs/marketing/prismic/product-hydration.ts. It scans each slice type and extracts product IDs:

• ProductHighlight: reads slice.primary.product_id
• ProductCarousel: reads slice.primary.products[].product_id
• Decklist: reads slice.primary.products[].product_id

The product query atoms live in apps/frontend/libs/marketing/prismic/product-queries.ts.

Finding Product IDs

Product IDs are MongoDB ObjectIds. You can find them by:

1. Navigating to a product on the CardNexus explore page
2. The ID is in the URL: /explore/[game]/[expansion]/[type]/[product-slug]-[PRODUCT_ID]
3. Or from the staging/production database directly

ProductHighlight Slice

Embeds a single product with full details. Has two variations.

Default Variation

Shows a product card with image, expansion info, attributes, pricing details, and a “See Product Page” link.

Prismic Fields:

Graph Variation

Shows a product card with a price history chart. Users can toggle between 1 day, 1 week, and 1 month periods.

Prismic Fields:

Same as default — product_id and caption.

How it works:

• The graph fetches price history via orpc.price.getProductPrices for both Standard and Foil finishes
• Period selection uses a Jotai atom (highlightPeriodAtom) to avoid full component re-renders
• The initial load triggers Suspense; subsequent period changes use unwrap in derived atoms for non-blocking updates
• Chart data is processed through fillMissingChartDays to create a continuous line even with sparse data

Component Structure:

ProductCarousel Slice

Displays a horizontal carousel of product cards with market pricing and trend indicators.

Prismic Fields:

Component Structure:

Pricing Logic:

All product cards use the same pricing resolution:

1. Check if product is a card (not sealed)
2. Prefer pricesByFinish.Standard
3. Fall back to the first available finish (e.g. foil-only cards)
4. Pass pricing through getEffectivePriceForMarketplace for the user’s marketplace

Decklist Slice

Displays a list of products with quantities, sorting, and a card image preview panel.

Prismic Fields:

Features:

• Sort dropdown — Sort by name, price (low/high), or default Prismic ordering
• Card preview — Hovering a row shows the card image on desktop (lg+)
• Product links — Clicking a row navigates to the product’s explore page
• Share links — Social share buttons (shares the blog post URL)
• Market price total — Sum of all card prices × quantities

Component Structure:

Adding a New Product Slice

If you need to create a new slice that embeds product data, follow this pattern:

Code Locations