添加shopify购买按钮到meteor js网站

时间:2017-10-16 16:48:18

标签: javascript meteor web shopify

不确定使用Buy按钮连接meteor 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购买网址的shopify调用成功,有时无法记录'请求失败'消息。不确定失败是否与重复使用相同的产品ID有关!​​

由于我不确定是否如上所述直接使用Shopify API或使用meteor shopify软件包,我还将https://github.com/froatsnook/meteor-shopify软件包添加到我的项目中,并对此软件包进行了身份验证。但是从包API /演示中不清楚如何使用此包来启用Shopify Buy。

总体来说,我不清楚使用Shopify with Meteor JS的最佳/正确方法是什么。是不是已经开始了,还是不再适用?理想情况下,最好直接去Shopify,但不确定它如何与流星一起使用。

任何有关将Shopify购买按钮添加到Meteor JS项目的帮助都将不胜感激。

2 个答案:

答案 0 :(得分:1)

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

这样的事情应该做:

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

如果信息太少,很难说是什么。

编辑:

像这样使用

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

答案 1 :(得分:0)

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

根据从调用products[i][j].shopifyBuyUrl=product.selectedVariant.checkoutUrl(1);的结果创建购买按钮网址的原因,我不确定我最初尝试过的方法是否也可行。