From 3c19305a7107d250bd898a9f4dfef38e362c2cbf Mon Sep 17 00:00:00 2001
From: Paul Hachmang <paul@reachdigital.nl>
Date: Tue, 16 Jan 2024 09:51:22 +0100
Subject: [PATCH] Display the details of configurable products in the cart.

---
 .changeset/shy-gifts-trade.md                       |  5 +++++
 .../ConfigurableCartItem.graphql                    |  3 +++
 .../plugins/ConfigurableCartItemActionCard.tsx      | 13 +++++++++++++
 3 files changed, 21 insertions(+)
 create mode 100644 .changeset/shy-gifts-trade.md

diff --git a/.changeset/shy-gifts-trade.md b/.changeset/shy-gifts-trade.md
new file mode 100644
index 0000000000..3a67fecd38
--- /dev/null
+++ b/.changeset/shy-gifts-trade.md
@@ -0,0 +1,5 @@
+---
+'@graphcommerce/magento-product-configurable': patch
+---
+
+Display the details of configurable products in the cart.
diff --git a/packages/magento-product-configurable/ConfigurableCartItem/ConfigurableCartItem.graphql b/packages/magento-product-configurable/ConfigurableCartItem/ConfigurableCartItem.graphql
index 0f543bd4ab..da4f3d59e4 100644
--- a/packages/magento-product-configurable/ConfigurableCartItem/ConfigurableCartItem.graphql
+++ b/packages/magento-product-configurable/ConfigurableCartItem/ConfigurableCartItem.graphql
@@ -10,7 +10,10 @@ fragment ConfigurableCartItem on ConfigurableCartItem @inject(into: ["CartItem"]
   }
   configured_variant {
     uid
+    ...ProductLink
+    sku
     name
+    sku
     thumbnail {
       ...ProductImage
     }
diff --git a/packages/magento-product-configurable/plugins/ConfigurableCartItemActionCard.tsx b/packages/magento-product-configurable/plugins/ConfigurableCartItemActionCard.tsx
index 3385a2b5fa..56914ceaa2 100644
--- a/packages/magento-product-configurable/plugins/ConfigurableCartItemActionCard.tsx
+++ b/packages/magento-product-configurable/plugins/ConfigurableCartItemActionCard.tsx
@@ -17,6 +17,19 @@ export function ConfigurableCartItemActionCard(
   return (
     <Prev
       {...rest}
+      cartItem={{
+        ...rest.cartItem,
+        product: {
+          ...rest.cartItem.product,
+          name: import.meta.graphCommerce.configurableVariantValues?.content
+            ? rest.cartItem.configured_variant.name
+            : rest.cartItem.product.name,
+          thumbnail: rest.cartItem.configured_variant.thumbnail,
+          // url_key: import.meta.graphCommerce.configurableVariantValues?.url
+          //   ? rest.cartItem.configured_variant.url_key
+          //   : rest.cartItem.product.url_key,
+        },
+      }}
       details={
         <>
           {rest.details}