fix: add back eager pricing and variants

Author: blurrah

apps/docs/content/docs/anatomy/pages/pdp.mdx

@@ -14,6 +14,8 @@ The PDP runs under Next.js 16 Cache Components. Base product data is fetched thr
 
 The dynamic input is the selected option values in `searchParams`. The route starts the cached base-product read and a compact `getProductSelection()` request in parallel. Selection responses use `cache: "no-store"` so variant combinations do not consume persistent runtime-cache entries. `ProductDetailSection` receives both as promises and keeps variant-dependent regions in Suspense boundaries without creating a request waterfall.
 
+Suspense streaming is reserved for regions a selection can actually change. The base product carries exact signals that let everything else render in the prerendered shell: when `priceRange` and `compareAtPriceRange` bounds are equal (`hasUniformPricing`) the price renders eagerly, when `variantsCount` is `1` the option pickers and buy buttons render eagerly, and when `encodedVariantExistence` equals `encodedVariantAvailability` (`allVariantsInStock`) the buy-button fallback renders with real labels instead of placeholders. A simple product therefore ships its price and buy controls in the static HTML; only products with genuinely variant-dependent prices or stock stream those regions.
+
 ## Variant selection
 
 Variants are selected via option-name query parameters:

apps/template/components/product-detail/product-detail-section.tsx

@@ -15,12 +15,19 @@ import {
 } from "@/components/product-detail/product-media";
 import { ProductPrice } from "@/components/product-detail/product-price";
 import { ProductSchema } from "@/components/product-detail/schema";
+import { ShopLogo } from "@/components/product-detail/shop-logo";
 import { BreadcrumbSchema } from "@/components/schema/breadcrumb-schema";
 import { Skeleton } from "@/components/ui/skeleton";
 import { siteConfig } from "@/lib/config";
 import type { Locale } from "@/lib/i18n";
