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

Question

SHOPIFY，我必须说，你缺乏对 sdk 的支持。

我是个菜鸟，但我对 js 了解得够多了。但这还不够，shopify 但 sdk 支持页面告诉我使用诸如

之类的东西

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

创建我的shopClient，就是这样，我不是特别知道我构建了什么，我不知道它是否只是一个具有该数组的对象还是已经构建了更多。

它告诉我使用类似的东西

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 承诺和对象。

干杯和感谢，顺便说一句，首席执行官是智障

我收到这个控制台错误，说我的网址已被弃用，但它是正确的域...您不包括 .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 的 CEO 更像是一个完美主义者，而不是这个难以使用的东西。似乎在大多数情况下，客户端应该定义为 shopClient，但在示例文档中，有一个巨大的 js 文件，其中仅使用了客户端。哈哈

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

Answer 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”（而不是它曾经期望的“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 Promises，我建议阅读 MDN docs 或 this introduction to them。

希望这会有所帮助！