Dedicated to the Hydrogen framework, headless commerce, and building custom storefronts using the Storefront API.
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:
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:
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?
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},
);
}
+1 I am having the same issue.
Found the solution here.
You need to update CART_QUERY_FRAGMENT in server.ts to add CartLineComponent fragment, see details on the above link.