-import { getSharedImages, hasColorImagePartitioning, type ProductSelection } from "@/lib/product";
-import type { ProductDetails } from "@/lib/types";
+import {
+  computeSelection,
+  getSharedImages,
+  hasColorImagePartitioning,
+  type ProductSelection,
+} from "@/lib/product";
+import type { ProductDetails, ProductVariant } from "@/lib/types";
+import { cn } from "@/lib/utils";
 
 export function ProductDetailSection({
   productPromise,
@@ -161,39 +168,86 @@ async function ProductInfoArea({
   locale: Locale;
 }) {
   const { options, handle, title, featuredImage, descriptionHtml, availableForSale } = product;
+  // Selection can only change these regions when the data proves it can — otherwise
+  // they render eagerly so price and buy controls stay in the prerendered shell.
+  const singleVariant = product.variantsCount === 1;
+  const eagerSelection = singleVariant ? computeSelection(product) : null;
+  const allInStock = product.allVariantsInStock && availableForSale;
+  const uniformStock = product.allVariantsInStock || !availableForSale;
+  const t = uniformStock && !singleVariant ? await getTranslations("product") : null;
 
   return (
     <div className="grid gap-10 lg:sticky lg:top-20 lg:col-span-4">
       <div data-slot="product-info-header">
         <h1 className="font-semibold text-foreground tracking-tight text-3xl">{title}</h1>
-        <Suspense fallback={<div className="h-6" aria-hidden />}>
-          <ResolvedProductPrice selectionPromise={selectionPromise} locale={locale} />
-        </Suspense>
+        {product.hasUniformPricing ? (
+          <ProductPrice
+            amount={product.price.amount}
+            currencyCode={product.price.currencyCode}
+            compareAtAmount={product.compareAtPrice?.amount}
+            locale={locale}
+          />
+        ) : (
+          <Suspense fallback={<div className="h-6" aria-hidden />}>
+            <ResolvedProductPrice selectionPromise={selectionPromise} locale={locale} />
+          </Suspense>
+        )}
       </div>
 
-      <Suspense fallback={<ProductInfoOptions options={options} hideImages />}>
-        <ResolvedProductInfoOptions selectionPromise={selectionPromise} />
-      </Suspense>
+      {eagerSelection ? (
+        <ProductInfoOptions options={eagerSelection.options} />
+      ) : (
+        <Suspense fallback={<ProductInfoOptions options={options} hideImages />}>
+          <ResolvedProductInfoOptions selectionPromise={selectionPromise} />
+        </Suspense>
+      )}
 
-      <Suspense fallback={null}>
-        <ResolvedBundleRelationships selectionPromise={selectionPromise} />
-      </Suspense>
+      {eagerSelection ? (
+        <BundleRelationships selectedVariant={eagerSelection.selectedVariant} />
+      ) : (
+        <Suspense fallback={null}>
+          <ResolvedBundleRelationships selectionPromise={selectionPromise} />
+        </Suspense>
+      )}
 
-      <Suspense fallback={<BuyButtonsFallback />}>
-        <ResolvedBuyButtons
+      {eagerSelection ? (
+        <BuyButtons
+          selectedVariant={toBuyButtonVariant(eagerSelection.selectedVariant)}
           title={title}
           handle={handle}
           featuredImage={featuredImage}
           availableForSale={availableForSale}
-          selectionPromise={selectionPromise}
         />
-      </Suspense>
+      ) : (
+        <Suspense fallback={<BuyButtonsFallback t={t} allInStock={allInStock} />}>
+          <ResolvedBuyButtons
+            title={title}
+            handle={handle}
+            featuredImage={featuredImage}
+            availableForSale={availableForSale}
+            selectionPromise={selectionPromise}
+          />
+        </Suspense>
+      )}
 
       <ProductInfoDescription descriptionHtml={descriptionHtml} />
     </div>
   );
 }
 
+function toBuyButtonVariant(variant: ProductVariant | undefined): BuyButtonVariant | undefined {
+  if (!variant) return undefined;
+  return {
+    id: variant.id,
+    title: variant.title,
+    availableForSale: variant.availableForSale,
+    image: variant.image,
+    price: variant.price,
+    requiresBundleConfiguration: variant.requiresComponents && variant.components.length === 0,
+    selectedOptions: variant.selectedOptions,
+  };
+}
+
 async function ResolvedProductPrice({
   selectionPromise,
   locale,
@@ -227,11 +281,20 @@ async function ResolvedBundleRelationships({
 }: {
   selectionPromise: Promise<ProductSelection>;
 }) {
-  const [{ selectedVariant }, t] = await Promise.all([
-    selectionPromise,
-    getTranslations("product"),
-  ]);
+  const { selectedVariant } = await selectionPromise;
+  return <BundleRelationships selectedVariant={selectedVariant} />;
+}
+
+async function BundleRelationships({
+  selectedVariant,
+}: {
+  selectedVariant: ProductVariant | undefined;
+}) {
   if (!selectedVariant) return null;
+  if (selectedVariant.components.length === 0 && selectedVariant.bundleParents.length === 0) {
+    return null;
+  }
+  const t = await getTranslations("product");
   return (
     <>
       <BundleComponents components={selectedVariant.components} title={t("bundleIncludes")} />
@@ -254,22 +317,10 @@ async function ResolvedBuyButtons({
   selectionPromise: Promise<ProductSelection>;
 }) {
   const { selectedVariant } = await selectionPromise;
-  const buyButtonVariant: BuyButtonVariant | undefined = selectedVariant
-    ? {
-        id: selectedVariant.id,
-        title: selectedVariant.title,
-        availableForSale: selectedVariant.availableForSale,
-        image: selectedVariant.image,
-        price: selectedVariant.price,
-        requiresBundleConfiguration:
-          selectedVariant.requiresComponents && selectedVariant.components.length === 0,
-        selectedOptions: selectedVariant.selectedOptions,
-      }
-    : undefined;
 
   return (
     <BuyButtons
-      selectedVariant={buyButtonVariant}
+      selectedVariant={toBuyButtonVariant(selectedVariant)}
       title={title}
       handle={handle}
       featuredImage={featuredImage}
@@ -278,11 +329,35 @@ async function ResolvedBuyButtons({
   );
 }
 
-function BuyButtonsFallback() {
+function BuyButtonsFallback({
+  t,
+  allInStock,
+}: {
+  t: Awaited<ReturnType<typeof getTranslations<"product">>> | null;
+  allInStock: boolean;
+}) {
+  if (!t) {
+    return (
+      <div className="grid grid-cols-2 gap-2.5">
+        <div className="h-12 rounded-lg bg-shop" />
+        <div className="h-12 rounded-lg bg-primary" />
+      </div>
+    );
+  }
   return (
-    <div className="grid grid-cols-2 gap-2">
-      <div className="h-12 rounded-lg bg-shop" />
-      <div className="h-12 rounded-lg bg-primary" />
+    <div className="grid grid-cols-2 gap-2.5">
+      <div
+        className={cn(
+          "flex items-center justify-center gap-1.5 rounded-lg h-12 bg-shop text-white",
+          !allInStock && "invisible",
+        )}
+      >
+        <span className="text-sm font-medium">{t("buyWithShop")}</span>
+        <ShopLogo className="h-4 w-auto" />
+      </div>
+      <div className="flex items-center justify-center rounded-lg h-12 bg-primary text-primary-foreground text-sm font-medium">
+        {allInStock ? t("addToCart") : t("outOfStock")}
+      </div>
     </div>
   );
 }

apps/template/lib/shopify/transforms/product.ts

@@ -15,7 +15,7 @@ import type {
   Video,
 } from "@/lib/types";
 
-import { encodedVariantSet } from "../variant-encoding";
+import { allEncodedVariantsAvailable, encodedVariantSet } from "../variant-encoding";
 
 interface ShopifyImage {
   url: string;
@@ -501,6 +501,13 @@ export function transformShopifyProductCard(product: ShopifyProductCard): Produc
   };
 }
 
+function hasUniformPriceRange(product: ShopifyProduct): boolean {
+  const { compareAtPriceRange, priceRange } = product;
+  if (priceRange.minVariantPrice.amount !== priceRange.maxVariantPrice.amount) return false;
+  if (!compareAtPriceRange) return true;
+  return compareAtPriceRange.minVariantPrice.amount === compareAtPriceRange.maxVariantPrice.amount;
+}
+
 export function transformShopifyProductDetails(product: ShopifyProduct): ProductDetails {
   const selection = transformProductSelectionOrFallback(product);
   const defaultVariant = selection.selectedVariant;
@@ -520,6 +527,11 @@ export function transformShopifyProductDetails(product: ShopifyProduct): Product
     ...extractMediaFromProduct(product),
     variants: selection.variants,
     variantsCount: product.variantsCount.count,
+    allVariantsInStock: allEncodedVariantsAvailable(
+      product.encodedVariantExistence,
+      product.encodedVariantAvailability,
+    ),
+    hasUniformPricing: hasUniformPriceRange(product),
     options: selection.options,
     tags: product.tags,
     seo: {

apps/template/lib/shopify/variant-encoding.test.ts

@@ -1,7 +1,11 @@
 import assert from "node:assert/strict";
 import test from "node:test";
 
-import { decodeEncodedVariant, encodedVariantSet } from "./variant-encoding.ts";
+import {
+  allEncodedVariantsAvailable,
+  decodeEncodedVariant,
+  encodedVariantSet,
+} from "./variant-encoding.ts";
 
 test("decodes nested option combinations", () => {
   assert.deepEqual(decodeEncodedVariant("v1_0:0:0,1:0-1,,1:0:0-1,1:1,,2:0:1,1:0,,"), [
@@ -36,3 +40,11 @@ test("adds prefixes used for partial option availability", () => {
 test("rejects unsupported encoding versions", () => {
   assert.throws(() => decodeEncodedVariant("v2_0"), /Unsupported option value encoding/);
 });
+
+test("reports every existing variant available when the encodings match", () => {
+  assert.equal(allEncodedVariantsAvailable("v1_0:0-1,1:0,", "v1_0:0-1,1:0,"), true);
+});
+
+test("reports unavailable variants when availability is a subset of existence", () => {
+  assert.equal(allEncodedVariantsAvailable("v1_0:0-1,1:0,", "v1_0:0,1:0,"), false);
+});

apps/template/lib/shopify/variant-encoding.ts

@@ -71,3 +71,12 @@ export function encodedVariantSet(encodedVariantField: string): Set<string> {
 
   return combinations;
 }
+
+export function allEncodedVariantsAvailable(
+  encodedVariantExistence: string,
+  encodedVariantAvailability: string,
+): boolean {
+  const existence = encodedVariantSet(encodedVariantExistence);
+  const availability = encodedVariantSet(encodedVariantAvailability);
+  return existence.size === availability.size && [...existence].every((c) => availability.has(c));
+}

apps/template/lib/types.ts

@@ -55,12 +55,14 @@ export interface ProductCard {
 }
 
 export interface ProductDetails extends ProductCard {
+  allVariantsInStock: boolean;
   category?: Category | null;
   categoryId?: string;
   collectionHandles: string[];
   currencyCode: string;
   description: string;
   descriptionHtml: string;
+  hasUniformPricing: boolean;
   images: Image[];
   manufacturerName: string;
   metafields?: Metafield[];

packages/plugin/template-rollout-log/2026-06-05-modern-shopify-product-model.md

@@ -71,7 +71,8 @@ Shopify's bundle model adds relationships at both product-variant and cart-line
 ## Adoption notes
 
 - `ProductDetails.variants` is now a representative selectable set, not an exhaustive export. Use `ProductDetails.variantsCount` for the exact count and `getProductSelection()` to resolve a choice.
-- Do not infer uniform pricing, uniform stock, or single-variant status from `ProductDetails.variants`; the old `hasUniformPricing()` and `hasUniformStock()` helpers are removed.
+- Do not infer uniform pricing, uniform stock, or single-variant status from `ProductDetails.variants`. Use the exact signals instead: `ProductDetails.hasUniformPricing` (equal `priceRange` and `compareAtPriceRange` bounds), `ProductDetails.allVariantsInStock` (`encodedVariantExistence` equals `encodedVariantAvailability`), and `ProductDetails.variantsCount === 1`.
+- Keep the eager PDP paths these signals enable: uniform-price products render the price in the prerendered shell, single-variant products render options and buy buttons eagerly, and uniform-stock products render a labeled buy-button fallback. Selection-dependent Suspense streaming is only for regions selection can actually change.
 - `ProductVariant` gains `productHandle`, `requiresComponents`, `components`, and `bundleParents`.
 - `CartLine` gains nested `components`, `canRemove`, and `canUpdateQuantity`.
 - `Cart.cost.totalTaxAmount` is removed because Shopify deprecated it in Storefront API 2025-01.
@@ -89,9 +90,10 @@ Shopify's bundle model adds relationships at both product-variant and cart-line
 3. Change a Combined Listing option and confirm the URL can move to the selected child product handle.
 4. Open a Liquid `/products/:handle?variant=:id` link and confirm it permanently redirects to the matching option-name URL.
 5. Confirm a selected-option PDP starts the base-product and selection operations in parallel and that only the base product uses persistent caching.
-6. Open a fixed bundle PDP and confirm its component products render and the bundle can be added.
-7. Open a component product and confirm bundles returned by `groupedBy` render.
-8. Confirm bundle components remain grouped in the cart and line controls honor Shopify's instructions.
-9. Confirm a customized bundle parent without selected components cannot be added directly.
-10. Ask the shopping agent to select options on a high-variant product and confirm it calls `resolveProductVariant` before `addToCart`.
-11. Run `pnpm --filter template lint`, `pnpm --filter template test`, `pnpm --filter template build`, `pnpm --filter docs lint`, and `pnpm --filter docs build`.
+6. Confirm a uniform-price product renders its price in the prerendered HTML, and a single-variant product renders its buy buttons there.
+7. Open a fixed bundle PDP and confirm its component products render and the bundle can be added.
+8. Open a component product and confirm bundles returned by `groupedBy` render.
+9. Confirm bundle components remain grouped in the cart and line controls honor Shopify's instructions.
+10. Confirm a customized bundle parent without selected components cannot be added directly.
+11. Ask the shopping agent to select options on a high-variant product and confirm it calls `resolveProductVariant` before `addToCart`.
+12. Run `pnpm --filter template lint`, `pnpm --filter template test`, `pnpm --filter template build`, `pnpm --filter docs lint`, and `pnpm --filter docs build`.