Shopify Buy SDK getElementById().onClick functions not getting products properly

Question

SHOPIFY, I must say, your sdk support is lacking.

I'm a bit of a noob but I know enough about js. Not enough for this though, the shopify but sdk support page tells me to use things like

var shopClient = ShopifyBuy.buildClient({
    apiKey: 'private',
    myShopifyDomain: 'my-leisure',
    appId: '6'
  });

to create my shopClient, so that's that, I don't particularly know what I built, I don't know if it's just an object with that array or more has been built.

It tells me to use things like

var cart;
    shopClient.createCart().then(function (newCart) {
      cart = newCart;
        // do something with updated cart

    });

So I know this makes the cart, the virtual cart, nothing for the front end and

new CartModel();

which creates a new cart model, that is the constructor for it. But what it is, idk either, does it include the css for the side bar cart ui?

then it tells me to use

var product;
shopClient.fetchProduct(6829802497)
    .then(function (product) {
    product = product;
});

..to fetch the product I want. But when do I do this, I assumed it should do it on the click of my custom buy button.

So I create a button with the Id mg-240 and listen for a click to make the product .

$(document).ready(function() {  
document.getElementById('mg-240').onclick = function() {
    var product;
    shopClient.fetchProduct(6829802497)
      .then(function (product) {
        product = product;
      });

    var variant = product.variants[0];
    var checkoutURL;
    checkoutURL = variant.checkoutUrl(1); 

    cart.addVariants({variant: product.selectedVariant, quantity: 1}).then(function (cart) {

    });
    updateModel();
}
});

My codepen has some improvements I made like running the client creation and initial cart creation in a function and then running the click listening in a document.ready() function,

http://codepen.io/lopupen/pen/PzKgQK?editors=1111

I am doing this so I can style my own site and can just apply ID's to buttons to indicate if a product should be added to the cart, or directly lead to checkout out. There's also no clear indication of how to toggle the cart in the sdk support repo.

If someone much smarter than myself to instruct me on what I'm missing about how to use these angular js node.js promises and objects.

Cheers and thanks, btw, the ceo is retardedly genius

And I get this console error saying my url is deprecated, but it's the right domain... you don't include .myshopify.com. do you? Just the domain?

https://gyazo.com/4959b10465d24e2954d53a7ce0b10ee5

Something else to note is that there are two different indicated ways to start a client, and following instructions from two different pages would probably clash if you weren't aware of this.

Have a look at this page: http://shopify.github.io/js-buy-sdk/#creating-a-shop-client

It tells you to

var shopClient = ShopifyBuy.buildClient({
  apiKey: 'your-api-key',
  myShopifyDomain: 'your-myshopify-domain',
  appId: '6'
});

but here: http://shopify.github.io/js-buy-sdk/examples/

$(function() {
  var client = ShopifyBuy.buildClient({
    apiKey: 'your-api-key',
    myShopifyDomain: 'your-myshopify-domain',
    appId: '6'
  });
});

it simply tells you to use client, which might be okay but that on the same page as they use client.etc.. they also use client in an example,

client.fetchProduct('your-product-id').then(function(product) {

  var html =
  "<img class='product__image' src='" + product.selectedVariantImage.src + "' >" +
  "<h2 class='product__title'>" + product.title + "</h2>" +
  "<a class='product__buy' href='" +
    product.selectedVariant.checkoutUrl(1) +
  "'>Buy Now!</a>";

  $('#product-1').html(html);

});

but on a that other page they use shopClient in examples too, so if you were mixing example code this is just a little annoying, maybe people don't know about it. I would think the shopify ceo is a bit more of a perfectionist than this hard to use thing. It seems that in most cases the client should be defined as shopClient, but in the example documents there's a huge js file where client alone is used. lol

https://github.com/Shopify/js-buy-sdk/blob/master/examples/cart/index.js

richgilbank richgilbank · Accepted Answer · 2016-07-08T15:24:07

There's a lot of questions in here, but I'll try to break them down one at a time.

With regards to what comes back from ShopifyBuy.buildClient(...), it returns an instance of ShopClient. ShopClient has the instance methods on it to make the necessary calls to Shopify.
The cart is created when you called shopClient.createCart(), which returns a Promise which resolves to an instance of a CartModel. No need to call the CartModel constructor directly.
The JS Buy SDK is purely a JavaScript library. It includes no UI out of the box, though if you're looking for some UI to use with it, there is an example of using a cart in the Github repo, which should help you get up and running.
You most likely want to fetch the product before users click the button, so that you have it loaded and your page can interact quickly.
As of version 0.2.0 (released yesterday), myShopifyDomain has been deprecated in favour of domain. As a result, it's now looking for the string to include the full path to your domain, such as "my-store.myshopify.com" (instead of just "my-store", which it used to expect). We're updating docs throughout the site currently.
Good point about the naming. They're both variables so their names are unrelated to what they do, but even though they're being mentioned in different places, it would be good for them to be written the same. We'll take a look at fixing it up (or feel free to submit a Pull Request yourself!)

I can't quite tell if you're looking to add the product to a cart or just checkout with the one product. If you're looking to add it to cart, this should do it (looks like you have jQuery available):

$(document).ready(function() {
  var shopClient = ShopifyBuy.buildClient({
    apiKey: 'private',
    myShopifyDomain: 'my-leisure',
    appId: '6'
  });

  var cartPromise = shopClient.createCart();
  var productPromise = shopClient.fetchProduct(6829802497);

  $('#mg-240').on('click', function() {
    Promise.all([cartPromise, productPromise]).then(function(promises) {
      var cart = promises[0];
      var product = promises[1];
      cart.addVariants({variant: product.selectedVariant, quantity: 1});
      // do stuff
    });
  });
});

If you're looking to simply checkout with the first variant in the product, this is an even simpler version:

$(document).ready(function() {
  var shopClient = ShopifyBuy.buildClient({
    apiKey: 'private',
    myShopifyDomain: 'my-leisure',
    appId: '6'
  });

  var productPromise = shopClient.fetchProduct(6829802497);
  $('#mg-240').on('click', function() {
    productPromise.then(function(product) {
      window.location = product.selectedVariant.checkoutUrl(1);
    });
  });
});

If JavaScript Promises are unfamiliar, I'd recommend reading the MDN docs or this introduction to them.

Hope this helps!

Shopify Buy SDK getElementById().onClick functions not getting products properly

1 Answers