Include selectedOptions in add-to-cart event detail

.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.

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<typeof vi.fn>).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" },

packages/hydrogen/src/core/product/product-form.ts

@@ -313,6 +313,7 @@ function buildAddToCartDetail<TProduct extends ProductInput>(
       {
         id: selectedVariant.id,
         title: selectedVariant.title,
+        selectedOptions: selectedVariant.selectedOptions,
         product: selectedVariant.product ? { title: selectedVariant.product.title } : undefined,
         image: selectedVariant.image,
         price: selectedVariant.price,