Shopify is a really excellent and increasingly robust ecommerce platform. Creating an online store can help with your product's web presence. You may equally want to include your product on other sites (maybe you run a blog and want to have a featured product purchaseable from a sidebar) or do not need a full-blown shop right away. This is where the Shopify Javascript SDK comes in. With the Javascript SDK you can pull in product information, set up a cart, and send customers to checkout so you can add eccommerce functionality to any site.
In this post we will show you how to get setup with the Shopify SDK and pull in product information from an existing Shopify store.
Let's get started!
The Setup
In order to start using the Javascript SDK you need to include the sales channel in your store.
From your admin panel, navigate to Settings > Sales channels.
Select Add Sales Channel and from the list pick the Buy Button. Once you have added the Buy Button sales channel click into it and you will see some options for integrations listed. At the top there are options for the Buy Button and below a section to create an extension for the Javascript Buy SDK. Click to create an extension. You should be directed to a page with your access token. Great!
Copy this access token as we will use it in the next step.
Getting Started with the Javascript SDK
🔥 Tip - For the purpose of this exercise we are going to pull products in to a static html site. Accordingly, we have set up an index.html page and a scripts.js page, but you could include the products in any site you might be working on
Now that you have set everything up in the admin let's start writing some code. The SDK makes it easy to get up and running with a bunch of handy helper methods. Before we can start displaying products and building carts we need to make sure to include the source code in our project.
We are going to use the cdn:
http://sdks.shopifycdn.com/js-buy-sdk/v0/latest/shopify-buy.umd.polyfilled.min.js
We are also going to include the jQeury cdn in our page as we will use this to append our products to the DOM.
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
Now we are all set to bring in the product info and display the products.
Setting Up the Shop Client
The shop client is the primary interface through which we will make requests to our shop so let's set it up at the top of our scripts like this:.
const shopClient = ShopifyBuy.buildClient({
apiKey: 'your-api-key',
domain: 'your-store.myshopify.com',
appId: '6'
})
The apiKey is the one you held onto from the Javascript Buy SDK channel in the admin. The domain is your store domain without any https:// and the appId is generally 6, but you can confirm this in your shopify admin where you retrieved your api key 😁
Now that you have that all set up, let's use the shopClient and make a request to retrieve all of the products from your shop. We are going to make a request to get all of the products, that will look something like this:
shopClient.fetchAllProducts()
.then((products) => {
console.log(products)
})
.catch(() => {
console.log('Request failed');
})
We are going to use the fetchAllProductsmethod to well, fetch all the products. For now we will just log the products to the console. Take a moment and make sure the request is working and check out the product data you get back.
🔥 Tip - make sure your products are published to the Buy SDK channel. If you look at a product in the admin system at the top under visibility it will have the Buy button box checked indicating it is published to this channel.
Display Your Products on Your Website
Now that your product data is comming in, it's time to actually put some product information on the page. We are going to set up a build product method that will take in one parameter, your product data, and build some product markup and append it to the page. First let's create a containing element in your html markup to append the products to:
We are going to use a div element with and id of products.
Now back in the javascript we are going to make our build product function that will look a little something like this:
var buildProducts = (products) => {
products.forEach((product) => {
let productContainer = $('<div/>').attr('id', `product_${product.attrs.product_id}`)
let title = `${product.attrs.title}
`
let img = `
`
let price = `${product.attrs.variants[0].formatted_price}
`
productContainer.append(title, img, price)
$('#products').append(productContainer)
})
}
Our buildProducts function will iterate through the list of returned products and create a heading, image, and paragraph element for each product. We will then append those to a product container with an id referencing the product id. Finally we will append each product to the div with an id of products we created in our markup earlier.
Putting it All Together
We can get the product info from the SDK and have created a function to display it on the page. Let's bring it all together and run the buildProducts function in the success of the request to get the products. It will look like this:
const shopClient = ShopifyBuy.buildClient({
apiKey: 'your-api-key',
domain: 'your-store.myshopify.com',
appId: '6'
})
shopClient.fetchAllProducts()
.then((products) => {
buildProducts(products)
})
.catch(() => {
console.log('Request failed');
})
let buildProducts = (products) => {
products.forEach((product) => {
let productContainer = $('<div/>').attr('id', `product_${product.attrs.product_id}`)
let title = `${product.attrs.title}
`
let img = ``
let price = `${product.attrs.variants[0].formatted_price}
`
productContainer.append(title, img, price)
$('#products').append(productContainer)
})
}
And there you have it! You should now have products from your shop displayed on your external site 🎉
