title: Shopify Buy SDK getElementById().onClick functions not getting products properly
body: <p>SHOPIFY, I must say, your sdk support is lacking.</p>
  
  <p>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 </p>
  
  <pre><code>var shopClient = ShopifyBuy.buildClient({
      apiKey: 'private',
      myShopifyDomain: 'my-leisure',
      appId: '6'
    });
  </code></pre>
  
  <p>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.</p>
  
  <p>It tells me to use things like </p>
  
  <pre><code>var cart;
      shopClient.createCart().then(function (newCart) {
        cart = newCart;
          // do something with updated cart
  
      });
  </code></pre>
  
  <p>So I know this makes the cart, the virtual cart, nothing for the front end
  and</p>
  
  <pre><code>new CartModel();
  </code></pre>
  
  <p>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? </p>
  
  <p>then it tells me to use</p>
  
  <pre><code>var product;
  shopClient.fetchProduct(6829802497)
      .then(function (product) {
      product = product;
  });
  </code></pre>
  
  <p>..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.</p>
  
  <p>So I create a button with the Id mg-240 and listen for a click to make the product .</p>
  
  <pre><code>$(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();
  }
  });
  </code></pre>
  
  <p>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, </p>
  
  <p><a href="http://codepen.io/lopupen/pen/PzKgQK?editors=1111" rel="nofollow">http://codepen.io/lopupen/pen/PzKgQK?editors=1111</a></p>
  
  <p>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. </p>
  
  <p>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.</p>
  
  <p>Cheers and thanks, btw, the ceo is retardedly genius </p>
  
  <p>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?</p>
  
  <p><a href="https://gyazo.com/4959b10465d24e2954d53a7ce0b10ee5" rel="nofollow">https://gyazo.com/4959b10465d24e2954d53a7ce0b10ee5</a></p>
  
  <p>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.</p>
  
  <p>Have a look at this page: <a href="http://shopify.github.io/js-buy-sdk/#creating-a-shop-client" rel="nofollow">http://shopify.github.io/js-buy-sdk/#creating-a-shop-client</a></p>
  
  <p>It tells you to</p>
  
  <pre><code>var shopClient = ShopifyBuy.buildClient({
    apiKey: 'your-api-key',
    myShopifyDomain: 'your-myshopify-domain',
    appId: '6'
  });
  </code></pre>
  
  <p>but here: <a href="http://shopify.github.io/js-buy-sdk/examples/" rel="nofollow">http://shopify.github.io/js-buy-sdk/examples/</a></p>
  
  <pre><code>$(function() {
    var client = ShopifyBuy.buildClient({
      apiKey: 'your-api-key',
      myShopifyDomain: 'your-myshopify-domain',
      appId: '6'
    });
  });
  </code></pre>
  
  <p>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,</p>
  
  <pre><code>client.fetchProduct('your-product-id').then(function(product) {
  
    var html =
    "&lt;img class='product__image' src='" + product.selectedVariantImage.src + "' &gt;" +
    "&lt;h2 class='product__title'&gt;" + product.title + "&lt;/h2&gt;" +
    "&lt;a class='product__buy' href='" +
      product.selectedVariant.checkoutUrl(1) +
    "'&gt;Buy Now!&lt;/a&gt;";
  
    $('#product-1').html(html);
  
  });
  </code></pre>
  
  <p>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</p>
  
  <p><a href="https://github.com/Shopify/js-buy-sdk/blob/master/examples/cart/index.js" rel="nofollow">https://github.com/Shopify/js-buy-sdk/blob/master/examples/cart/index.js</a></p>