Shopify Buy SDK getElementById().onClick 功能无法正确获取产品

Question

SHOPIFY，我必须说，你的 sdk 支持不足。

我有点菜鸟，但我对js了解足够了。但这还不够，shopify 但 sdk 支持页面告诉我使用

之类的东西

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

创建我的 shopClient，就是这样，我不是特别知道我 built，我不知道它是否只是一个具有该数组的对象或更多已经 built.

它告诉我使用

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

    });

所以我知道这使得购物车，虚拟购物车，对前端没有任何帮助和

new CartModel();

它创建了一个新的购物车模型，即它的构造函数。但它是什么，idk，它是否包括侧栏推车 ui 的 css？

然后它告诉我使用

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 支持 repo 中切换购物车。

如果有人比我聪明得多来指导我关于如何使用这些 angular js node.js 承诺和对象的缺失。

干杯，谢谢，顺便说一句，首席执行官是个天才

我收到此控制台错误，提示我的 url 已被弃用，但它是正确的域...您不包括 .myshopify.com。你？只是域名？

https://gyazo.com/4959b10465d24e2954d53a7ce0b10ee5

还有一点需要注意的是，有两种不同的指示方式来启动客户端，如果您没有意识到这一点，那么遵循两个不同页面的说明可能会发生冲突。

看看这个页面：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，所以如果您混合使用示例代码，这会有点烦人，也许人们并不知道。我认为 shopify 的首席执行官比这个难以使用的东西更像是一个完美主义者。似乎在大多数情况下客户端应该定义为shopClient，但是在示例文档中有一个巨大的js文件，其中单独使用了客户端。哈哈

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

Answer 1

这里有很多问题，但我会尝试逐一分解。

关于 ShopifyBuy.buildClient(...), it returns an instance of ShopClient 返回的内容。 ShopClient 具有对 Shopify 进行必要调用的实例方法。
购物车是在您调用 shopClient.createCart(), which returns a Promise which resolves to an instance of a CartModel 时创建的。无需直接调用 CartModel 构造函数。
JS Buy SDK 纯粹是一个 JavaScript 库。它不包括开箱即用的 UI，但如果您正在寻找一些 UI 来使用它，Github 存储库中有一个 example of using a cart，它应该帮你起床运行.
您很可能希望在用户单击按钮之前获取产品，以便加载产品并且您的页面可以快速交互。
自 version 0.2.0（昨天发布）起，myShopifyDomain 已被弃用，取而代之的是 domain。因此，它现在正在寻找包含您域的完整路径的字符串，例如 "my-store.myshopify.com"（而不是它过去期望的 "my-store"）。我们目前正在更新整个站点的文档。
关于命名的要点。它们都是变量，所以它们的名字与它们的作用无关，但即使在不同的地方提到它们，最好将它们写成相同的。我们会看看如何修复它（或者随时 submit a Pull Request 自己！）

我不太清楚您是要将产品添加到购物车还是只使用一个产品结帐。如果您想将它添加到购物车，应该这样做（看起来您有 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 Promise 不熟悉，我建议阅读 MDN docs or this introduction to them。

希望对您有所帮助！

Shopify Buy SDK getElementById().onClick 功能无法正确获取产品

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

javascript

jquery

shopify

angularjs