Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Re: Bundles not working in Hydrogen storefront

Bundles not working in Hydrogen storefront

domingov012
Tourist
3 0 3

I'm building a custom storefront with hydrogen. I want to sell bundles, so i downloaded the Shopify Bundles App, to create fixed bundles. In the dev docs, it says that "Storefront API supports fixed and customized bundles across the APIs." https://shopify.dev/docs/apps/selling-strategies/bundles#lifecycle-of-a-bundle . I can create a bundle and see it in the products page without issue, but whenever i try to add it to the cart, the cartLine added is an empty object. Here are some pictures for reference:

Screenshot 2024-04-06 130737.png 

This is a screenshot right after adding the bundle to cart. As you can see in the console logs, the returned cart has only 1 item (totalQuantity: 1 ), the bundle price in the cost object and a valid checkoutUrl. However, the lines object that corresponds to the bundle is just an empty object. If i go to the checkoutUrl  it takes me to a valid checkout page with the bundle and sub components:

 

 

Screenshot 2024-04-06 131737.png

 

So, the code is adding the bundle to a valid cart, but is not showing properly in the cart.lines object. This prevents me from editing this line (i have no access to a cartLine id), or showing the bundle properly in cart. Any help with this issue, or tips to use bundles with hydrogen?

Replies 3 (3)

domingov012
Tourist
3 0 3

I should add that the bundle is added to the cart in the same way as other products, Through a CartForm like this:

<CartForm
    route='/cart'
    action={CartForm.ACTIONS.LinesAdd}
    lines={{[
        {
            merchandiseId: {bundleVariantID}
            quantity: {selectedQuantity}
        }
    ]}}
>
    {children}
</CartForm>
// in the '/cart' route

export async function action({request, context}) {
  const {cart} = context;
  const formData = await request.formData();
  const {action, inputs} = CartForm.getFormInput(formData);

  if (!action) {
    throw new Error('No action provided');
  }

  let status = 200;
  let result;

  switch (action) {
    // this adds lines to cart //
    case CartForm.ACTIONS.LinesAdd:
      result = await cart.addLines(inputs.lines);
      break;
    case CartForm.ACTIONS.LinesUpdate:
      result = await cart.updateLines(inputs.lines);
      break;
    case CartForm.ACTIONS.LinesRemove:
      result = await cart.removeLines(inputs.lineIds);
      break;
    case CartForm.ACTIONS.DiscountCodesUpdate: {
      const formDiscountCode = inputs.discountCode;

      // User inputted discount code
      const discountCodes = formDiscountCode ? [formDiscountCode] : [];

      // Combine discount codes already applied on cart
      discountCodes.push(...inputs.discountCodes);

      result = await cart.updateDiscountCodes(discountCodes);
      break;
    }
    case CartForm.ACTIONS.BuyerIdentityUpdate: {
      result = await cart.updateBuyerIdentity({
        ...inputs.buyerIdentity,
      });
      break;
    }
    default:
      throw new Error(`${action} cart action is not defined`);
  }
  const cartId = result.cart.id;
  const headers = cart.setCartId(result.cart.id);
  const {cart: cartResult, errors} = result;

  const redirectTo = formData.get('redirectTo') ?? null;
  if (typeof redirectTo === 'string') {
    status = 303;
    headers.set('Location', redirectTo);
  }

  headers.append('Set-Cookie', await context.session.commit());

  return json(
    {
      cart: cartResult,
      errors,
      analytics: {
        cartId,
      },
    },
    {status, headers},
  );
}
LoveAndMoney
Shopify Partner
4 0 0

+1 I am having the same issue. 

LoveAndMoney
Shopify Partner
4 0 0

Found the solution here.

 

You need to update CART_QUERY_FRAGMENT in server.ts to add CartLineComponent fragment, see details on the above link.