Bundle products not displayed in cart

[jakejgk]

What is the location of your example repository?

No response

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

2024.1.3

What version of Remix are you using?

No response

Steps to Reproduce

1. Create an ATC button:
   function AddToCartButton({analytics, children, disabled, lines, onClick}) {
   return (
   
   {(fetcher) => (
   <>
   
   <button
   type="submit"
   onClick={onClick}
   disabled={disabled ?? fetcher.state !== 'idle'}
   className="text-[#161616] bg-[#f5f5f0] md:text-[#f5f5f0] md:bg-[#f5f5f0] text-md py-2 px-7 rounded-[4px] w-60 md:w-[360px] h-[60px] md:h-14 cursor-pointer hover:bg-white/80 md:hover:bg-white/80 transition duration-300 ease-in-out"
   >
   {children}
   
   </>
   )}
   
   );
   }

2. Create /cart route with switch statement to allow for CartForm.ACTIONS.LinesAdd:
   switch (action) {
   case CartForm.ACTIONS.LinesAdd:
   result = await cart.addLines(inputs.lines);

   break;
   }

3. Call this route with the AddToCartButton component, making a post request with inputs={{lines}}. Lines is an array with an object containing the correct merchandiseId and quantity. The input also contains an analytics string, but that is not related to this.

Expected Behavior

After this submission, the correct product should show up in the cart. When retrieving the cart lines, you should get back a lines object with a nodes array containing an id (id for the cartLine) and other information about the merchandise inside that line of the cart.

Actual Behavior

When I retrieve the cart lines, I get back an empty array for each line that a bundle was supposed to be in. When I go to checkout the cart, the bundle shows up in checkout. I cannot see the bundle in cart as there is no id for the cart line or any other information about the merchandise, just the empty array in it's place. I cannot even allow the user to remove this empty cart item because there is no id to perform a cart.updateLines or cart.removeLines mutation on.

[wizardlyhel]

Verified that cart querying a bundle product in skeleton breaks. An example cart output from storefront api:

• The empty {} in the lines.nodes array is suppose to be the bundle product
• Visit the checkout url - the bundled product correctly shows up

{
  "data": {
    "cart": {
      "updatedAt": "2024-03-11T16:53:01Z",
      "id": "gid://shopify/Cart/c1-32841e24355614ab2e45235fb95e1c4a",
      "checkoutUrl": "https://checkout.hydrogen.shop/cart/c/c1-32841e24355614ab2e45235fb95e1c4a?key=380f08dcb2f046ae259ddc0ee83c8149",
      "totalQuantity": 2,
      "buyerIdentity": {
        "countryCode": "US",
        "customer": null,
        "email": null,
        "phone": null
      },
      "lines": {
        "nodes": [
          {},
          {
            "id": "gid://shopify/CartLine/36504483-1b37-4375-8cf7-dd4f4f4cb523?cart=c1-32841e24355614ab2e45235fb95e1c4a",
            "quantity": 1,
            "attributes": [],
            "cost": {
              "totalAmount": {
                "currencyCode": "USD",
                "amount": "600.0"
              },
              "amountPerQuantity": {
                "currencyCode": "USD",
                "amount": "600.0"
              },
              "compareAtAmountPerQuantity": {
                "currencyCode": "USD",
                "amount": "649.95"
              }
            },
            "merchandise": {
              "id": "gid://shopify/ProductVariant/41007289630776",
              "availableForSale": true,
              "compareAtPrice": {
                "currencyCode": "USD",
                "amount": "649.95"
              },
              "price": {
                "currencyCode": "USD",
                "amount": "600.0"
              },
              "requiresShipping": true,
              "title": "154cm / Nested / Carbon-fiber",
              "image": {
                "id": "gid://shopify/ProductImage/36705302544440",
                "url": "https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg?v=1655932274",
                "altText": null,
                "width": 3908,
                "height": 3908
              },
              "product": {
                "handle": "snowboard",
                "title": "The Hydrogen Snowboard",
                "id": "gid://shopify/Product/6730850828344"
              },
              "selectedOptions": [
                {
                  "name": "Size",
                  "value": "154cm"
                },
                {
                  "name": "Binding mount",
                  "value": "Nested"
                },
                {
                  "name": "Material",
                  "value": "Carbon-fiber"
                }
              ]
            }
          }
        ]
      },
      "cost": {
        "subtotalAmount": {
          "currencyCode": "USD",
          "amount": "1225.0"
        },
        "totalAmount": {
          "currencyCode": "USD",
          "amount": "1175.0"
        },
        "totalDutyAmount": null,
        "totalTaxAmount": null
      },
      "note": "",
      "attributes": [],
      "discountCodes": []
    }
  },
  "extensions": {
    "context": {
      "country": "US",
      "language": "EN"
    }
  }
}

