diff --git a/packages/api-client/src/api/cart/cart.ts b/packages/api-client/src/api/cart/cart.ts index 548bbbf99..d1df36e58 100644 --- 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 index 62bd7a97c..5432d8b59 100644 --- 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 index 8f855e858..2e666159e 100644 --- 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 || [];