A Detailed Tutorial - Shopify's Storefront API + React + Redux
A Detailed Tutorial - Shopify's Storefront API + React + Redux
Posted on November 7, 2018
Originally published on the Siren Apparel Press on Medium
A Detailed Tutorial: Shopify’s Storefront API + React + Redux
E-commerce for all! (…websites, that is 😄)
Written by Chris on Wednesday, August 22nd, 2018
Background and Motivation
So the motivation here was pretty simple. I wanted my users to be able to browse, search, and select products directly on my custom domain without having to go to Shopify.
The secondary motivation is that I’d much rather have my own codebase for a website than use one of Shopify’s factory templates. No offence Shopify team! The templates are modern and clean, but they are rather basic.
So this is the best of both worlds — my custom React site (already built and online 😄), with the added API and checkout process of Shopify!
By the end of this tutorial, you’ll be able to add your Shopify products on any page of your site. The only part of the shopping process that will occur on Shopify is when the user clicks ‘Checkout’.
The motivation specifically for writing here on Medium was simply that I couldn’t find a tutorial on this process myself— so I decided to make one myself!
I’ve been a professional developer for 4 years now, and programming for 7. I’ve worked in tech stacks from old-school Fortran and Perl to React, Javascript, and Nodejs.
Siren Apparel is one of my side project / startup / maker company that I’ve run for 5 years now, and we’ve donated to 5 different police and fire departments.
Let’s finally get started with this tutorial.
Shopify’s Storefront API
The wonderful folks at Shopify have put together the Storefront API. With the Storefront API, you can create React components to add product pictures, product variations, product sizes, a cart, and ‘add to cart’ and ‘checkout’ buttons into your own, non-Shopify site.
Note that this tutorial is NOT about Shopify Polaris, which is used to create components in React for Shopify store management itself.
Getting Started: react-js-buy
Repository
Take a look at this React example built by the Shopify team. Most of the code in this walkthrough tutorial comes from that repository.
…Did you take a look? Good!
Now we’re going to hop right into code! Head to your React site’s root folder
and install the shopify-buy
module via the terminal:
cd my-awesome-react-node-project/
npm install --save shopify-buy
(or yarn add shopify-buy
if you prefer yarn
)
Then, in your frontend index.js
, (note: NOT App.js
!) you will need to import
Client
from the JS Buy SDK:
import Client from 'shopify-buy';
Then add the following configuration object above the ReactDOM.render()
call:
const client = Client.buildClient({
storefrontAccessToken: 'your-access-token',
domain: 'your-shopify-url.myshopify.com'
});
That’s it for index.js
for now — we’ll come back to it soon.
Now we’re going to add in all the components needed for a smooth shopping and
checkout experience. Copy all the components from the react-js-buy
repository:
Cart.js
LineItem.js
Product.js
Products.js
VariantSelector.js
We will paste these components into acomponents/shopify/
folder in your src/
folder. You could put these component files anywhere else in the src/
folder,
if you wished. The rest of the tutorial assumes you have put them in
components/shopify/
.
Modifying App.js
App.js
will need extensive changes. First, import that Cart component you just
copied into your own project:
import Cart from './components/shopify/Cart';
If your App.js
component was stateless, like mine, you should be safe copying
this entire constructor()
function:
constructor() {
super();
this.updateQuantityInCart = this.updateQuantityInCart.bind(this);
this.removeLineItemInCart = this.removeLineItemInCart.bind(this);
this.handleCartClose = this.handleCartClose.bind(this);
}
if you already have state, copy only those bind
lines. They are event handler
functions that the Shopify cart needs to function properly.
“But what about state for the cart!?”
You may ask; or:
“What about defining those four methods for the cart!?”
Indeed, that’s coming, but not yet! 😄
You can then append the <Cart/>
component to the bottom of your render()
function, before the ending div. In my opinion, the cart should be accessible
anywhere in your app. I think it makes sense then to put the <Cart/>
component
in the root component of your app:
return (
<div>
...
<Cart
checkout={this.state.checkout}
isCartOpen={this.state.isCartOpen}
handleCartClose={this.handleCartClose}
updateQuantityInCart={this.updateQuantityInCart}
removeLineItemInCart={this.removeLineItemInCart}
/>
</div>
);
So, you may have noticed I didn’t include any code on the event handlers for the cart yet. Additionally, I didn’t address the lack of state components for the cart in App.js.
Well, about halfway through this project, I realized my products component was
not in my App.js
file.
Instead, it was buried about three children components down.
So instead of passing products three levels down to children, and then function handlers all the way back up…
I decided to use…