Nest picklist children under parent line items

[BC-AdamWard]

What/Why?

Nest Picklist items under their parent item to achieve Stencil parity.

Testing

1. Create a product with a PickList product option (modifier) added.
2. Navigate to Catalyst storefront
3. Add product to cart
4. Validate the picklist item appears nested with the parent item.

Migration

Minor changes.

[changeset-bot]

🦋 Changeset detected

Latest commit: 9a009c4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@bigcommerce/catalyst-core	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

@BC-AdamWard is attempting to deploy a commit to the BigCommerce Platform Team on Vercel.

A member of the Team first needs to authorize it.

[sentry]

Bug: The CartViewed component and getAnalyticsData() send unfiltered lineItems (including picklist child items) to analytics, causing double-counting of products.
_{Severity: CRITICAL | Confidence: 0.95}

🔍 Detailed Analysis

The lineItems array passed to the CartViewed component and used in getAnalyticsData() includes both parent and child items from picklist products. This unfiltered array is then sent to analytics via analytics?.cart.cartViewed(), causing child items to be counted as separate products. This leads to inflated item counts and double-counting of products in analytics events when a cart contains picklist products.

💡 Suggested Fix

Filter child items from the lineItems array before passing it to the CartViewed component and getAnalyticsData(). Utilize the already filtered parentItems list for analytics data.

🤖 Prompt for AI Agent

Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.

Location: core/app/[locale]/(default)/cart/page.tsx#L244-L251

Potential issue: The `lineItems` array passed to the `CartViewed` component and used in
`getAnalyticsData()` includes both parent and child items from picklist products. This
unfiltered array is then sent to analytics via `analytics?.cart.cartViewed()`, causing
child items to be counted as separate products. This leads to inflated item counts and
double-counting of products in analytics events when a cart contains picklist products.

_{Did we get this right? 👍 / 👎 to inform future reviews.
Reference_id: 2790785}

[chanceaclark]

Pinging @hunterbecton + @andrewreifman to see if they have any design tweaks here!

[andrewreifman]

Pinging @hunterbecton + @andrewreifman to see if they have any design tweaks here!

@chanceaclark It looks like we're already including the picklist option under the product names, so is it necessary to show it again? Same thing with the quantity. We already display the quantity on the right so it also feels repetitive and not needed.

A few more notes:

• Instead of displaying the picklist label (Another product in this scenario), could we just display the value selected? And if there are more than one variant to show, can we just separate them by commas (see Figma mockups)
• For the variant info, we should probably increase the contrast. It looks pretty light and hard to read at the moment.

[BC-AdamWard]

@andrewreifman I do not have access to Figma, pinging you on Slack if you can create an export.

Instead of displaying the picklist label (Another product in this scenario), could we just display the value selected? And if there are more than one variant to show, can we just separate them by commas

I do not think this is viable, as it is possible to create multiple variations of the same parent product using modifiers, and have different quantities on each. Screenshot is current Catalyst behavior, same base product for all three products added by a modifier but the quantity needs to be unique for each one.

Taking a look at other style changes.