pdp

Implement Product Detail Pages with server and client component orchestration.

1.5k|875|Updated Aug 20, 2021

Search Tags:#caching #ecommerce #gallery #error-boundaries #server-actions #variant #pdp

Ready to run

npx skills add https://github.com/saleor/storefront --skill pdp

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: pdp
Source: https://github.com/saleor/storefront/tree/main/.claude/skills/pdp
Command: npx skills add https://github.com/saleor/storefront --skill pdp

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

PDP architecture, image gallery, caching, and add-to-cart flow guidance to accelerate development and reliable debugging of product detail pages across channels.

Core Features & Use Cases

Structured PDP architecture: server+client components, gallery, and add-to-cart flow.
Robust data handling: caching strategies, Suspense, and ErrorBoundary integration to prevent full-page crashes.
Variant-aware visuals: variant-specific images and dynamic gallery behavior with URL-driven state.
Debug and optimization: guidance for LCP improvements, responsive behavior, and component composition.

Quick Start

Inspect the PDP architecture and start implementing the gallery, caching, and add-to-cart flow following the guide.

Frequently Asked Questions about pdp

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I structure server and client components for a product detail page?▼

Server and client component orchestration for a product detail page separates data fetching from interactive UI. Server components handle initial data and caching strategies, while client components manage variant selection and gallery state.

Why does my product image gallery crash when switching variants?▼

Variant images crash when gallery state is not synced with URL-driven parameters. Debugging variant-specific images requires dynamic gallery behavior tied to URL state and error boundaries to prevent full-page crashes.

How do I improve LCP performance on an ecommerce product detail page?▼

LCP performance on a product detail page improves by optimizing server component data fetching, applying caching strategies, and using Suspense for responsive image loading. Debugging LCP ensures faster storefront delivery.

What's the best way to handle errors in a PDP add-to-cart flow?▼

Handling errors in a PDP add-to-cart flow requires ErrorBoundary integration to prevent full-page crashes. Robust data handling combines server actions with error boundaries to isolate failures.

Can I use server actions for caching on an ecommerce product detail page?▼

Server actions support caching on an ecommerce product detail page by orchestrating data fetching with server components. Caching strategies ensure reliable data handling across the add-to-cart flow.

Do I need error boundaries to debug a PDP image gallery?▼

Error boundaries are necessary to debug a PDP image gallery because they prevent full-page crashes during dynamic visual updates. Variant-aware visuals require robust error handling to maintain gallery stability.