Integrating Shopify API

🙋Get Help
1

Hi there! I’m trying to build a small store on the Frontity project I’ve set up for a client.
I’m having issues connecting to the Shopify API and I think it’s something to do with my Frontity set-up. I’ve split my index.js into client.js and server.js for env variable reasons.

Obviously i’ve installed the shopify-buy sdk and in my server.js I’ve created the shopify client and passed it into the state (in the docs /examples for React they add theirs into the ReactDOM.render - https://github.com/Shopify/storefront-api-examples/blob/master/react-js-buy/src/index.js

I then tried to call one of the functions to get a product from the shopify store but I get the error
ReferenceError: fetch is not defined at Client.fetcher (webpack-internal:///./node_modules/shopify-buy/index.js:352:431) at Client.send (webpack-internal:///./node_modules/shopify-buy/index.js:416:1244) at ProductResource.fetchAll (webpack-internal:///./node_modules/shopify-buy/index.js:524:131) at eval (webpack-internal:///./packages/jvcparry-theme/src/server.js:12:16) at Module../packages/jvcparry-theme/src/server.js (/Users/natalieclamp/dev/personal/jvcparry/build/server.js:5228:1) at __webpack_require__ (/Users/natalieclamp/dev/personal/jvcparry/build/server.js:27:30) at eval (webpack-internal:///./build/bundling/entry-points/server.ts:3:83) at Module../build/bundling/entry-points/server.ts (/Users/natalieclamp/dev/personal/jvcparry/build/server.js:139:1) at __webpack_require__ (/Users/natalieclamp/dev/personal/jvcparry/build/server.js:27:30) at /Users/natalieclamp/dev/personal/jvcparry/build/server.js:104:18

I think my issue is that I need to pass the initiated client into < App /> but I’m not sure where I do that in Frontity? Maybe then I could access it via props in my other components?

My repo is here (it’s on the shopify-buy-button branch): https://github.com/NatClamp/jvcparry.com/tree/feature/shopify-buy-button

As I said, I’m unsure whether this is something to do with Frontity or the shopify API or something to do with the integration between them - can anyone help, or provide an example?

3

If anyone is interested in the resolution of this, you have to pass in some kind of fetch implementation when initiating the Shopify client - Frontity has their own, so I passed that in, as the person here explains - https://github.com/Shopify/js-buy-sdk/issues/458

6

Very interesting Nat. Thanks for sharing. Just out of curiosity, why did you decide to use Shopify in combination with WP instead of woocommerce? Or the other way around, why did you decide to use WP when you are building the shop part with Shopify.
Just curious :slight_smile:

1 Like
8

Hi @ni.bonev
The person I’m building the site for already had a wordpress.com site with lots of posts. As far as I know wordpress.com can’t get plugins, so I don’t have access to WooCommerce, otherwise I think it probably would have been the better option seeing as it’s free. I considered migrating the site over to WordPress.org but I’m not particularly experienced so I worried about doing that.

9

I understand now. I agree in your case that would be a better solution.
Anyways, I think Frontity’s package and state management is amazing so it will make it quite easy to integrate with shopify.
Good luck

10

Hey @nat.clamp,

Did you solve your issue? It seems so by this