将 shopify 购买按钮添加到流星 js 网站答案

【问题标题】：Add shopify buy button to meteor js website将 shopify 购买按钮添加到流星 js 网站
【发布时间】：2017-10-16 16:48:18
【问题描述】：

不确定连接流星 js 网站以使用购买按钮进行购物的最佳方法。要直接初始化 Shopify API - http://shopify.github.io/js-buy-sdk/ - 我使用

导入 shopify-buy 和 shopify-promise npm 包

meteor npm install --save shopify-buy
meteor npm install --save shopify-promise

这些包出现在 package.json 中

},
  "dependencies": {
    "babel-runtime": "^6.26.0",
    "bcrypt": "^1.0.3",
    "shopify-buy": "^0.7.1",
    "shopify-promise": "0.0.5",
    "simpl-schema": "^0.3.2"
  },

http://shopify.github.io/js-buy-sdk/examples/有这个例子

<em>After fetching a product with the product ID we use the promise function to generate some markup with the required attributes and content, and add it inside our HTML container element.</em>

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

});

但由于我只需要传回数据，因此不确定如何将此 html 传回流星 js 模板。

使用与上面类似的 JS 代码，我确实尝试将 Shopify 按钮 url 作为 shopifyBuyUrl 字段添加到我的每个产品中。我在 server/startup.js 中这样做

    Meteor.startup(function() {
        var shopifyBuyUrl = require('shopify-buy');

       const shopClient = shopifyBuyUrl.buildClient({
            api_key: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
            accessToken: 'yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy',
            domain: 'test1.myshopify.com',
            appId: '6'
    });
    [ ... then I have code here that loads the product categories array - this array has 6 categories and an array of products within each category ...]
    [next I try and pre-fill the shopifyBuyUrl value for each product] 

    for (var i=0; i < 6; i++) {
            // fetch a product using resource id
            for (var j=0; j < products[i].length; j++) {
                // shopify product id is hardcoded for now
                products[i][j].shopifyProductId='12836712587';

                shopClient.fetchProduct('12836712587').then(function(product) {

                products[i][j].shopifyBuyUrl=product.selectedVariant.checkoutUrl(1);
                })
                    .catch(function () {
                            console.log('Request failed');
                    });
                }
            }       

        console.log('Inserting categories into MongoDB ...');
        for (var i=0; i < 6; i++) {
            Categories.insert(
                {
                    img_alt:name[i],
                    img_src:src[i],
                    desc:desc[i],
                    products:products[i],
                });
        }
}

以上代码能够成功通过 Shopify 身份验证并创建 shopClient 实例。创建 Shopify Buy url 的 shopify 调用有时会成功，有时会失败并记录 'Request failed' 消息。不确定失败是否与重复使用相同的产品 ID 有关！

由于我不确定是直接使用上面的 Shopify API 还是使用流星 shopify 包，我还在我的项目中添加了 https://github.com/froatsnook/meteor-shopify 包，并且此包的身份验证工作。但是从包 API/Demos 中并不清楚如何使用这个包来启用 Shopify Buy。

所以总的来说，我不清楚将 Shopify 与 Meteor JS 一起使用的最佳/正确方法是什么。 froatsnook 是要走的路还是不再适用？理想情况下，最好直接访问 Shopify，但不确定它如何与流星一起使用。

如有任何关于将 Shopify Buy Button 添加到 Meteor JS 项目的帮助，我们将不胜感激。

【问题讨论】：

标签： javascript meteor web shopify

【解决方案1】：

您确定在使用之前需要该库吗？

应该这样做：

var ShopifyBuy = require('shopify-buy');

用这么少的信息很难确定发生了什么。

编辑：

这样使用

const shopClient = ShopifyBuy.buildClient({
  accessToken: 'bf081e860bc9dc1ce0654fdfbc20892d',
  appId: 6,
  domain: 'embeds.myshopify.com'
});

【讨论】：

我添加了那个 var 但我得到了W20171016-21:19:23.685(1)? (STDERR) Error: new Config() requires the option 'accessToken' 我还更新了我的 Q 并提供了更多细节，希望能更清楚。
将 'var' 更改为 'const' 并添加访问令牌有效。感谢那。现在只需要将购买按钮添加到我的产品订单中。当我在 server/startup.js 中构建数组时，考虑将“购买按钮”url 添加到产品数组中。虽然我不清楚“1”在这里指的是什么？ product.selectedVariant.checkoutUrl(1)
@striker77 var to const 不会影响它是否有效。我不太确定您对 product.selectedVariant.checkoutUrl(1) 的意思是什么。如果有帮助，请不要忘记将我的答案选为正确！ :)
关键部分是将 Shopify Buy 按钮与 Meteor JS 中呈现的产品页面集成的最佳方式是什么？我可以使用 Shopify API 或 froatsnook/meteor-shopify 哪个效果最好。

【解决方案2】：

修复基于此链接https://help.shopify.com/manual/sell-online/buy-button/create-buy-button。代码嵌入在页面正文中。我将 shopify prod id 和 shopify prod 组件的变量存储在每个产品的源数据中。可以从 shopify 中提取全部或部分产品数据，也可以使用流星网站存储的 MongoDB 中的数据。

不确定我最初尝试的基于调用products[i][j].shopifyBuyUrl=product.selectedVariant.checkoutUrl(1); 的结果创建购买按钮网址的方法是否也可以工作。

【讨论】：