JS Buy SDK

Solved
Highlighted
Tourist
3 1 0

Does anyone have any tips for integrating the JS Buy SDK into an existing website?

I have followed what documentation I can find but keep running into an error while attempting to establish my API connection. I keep getting "Uncaught SyntaxError: Cannot use import statement outside a module" when attempting to using

import { Client } from 'shopify-buy';

 

I'll admit that I'm very experienced with Javascript but this seems like it should be a rather straight forward process.

0 Likes
Highlighted
Tourist
3 1 0

I got it figured out :)

0 Likes
Highlighted
New Member
1 0 1

What was the solution?

1 Like
Highlighted
New Member
2 1 1

What was the solution? I'm having the same problem.

0 Likes
Highlighted
New Member
1 0 0

Could you please tell us what the solution is?!?

0 Likes
Highlighted
New Member
2 1 1

This is an accepted solution.

I think I got it figured out.

 

I just removed the whole "import" statement completely, then initialized the client with ShopifyBuy instead of Client. So my code is:

 

 
<script src="https://sdks.shopifycdn.com/js-buy-sdk/v2/latest/index.umd.min.js"></script>
<script>
// Initialize the client
var client = ShopifyBuy.buildClient({
  domain: 'my-store-url.myshopify.com',
  storefrontAccessToken: 'my-access-token'
});
// do something with the client
</script>
 
1 Like
Highlighted
Tourist
3 1 0

This is an accepted solution.

Sorry for the late response but it appears BillySwifty has come to conclusion I had. My code for loading a product to a page is listed below lol

I load the JS Buy Button SDK with the following code in the top header of my html on a product page

<script src="https://sdks.shopifycdn.com/buy-button/1.0.0/buybutton.js"></script>


I then have a JavaScript file in my site directory named main_product.js and make sure I load at the bottom of my page right before the close of the body

<script src="main_product.js"></script>
</body>
</html>

The main_product.js file first initializes my connection to the Shopify API using the storefront URL Handle and AccessToken I generated from the Shopify Dashboard as follows Apps>ManagePrivateApps>CreateNewPrivateApp

var client = ShopifyBuy.buildClient({
    domain: '<YourShopifyHandle>.myshopify.com',
    storefrontAccessToken: '<CreateTokenViaManagePrivateAppsInShopifyDashboard>'
  });

var ui = ShopifyBuy.UI.init(client);


Then I build my product component and reference various data tags I have configured to pull in the product ID and other variables I use to control color and such. However, below I have posted a very simple product component you can build.

ui.createComponent('product', {
    id: id_product.value,
	node: document.getElementById('product'),
    options: {
      product: {
	width: '100%',
	layout: 'horizontal',
          contents: {
	    img: true,
            description: true,
            button: true,
	  },
	 }
}
})

I recommend reading the Buy Button SDK documentation available on GitHub at https://github.com/Shopify/buy-button-js/blob/master/docs/customization/index.md

0 Likes