用途：这是 Saleor storefront 中商品详情页（PDP）的开发技能，适用于修改 PDP 布局或组件、处理图片画廊/轮播、理解缓存与流式渲染架构、调试加入购物车问题、新增商品信息区块。变体选择逻辑另见 variant-selection 技能。
主要能力与架构：page.tsx 为服务端组件，左侧 ProductGallery（客户端）支持移动端滑动、桌面端箭头与缩略图，并做 LCP 优化；右侧商品信息列中，商品名与 ProductAttributes 为静态内容，VariantSection 通过 Suspense 流式加载并读取 searchParams，因此是动态的。商品数据由 getProductData() 使用 "use cache" 缓存 5 分钟，并带 cacheTag 支持按需失效；画廊图片由缓存数据派生，价格属于变体区块不缓存。
数据流与用法：URL 是变体选择的唯一来源，如 /us/products/blue-shirt?variant=abc123。切换变体时调用 router.push("?variant=xyz789")，页面按新 searchParams 重渲染，画廊显示对应变体图片。加购通过 <form action={addToCart}> 触发 Server Action，创建或更新 checkout 后 revalidatePath("/cart")，购物车抽屉随之更新，useFormStatus() 显示提交中状态。
错误处理与限制：变体区块外层需同时包 ErrorBoundary 与 Suspense，出错时仍保留图片、名称与描述，并显示“Unable to load options. Try again.”。禁止把服务端组件函数传给客户端组件，禁止在缓存函数中读取 searchParams，禁止用 useState 管理变体选择，禁止用索引作为图片 key。GraphQL 变更后需运行 pnpm run generate；测试命令为 pnpm test src/ui/components/pdp。按需失效示例：curl "/api/revalidate?tag=product:my-product-slug"。其余未在资料中说明的收费、平台与效果暂未提供。