Shopify SDK getElementById（）。onClick関数が正しく商品を取得できない

Question

SHOPIFY、あなたのSDKのサポートが不足しています。

私は少しノブですが、私はjsについて十分に知っています。それは私が特に私が組み込まれているかわからない、ということですので、このかかわらずのために十分ではない、shopifyが、SDKサポートページには、私のshopClientを作成するために

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

のようなものを使用するように私に語った、私はかどうかを知りませんその配列以上のオブジェクトが構築されただけです。

それは、だから私は、これは新しいカート・モデルを作成し、カート、仮想カート、フロントエンド のための何もして

new CartModel(); 

になります知っている

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

    }); 

のようなものを使用するように私に指示、それはそれのためのコンストラクタです。しかし、それは何ですか、idkどちらか、それはサイドバーカートのCSSのためのCSSを含んでいますか？

それは私が望む製品をフェッチ..to

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

を使用するように私に語りました。しかし、私はこれをいつ行うのですか、私はそれを私のカスタム購入ボタンのクリックで行うべきだと思っていました。

私はID mg-240でボタンを作成し、製品を作るためのクリックを聞きます。

$(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(); 
} 
}); 

私codepenは、私は関数の中で、クライアントの作成と初期のカートの作成を実行して、document.readyに聞いてクリックを実行するように作られたいくつかの改良（）関数で、

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

を持っています私は自分のサイトをスタイルすることができるようにこれをやっているので、カートに商品を追加するか、チェックアウトに直接つながるかを示すためにボタンにIDを適用するだけです。 sdkサポートレポでカートを切り替える方法の明確な表示もありません。

これらの角度js node.jsの約束事とオブジェクトの使い方について私が迷っていることについて教えてくれる人がいれば、

乾杯と感謝、ところで、最高経営責任者（CEO）はretardedly天才

であり、私は私のURLが推奨されていませんと言って、このコンソールのエラーが出るが、それは、あなたは.myshopify.comが含まれていません...右のドメインです。あなたは？ちょうどドメインですか？注意すべき他の

https://gyazo.com/4959b10465d24e2954d53a7ce0b10ee5

何かがクライアントを起動するには、2つの異なる指示された方法があるということです、そしてあなたがこのことを認識していなかった場合は、2つの異なるページからの次の命令は、おそらく衝突でしょう。

は、このページを見てください：http://shopify.github.io/js-buy-sdk/#creating-a-shop-client

それは

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

が、ここに説明します：http://shopify.github.io/js-buy-sdk/examples/

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

それは単に大丈夫であるかもしれない、クライアントを使用するように説明します彼らはclient.etcを使用するのと同じページにあります。例ではクライアントも使用しています。

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); 

}); 

しかし、他のページでも例でshopClientを使用しています。したがって、サンプルコードを混合していた場合、これはちょっと面倒です。おそらく人々はそれについて知りません。私は商業化されたCEOがこれを使うのが難しいことよりももう少し完璧主義者だと思うだろう。ほとんどの場合、クライアントはshopClientとして定義する必要がありますが、サンプルドキュメントでは、クライアントだけが使用される巨大なjsファイルがあります。笑

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

Answer 1

あり多くの質問がここにありますが、私は、一度に1つのそれらを打破しようとするでしょう。 ShopifyBuy.buildClient(...)から戻って来るものに関して

• 、それはShopClientのインスタンスを返します。 ShopClientには、Shopifyに必要な呼び出しを行うインスタンスメソッドがあります。

• shopClient.createCart()を呼び出したときにカートが作成され、Promiseが返され、CartModelのインスタンスに解決されます。 CartModelコンストラクタを直接呼び出す必要はありません。

• JS Buy SDKは純粋にJavaScriptライブラリです。それにはUIは含まれていませんが、使用するUIを探している場合は、Githubリポジトリにexample of using a cartがあり、起動して実行するのに役立ちます。

• ユーザーがボタンをクリックする前に製品を取得して、ロードしてページをすばやく操作できるようにすることが最も一般的です。

• version 0.2.0（昨日リリース）から、myShopifyDomainは、domainの方が推奨されていません。その結果、現在は「my-store.myshopify.com」（期待していた「マイストア」ではなく）など、ドメインへのフルパスを含める文字列が検索されています。現在、サイト全体のドキュメントを更新しています。

• 命名については良い点があります。彼らは両方の変数なので、名前は自分の名前とは無関係ですが、別の場所で言及されているにもかかわらず、同じように書かれていると良いでしょう。私たちは（自分をかsubmit a Pull Requestお気軽に！）それを固定で見てみましょう

あなたは1でカートや単にチェックアウトに製品を追加するために探しているなら、私は非常に伝えることはできません製品。あなたは、カートに追加する探しているなら、これはそれを行う必要があります（あなたはjQueryの利用可能なように見える）：

$(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 
    }); 
    }); 
}); 

あなたは、単に製品の最初のバリエーションをチェックアウトするために探しているなら、これはありますでも、簡単なバージョン：

$(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); 
    }); 
    }); 
}); 

JavaScriptの約束は慣れていない場合、私はMDN docsまたはthis introduction to themを読んでお勧めします。

希望すると便利です。