diff --git a/.changeset/optimistic-cart-selected-options.md b/.changeset/optimistic-cart-selected-options.md new file mode 100644 index 0000000000..1d846904d2 --- /dev/null +++ b/.changeset/optimistic-cart-selected-options.md @@ -0,0 +1,5 @@ +--- +"@shopify/hydrogen": patch +--- + +Include the selected variant's `selectedOptions` in the add-to-cart event detail built by the product form. Optimistic cart lines now carry `merchandise.selectedOptions` during the mutation window, so cart line components that render option names (e.g. `Size: Large`) no longer flicker from the variant title to the resolved options when the add-to-cart mutation completes. diff --git a/packages/hydrogen/src/core/product/product-form.test.ts b/packages/hydrogen/src/core/product/product-form.test.ts index d71e66d6d6..66045e9af9 100644 --- a/packages/hydrogen/src/core/product/product-form.test.ts +++ b/packages/hydrogen/src/core/product/product-form.test.ts @@ -923,6 +923,7 @@ describe("createProductFormStore", () => { { id: "v-red", title: "Red", + selectedOptions: [{ name: "Color", value: "Red" }], product: { title: undefined }, image: undefined, price: { amount: "10.00", currencyCode: "USD" }, @@ -931,6 +932,17 @@ describe("createProductFormStore", () => { }); }); + it("includes the variant's selectedOptions so the optimistic line can render option names", async () => { + const cartStore = createMockCartStore(); + const store = createStore(makeSingleOptionProduct(RED), cartStore); + const event = new Event("submit") as SubmitEvent; + + await store.handleFormSubmit(event); + + const [, detail] = (cartStore.handleFormSubmit as ReturnType).mock.calls[0]; + expect(detail.products[0].selectedOptions).toEqual([{ name: "Color", value: "Red" }]); + }); + it("passes undefined eventDetail when no variant is selected", async () => { const cartStore = createMockCartStore(); const store = createStore(makeSingleOptionProduct(null), cartStore); @@ -960,6 +972,7 @@ describe("createProductFormStore", () => { { id: "v-red", title: "Red", + selectedOptions: [{ name: "Color", value: "Red" }], product: { title: "Cozy Shirt" }, image: { url: "https://cdn.example.com/shirt.jpg", altText: "Red shirt" }, price: { amount: "10.00", currencyCode: "USD" }, diff --git a/packages/hydrogen/src/core/product/product-form.ts b/packages/hydrogen/src/core/product/product-form.ts index 4b3bd8ae32..743184e408 100644 --- a/packages/hydrogen/src/core/product/product-form.ts +++ b/packages/hydrogen/src/core/product/product-form.ts @@ -313,6 +313,7 @@ function buildAddToCartDetail( { id: selectedVariant.id, title: selectedVariant.title, + selectedOptions: selectedVariant.selectedOptions, product: selectedVariant.product ? { title: selectedVariant.product.title } : undefined, image: selectedVariant.image, price: selectedVariant.price,