Unable to initialise cart with variants. Documentation example not working.

[dmitrybelyakov]

Hi, I'm following official documentation from Javascript Buy SDK Guide - initialising cart with variants in fact does nothing for me, apart from creating an empty cart:

//these are actual products
var productId = 5863604999;
var variantId = 18525309447;

//code from the docs: http://shopify.github.io/js-buy-sdk/guide/
shopClient.createCart({id: variantId, quantity: 1}).then(function (cart) {
    console.log('CREATED CART:', cart.lineItems.length); //0
});

//doing it like this doesn't help either
shopClient.fetchProduct(productId).then(function (product) {
    shopClient.createCart({id: product.selectedVariant.id, quantity: 1}).then(function (cart) {
        console.log('CREATED CART:', cart.lineItems.length); //0
    });
 });

using: shopify-buy.polyfilled.globals.min.js

[dmitrybelyakov]

The error I'm getting here is this:

Uncaught (in promise) TypeError: Cannot read property 'image' of undefined

Which seems to happen at this line in cart model.

[richgilbank]

Hey @dmitrybelyakov, thanks for letting us know. Looks like it's expected to be under the line_items key in the attributes passed to createCart. This should work:

shopClient.createCart({ line_items: [{ id: variantId, quantity: 1 }] }).then(function(cart) { ...

Worth noting though, that this won't automatically fetch the variant image or other details, in case you need those to display a cart. I'll update the docs - please let us know if you come across anything else. Thanks!

[dmitrybelyakov]

Hey @richgilbank !

Yeah, that worked, thank you!. But it still behaves weirdly. Can you please tell me what's the purpose of this functionality? Because:

• There is no way to get subtotal when initialising the cart this way
• As soon as we add anything else on top of what was passed into 'constructor' all the items from before disappear
• When cart is initialised that way, checkout url we get looks like this: https://shop.myshopify.com/cart/undefined:1?api_key=123. That obviously won't work.
• If we have to fetch every product in the cart to display images - will we hit API rate limit pretty quickly? (Say we have 5 users each having 10 items in the cart).

[richgilbank]

Hmm, interesting - this should be able to function (to a limited extent) with just the variant IDs. Ideally, you'd be able to at the very least transition to checkout, so that's something worth investigating. As for fetching every product in the cart, there's a few things worth noting:

• If you fetch the product, then add a variant to your cart, product images will be included in the cart as well
• The API we're using is not rate limited, so you can make many requests to it without a problem
• Multiple products can be fetched with one request, i.e. shopClient.fetchQueryProducts(product_ids: [1, 2, 3]) - this is not yet well documented, but being discussed in https://github.com/Shopify/js-buy-sdk/issues/67

Hope this helps!

[dmitrybelyakov]

Thank you, @richgilbank . For now we managed to work around this issue by putting fetched products to localStorage and then initialising cart from that.

[richgilbank]

Great, thanks! The SDK's still pretty new and rough around the edges so feedback is really helpful. 😄

[dmitrybelyakov]

@richgilbank haha yeah, I figured it's only 3 months old. But still very useful! Thanks a lot for your help!

[yashafromrussia]

@richgilbank, I wonder why this has been closed. I'm getting the same thing:

When cart is initialised that way, checkout url we get looks like this: https://shop.myshopify.com/cart/undefined:1?api_key=123. That obviously won't work.

When i replace undefined with the variant id i provided, the checkout url works. ¯(ツ)/¯

[minasmart]

Hey there! The whole cart system is currently in flux, and initializing with line item attrs is pretty complex.

The best way way to do this is something like

const cart = client.createCart();

cart.addVariants(product.selectedVariant);

The reason for this is that with a locally persisted cart, and only variant ids, there's no way for us (with our existing APIs) to track that variant back to its product and grab images and things like that.

We are currently working on a better way, and we have updated docs in #233 that should be shipping shortly that will better reflect this method.

[yashafromrussia]

Hi @minasmart! Ahh i see, thank you for the workaround.