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

Question

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

我有点菜鸟，但我对 js 足够了解。但这还不够，shopify but sdk support page 告诉我使用像

这样的东西

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

创建一个新的购物车模型，这是它的构造函数。但它是什么，我也不知道，它是否包括侧栏购物车 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();
}
});

我的代码笔有一些改进，比如在函数中运行客户端创建和初始购物车创建，然后在 document.ready() 函数中运行点击监听，

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

我这样做是为了设计我自己的网站，并且可以将 ID 应用于按钮以指示是否应将产品添加到购物车，或者直接导致结帐。也没有明确指示如何在 sdk 支持 repo 中切换购物车。

如果有人比我聪明得多来指导我关于如何使用这些 angular js node.js promises 和对象我缺少什么。

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

我收到此控制台错误，提示我的 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.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(...) 返回的内容, 它返回 ShopClient 的一个实例. ShopClient 具有对 Shopify 进行必要调用的实例方法。

• 购物车是在您调用 shopClient.createCart() 时创建的，它返回一个 Promise解析为 CartModel 的一个实例.无需直接调用 CartModel 构造函数。

• JS Buy SDK 纯粹是一个 JavaScript 库。它不包含开箱即用的 UI，但如果您正在寻找一些与之一起使用的 UI，则有一个 example of using a cart。在 Github 存储库中，它应该可以帮助您启动和运行。

• 您很可能希望在用户点击按钮之前获取产品，以便加载产品并且您的页面可以快速交互。

• 截至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 .

希望这对您有所帮助!