I have an online store that also has a separate app that’s able to create carts based on user selection of several inputs. We create a cart and add a product through a GraphQL query based on the inputs selected.

Our query looks something like this:

const lineItemsObject = lineItems.map(({ gid, quantity }: LineItem) => {
  return `{merchandiseId: "${gid}",quantity: ${quantity}}`;
});

const customAttributes = [
  `{ key: "URL", value: "${configuratorUrl || 'No URL (default configuration)'}" }`,
  ...lineItemsAttributes
];

const query = `
  mutation {
    cartCreate(input: {
      lines: [${lineItemsObject}],
      attributes: [${customAttributes}],
      note: "Order without notes"
    }) {
      cart {
        id
        checkoutUrl
      }
    }
  }`;

try {
  const response = await ShopifyData(query);
  const cart = response.data.cartCreate.cart ? response.data.cartCreate.cart : null;
  if (cart) {
    return cart.checkoutUrl;
  } else {
    throw new Error("Cart not created");
  }
} catch (error) {
  console.log("Error creating cart", error as Error);
}

In this first image you’ll see the cart created through headless:

In this image you’ll see the moment I add a regular product to the cart through the online store:

And finally, this is the resulting cart, which seems to be re-set for some reason, and only includes the product of the online store but not the one created through headless:

Anyone have any idea on why this might be happening? Is there an actual way to create a cart through headless and have users add extra items through the online store?

Cheers!