JS Buy SDk addLineItems rejecting product ID

[WI1110]

Hello,

I'm attempting to use the JS Buy API to integrate Shopify with a new custom website, however when I try to add a new item to a checkout object it rejects the id, giving me this error:

Error: [{"message":"invalid id","locations":[{"line":1,"column":3286}],"path":["checkoutLineItemsAdd"]}]
    od http://sdks.shopifycdn.com/js-buy-sdk/v2/latest/index.umd.min.js:25
    promise callback*value http://sdks.shopifycdn.com/js-buy-sdk/v2/latest/index.umd.min.js:25
    onclick http://localhost:3000/gc.js:153
    appendCard http://localhost:3000/gc.js:142
    <anonymous> http://localhost:3000/gc.js:115
    promise callback* http://localhost:3000/gc.js:107
    <anonymous> http://localhost:3000/gc.js:66
    promise callback* http://localhost:3000/gc.js:58

Here's the code:

newCard.onclick = async function() {
    console.log(this.id);
    const lineItemsToAdd = [
      {
        variantId: this.id,
        quantity: 1,
        customAttributes: [{key: "MyKey", value: "MyValue"}]
      }
    ];
    
    
    client.checkout.addLineItems(checkoutID, lineItemsToAdd).then((checkout) => {
      console.log(checkout.lineItems);
    }).catch(err => console.log(err));
    
    
  };

Any ideas as to why it's giving me this error? I'm getting this ID straight from the Shopify Storefront GraphQL API.

Edit: And I am happy to give more info if needed.

[floriano76]

Hello, @WI1110,

I'm having the exact same error here - even the same column:

    "data": {
        "checkoutLineItemsAdd": null
    },
    "errors": [
        {
            "message": "invalid id",
            "locations": [
                {
                    "line": 1,
                    "column": 3286
                }
            ],
            "path": [
                "checkoutLineItemsAdd"
            ]
        }
    ]

The weirdest thing is that I'm sure that I saw it working a few times before it stopped working for good and I'm using all base64 IDs as requested.

Tried everything in my nuxt application, tried on Postman... no good.

Anyone?

[floriano76 · Accepted solution]

Hi @WI1110,

I believe I found the solution. I was querying the products and using their IDs in my addLineItems, like in this example:

<button @click="addToCart(product.id)" v-if="product.availableForSale">Add to Cart</button>

addToCart(productId) {
        const lineItemsToAdd = [{ variantId: productId, quantity: 1 }];

        this.$shopify.checkout
          .addLineItems(this.checkout.id, lineItemsToAdd)
          .then((checkout) => {
            console.log(checkout);
          });
    }

After a few tries I figured out that I really should be using the product.variants[0].id, like this:

<button @click="addToCart(product.variants[0].id)" v-if="product.availableForSale">addToCart</button>

After I did that I was able to add the line items and everything started to work flawlessly here. I hope it helps.

[WI1110]

Oh my, it works! Thank you so much! I've been stuck on this forever!