fix(minicart): fix resolving configurable variants data (#456)

Co-authored-by: Bartosz Herba <[email protected]>
vuestorefront · Jan 20, 2022 · 7705477 · 7705477
1 parent 6b29737
commit 7705477
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/packages/api-client/src/api/cart/cart.ts b/packages/api-client/src/api/cart/cart.ts
@@ -114,6 +114,12 @@ export default gql`
             configurable_product_option_value_uid
             value_label
           }
+          configured_variant {
+            sku
+            thumbnail {
+              url
+            }
+          }
         }
         ... on BundleCartItem {
           bundle_options {
@@ -177,4 +183,5 @@ export default gql`
         }
       }
     }
-  }`;
+  }
+`;
diff --git a/packages/composables/src/getters/cartGetters.ts b/packages/composables/src/getters/cartGetters.ts
@@ -11,7 +11,7 @@ import {
   Cart,
   CartItem,
   Product,
-  SelectedShippingMethod,
+  SelectedShippingMethod, ConfigurableCartItem, ProductInterface,
 } from '@vue-storefront/magento-api';
 import productGetters from './productGetters';
 import { AgnosticPaymentMethod } from '../types';
@@ -133,6 +133,8 @@ export const getTotalItems = (cart: Cart): number => {
   return cart.total_quantity;
 };
 
+export const getConfiguredVariant = (product: ConfigurableCartItem): ProductInterface | {} => product?.configured_variant || {};
+
 // eslint-disable-next-line import/no-named-as-default-member
 export const getFormattedPrice = (price: number) => productGetters.getFormattedPrice(price);
 
@@ -196,6 +198,7 @@ const cartGetters: CartGetters = {
   getTotals,
   productHasSpecialPrice,
   getStockStatus,
+  getConfiguredVariant,
 };
 
 export default cartGetters;
diff --git a/packages/theme/components/CartSidebar.vue b/packages/theme/components/CartSidebar.vue
@@ -292,7 +292,10 @@ export default defineComponent({
     const { isAuthenticated } = useUser();
     const { send: sendNotification, notifications } = useUiNotification();
 
-    const products = computed(() => cartGetters.getItems(cart.value).filter(Boolean));
+    const products = computed(() => cartGetters
+      .getItems(cart.value)
+      .filter(Boolean)
+      .map((item) => ({ ...item, product: { ...item.product, ...item.configured_variant } })));
     const totals = computed(() => cartGetters.getTotals(cart.value));
     const totalItems = computed(() => cartGetters.getTotalItems(cart.value));
     const getAttributes = (product) => product.configurable_options || [];