[wizardlyhel]

@jakejgk In order to see the bundle cart lines make sure to update your cart query graphql to bring in the lineComponents.

Our skeleton template is breaking on bundle products when added to cart, we will get that fixed. However, the baseline skeleton setup will not anticipate for bundled products. (edit) we will leave it broken so that devs won't accidentally miss implementation for bundle products. However, we will get it fix for demo store.

Here is an example graphql for cart query:

  fragment Money on MoneyV2 {
    currencyCode
    amount
  }
  fragment CartLine on CartLine {
    id
    quantity
    attributes {
      key
      value
    }
    cost {
      totalAmount {
        ...Money
      }
      amountPerQuantity {
        ...Money
      }
      compareAtAmountPerQuantity {
        ...Money
      }
    }
    merchandise {
      ... on ProductVariant {
        id
        availableForSale
        compareAtPrice {
          ...Money
        }
        price {
          ...Money
        }
        requiresShipping
        title
        image {
          id
          url
          altText
          width
          height

        }
        product {
          handle
          title
          id
        }
        selectedOptions {
          name
          value
        }
      }
    }
  }
  fragment CartLineComponent on ComponentizableCartLine {
    id
    quantity
    attributes {
      key
      value
    }
    cost {
      totalAmount {
        ...Money
      }
      amountPerQuantity {
        ...Money
      }
      compareAtAmountPerQuantity {
        ...Money
      }
    }
    merchandise {
      ... on ProductVariant {
        id
        availableForSale
        compareAtPrice {
          ...Money
        }
        price {
          ...Money
        }
        requiresShipping
        title
        image {
          id
          url
          altText
          width
          height

        }
        product {
          handle
          title
          id
        }
        selectedOptions {
          name
          value
        }
      }
    }
    lineComponents {
      ...CartLine
    }
  }
  fragment CartApiQuery on Cart {
    updatedAt
    id
    checkoutUrl
    totalQuantity
    buyerIdentity {
      countryCode
      customer {
        id
        email
        firstName
        lastName
        displayName
      }
      email
      phone
    }
    lines(first: $numCartLines) {
      nodes {
        ...CartLineComponent
      }
      nodes {
        ...CartLine
      }
    }
    cost {
      subtotalAmount {
        ...Money
      }
      totalAmount {
        ...Money
      }
      totalDutyAmount {
        ...Money
      }
      totalTaxAmount {
        ...Money
      }
    }
    note
    attributes {
      key
      value
    }
    discountCodes {
      code
      applicable
    }
  }

[jakejgk]

Thank you for the help! Where should I have looked to find the proper implementation of the CartLineComponent?

[wizardlyhel]

We don't have a styling example for bundles but it should just be an array of CartLine.

Here is the API doc for ComponentizableCartLine:
https://shopify.dev/docs/api/storefront/2024-01/objects/ComponentizableCartLine

[jakejgk]

Thank you. My question is where did I miss this step in implementing bundle products? I could not find the information anywhere that would have led me to understanding I need a CartLineComponent in my CartApiQuery, as you showed me.

[wizardlyhel]

It's part of understanding how Graphql the query language works.

1. cart.cartLines returns a [BaseCartLine!]! object (Doc)
2. BaseCartLine is an interface that is implemented by type CartLine and ComponentizableCartLine

Since BaseCartLine is an interface, this means that we can query for the types it implements. But CartLine and ComponentizableCartLine are consider different types, they must be queried separately with:

    lines(first: $numCartLines) {
      nodes {
        ...CartLineComponent
      }
      nodes {
        ...CartLine
      }
    }