menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

Gatsby

Fast in every way that matters. Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.

Channels
Team

Tips on building ecommerce with Gatsby

July 30, 2018 at 5:33pm

Tips on building ecommerce with Gatsby

July 30, 2018 at 5:33pm (Edited 4 years ago)
Hey everyone,
So I'm trying to figure out the best approach to building an ecommerce solution with Gatsby. What I'm thinking of doing is integrating Snipcart onto a Gatsby site and using Netlify's lambda functions to perform any backend actions.
What I'm struggling to get my head around is which parts should be generated as static pages, and which parts should be part of a "hybrid app".
I also should point out a couple of details:
  • All the product data will be pulled in via an API call to an external service
  • Each product "item" from the data set represents a single item. So my store will have no concept of a quantity of items in stock, only of an item is for sale or not.
Lets say the product listing & product detail pages are all generated during Gatsby's build step:
  • The issue that I'm anticipating here is that there will be a gap when the site is rebuilding between when an item has been bought or source data has changed.
    • In this window where the site is re-building customers browsing the site could potentially purchase an item that has just been purchased. (Though a check could possibly implemented here via SnipCart's webooks to prevent the item being purchased twice).
    • I can see caching issues potentially cropping up here especially as site rebuilds would be automated.
The other solution I can see then is to have a "hybrid-app" which hits this API and renders the product data on the fly.
  • So this would apply to the product listing & product detail pages, as it would ensure a user is seeing the current product data
    • But this seems to defeat the point of using Gatsby as most of the site won't be statically generated.
If anyone has any experiences they could share or advice they could offer on this Ill be super thankful!
All the best,
Alex

July 30, 2018 at 5:36pm
We went with the hybrid approach. The site and its content are all baked with Gatsby. But the the inventory (out of stock or "Buy It Now" button) is done on the fly. We also prefetch inventory from any page, so the user usually won't even see a loading animation on the buy buttons. If you want to only render product that's in stock, you could just show the out of stock message until the site is rebuilt, which then Gatsby would only render in-stock product.
like-fill
2
Kennedy, this sounds like a solid solution!
I'm going to jump into the project and try implementing this evening, thank you!
I'd not come across this snipcart article yet, thanks for sharing!
This is also the actual gatsby store codebase: https://github.com/gatsbyjs/store.gatsbyjs.org
like-fill
3
From looking at this repo - is it an issue to have the shopify store access token available in the files to the public? Or is it the case that the Shopify Storefront API is only reading client side data and thus cant access things like quantity of product etc..?
That's a great question - we should test out with their api key and find out :P
If you need to use a private key though, I would recommend triggering lambda functions to do so.
So reading the shopify storefront api you can query if the product is available for sale i.e. Has greater than one quantity. But the quantity value of each product is only available on the admin api which is authenticated so I presume this could be done with said lambda function? Likewise for the 0auth for their rep would that take a lambda function or would it just use a database like firebase?
Sorry for the many questions I have been thinking about these problems for a while for when I want to open a store for my wife's business

July 31, 2018 at 9:50pm
I don't have any experience with Shopify, but Snipcart is a great solution for static sites. You won't have to do any API calls, Snipcart will handle all that on their end.
like-fill
1
Show more messages