diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx
index 283f3fa40..493374f0f 100644
--- a/components/cart/CartItem/CartItem.tsx
+++ b/components/cart/CartItem/CartItem.tsx
@@ -8,6 +8,13 @@ import useUpdateItem from '@framework/cart/use-update-item'
import useRemoveItem from '@framework/cart/use-remove-item'
import s from './CartItem.module.css'
+type ItemOption = {
+ name: string,
+ nameId: number,
+ value: string,
+ valueId: number
+}
+
const CartItem = ({
item,
currencyCode,
@@ -88,11 +95,19 @@ const CartItem = ({
{/** TODO: Replace this. No `path` found at Cart */}
-
+
{item.name}
-
+ {item.options && item.options.length > 0 ? (
+
+ {item.options.map((option:ItemOption) =>
+
+ {`${option.name}: ${option.value}`}
+
+ )}
+
+ ) : null}
diff --git a/components/product/helpers.ts b/components/product/helpers.ts
index eda8d434a..bcc90b9a8 100644
--- a/components/product/helpers.ts
+++ b/components/product/helpers.ts
@@ -32,8 +32,10 @@ export function getProductOptions(product: ProductNode) {
export function getCurrentVariant(product: ProductNode, opts: SelectedOptions) {
const variant = product.variants.edges?.find((edge) => {
const { node } = edge ?? {}
+ const numberOfDefinedOpts = Object.values(opts).filter(value => value !== null).length;
+ const numberOfEdges = node?.productOptions?.edges?.length;
- return Object.entries(opts).every(([key, value]) =>
+ const isEdgeEqualToOption = ([key, value]:[string, string | null]) =>
node?.productOptions.edges?.find((edge) => {
if (
edge?.node.__typename === 'MultipleChoiceOption' &&
@@ -43,9 +45,12 @@ export function getCurrentVariant(product: ProductNode, opts: SelectedOptions) {
(valueEdge) => valueEdge?.node.label === value
)
}
- })
- )
+ });
+
+ return numberOfDefinedOpts === numberOfEdges ?
+ Object.entries(opts).every(isEdgeEqualToOption)
+ : Object.entries(opts).some(isEdgeEqualToOption)
})
- return variant
+ return variant ?? product.variants.edges?.[0]
}
diff --git a/framework/bigcommerce/api/cart/handlers/add-item.ts b/framework/bigcommerce/api/cart/handlers/add-item.ts
index 25ae3880e..ca9de1ed5 100644
--- a/framework/bigcommerce/api/cart/handlers/add-item.ts
+++ b/framework/bigcommerce/api/cart/handlers/add-item.ts
@@ -26,8 +26,8 @@ const addItem: CartHandlers['addItem'] = async ({
}),
}
const { data } = cartId
- ? await config.storeApiFetch(`/v3/carts/${cartId}/items`, options)
- : await config.storeApiFetch('/v3/carts', options)
+ ? await config.storeApiFetch(`/v3/carts/${cartId}/items?include=line_items.physical_items.options`, options)
+ : await config.storeApiFetch('/v3/carts?include=line_items.physical_items.options', options)
// Create or update the cart cookie
res.setHeader(
diff --git a/framework/bigcommerce/api/cart/handlers/get-cart.ts b/framework/bigcommerce/api/cart/handlers/get-cart.ts
index 9fb42d730..703601cd8 100644
--- a/framework/bigcommerce/api/cart/handlers/get-cart.ts
+++ b/framework/bigcommerce/api/cart/handlers/get-cart.ts
@@ -12,7 +12,7 @@ const getCart: CartHandlers['getCart'] = async ({
if (cartId) {
try {
- result = await config.storeApiFetch(`/v3/carts/${cartId}`)
+ result = await config.storeApiFetch(`/v3/carts/${cartId}?include=line_items.physical_items.options`)
} catch (error) {
if (error instanceof BigcommerceApiError && error.status === 404) {
// Remove the cookie if it exists but the cart wasn't found
diff --git a/framework/bigcommerce/api/cart/handlers/remove-item.ts b/framework/bigcommerce/api/cart/handlers/remove-item.ts
index 2ee5dbe16..e4b57a01b 100644
--- a/framework/bigcommerce/api/cart/handlers/remove-item.ts
+++ b/framework/bigcommerce/api/cart/handlers/remove-item.ts
@@ -15,7 +15,7 @@ const removeItem: CartHandlers['removeItem'] = async ({
}
const result = await config.storeApiFetch<{ data: any } | null>(
- `/v3/carts/${cartId}/items/${itemId}`,
+ `/v3/carts/${cartId}/items/${itemId}?include=line_items.physical_items.options`,
{ method: 'DELETE' }
)
const data = result?.data ?? null
diff --git a/framework/bigcommerce/api/cart/handlers/update-item.ts b/framework/bigcommerce/api/cart/handlers/update-item.ts
index c64c111df..73776ccd9 100644
--- a/framework/bigcommerce/api/cart/handlers/update-item.ts
+++ b/framework/bigcommerce/api/cart/handlers/update-item.ts
@@ -16,7 +16,7 @@ const updateItem: CartHandlers['updateItem'] = async ({
}
const { data } = await config.storeApiFetch(
- `/v3/carts/${cartId}/items/${itemId}`,
+ `/v3/carts/${cartId}/items/${itemId}?include=line_items.physical_items.options`,
{
method: 'PUT',
body: JSON.stringify({