Ad

Add Shopify Buy Button To Meteor Js Website

- 1 answer

Not sure of best approach to hook up meteor js website to shopify using a Buy Button. To initializie the Shopify API - http://shopify.github.io/js-buy-sdk/ - directly, I import the shopify-buy and shopify-promise npm packages using

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

These packages appear in 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"
  },

There is this example from 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);

});

But not sure how I pass this html back to meteor js template since I need to pass back data only.

Using similar JS code as above, I did try to add the Shopify button url to each of my products as a shopifyBuyUrl field. I do this in 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],
                });
        }
}

The above code is able to authenticate successfully with Shopify and create the shopClient instance. The shopify call to create the Shopify Buy url is successful sometimes and sometimes it fails logging the 'Request failed' message. Not sure if failures are related to using the same product id repeatedly!

Since I am unsure whether to use the Shopify API directly as above or use a meteor shopify package, I also added the the https://github.com/froatsnook/meteor-shopify package to my project and authentication worked for this package. But it is not clear from the package API/demos how to use this package to enable Shopify Buy.

So overall its not clear to me what is best/correct approach to use Shopify with Meteor JS. Is froatsnook the way to go or is it no longer applicable? Ideally it seems best to go directly to Shopify but not sure how it works with meteor.

Any help with adding the Shopify Buy Button to a Meteor JS project would be appreciated.

Ad

Answer

The fix is based on this link https://help.shopify.com/manual/sell-online/buy-button/create-buy-button. The code is embedded in the body of the page. I store the variables for shopify prod id and shopify prod component in the source data for each product. Its possible to pull all or some of the product data from shopify or use the data from MongoDB that the meteor website stores.

Not sure if the approach I had initially tried, based on creating a Buy Button url from result of calling products[i][j].shopifyBuyUrl=product.selectedVariant.checkoutUrl(1); could also work.

Ad
source: stackoverflow.com
Ad