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
Show previous messages

August 13, 2018 at 10:30am
https://rotatebirgerchristensen.com! Currently all products are sold out though, so you won't be able to see it in action. We had a pretty heavy launch.
This was a massive help for me and I ended up solving it the same way: https://github.com/gatsbyjs/store.gatsbyjs.org. Only difference is that I'm also using Contentful, so I have a UI extension in there fetching the products from Shopify, so the editors can match them there and control the product data with more flexibility from inside Contentful.
like-fill
1

January 4, 2019 at 3:45am
Hi, If anyone in this thread has experience integrating Stripe products and payment with Gatsby, I'd love to talk with you -- perhaps even employ you for a few days.
I'd love to pair-program with somebody much better than me to make a single payment form for a single product using Gatsby-plugin-stripe-elements and Gatsby-source-stripe.
like-fill
1

January 20, 2019 at 10:04am
Alex I know I am a bit late to this party, but did you have any troubles with the contentful shopify ui integration ?

January 21, 2019 at 10:20am
Yes I did! It seemed to not return the correct ID. Also, I had some issues with stock since if a product ran out of stock it would only show on the site after a re-build. So I ended up matching the products in Contentful and Shopify by their slug and then fetching stock from Shopify directly from within Gatsby

January 26, 2019 at 4:37pm
good to know, did you build a seperate API for retrival of the data ?

March 11, 2019 at 11:49pm
guys my client wants to use shopify instead of snipcart. can you guys help me convince him to use snipcart or help me figure out how to use shopify like just buy buttons i dont want to use graphql i want to hardcode the 3 products and just have a buy button

May 17, 2019 at 6:28pm
Hey guys!
Does anyone have experience using Shopify GraphQL Admin API? I was trying to make it work with gatsby-source-graphql, but no luck. All the code can be found in this Github Issue. All the help is really appreciated.
Edited
Its not very polished yet or documented but I finished the first working version of a 1-click deploy snipcart shop with netlify-cms if you want to check it out to see how it feels. https://gatsby-netlifycms-snipcart-starter.netlify.com/ https://github.com/K-Kit/gatsby-netlifycms-snipcart-starter
like-fill
1
Could I ask why you are using the Shopify Admin API, and not just the storefront API?
I have to get metafields, which are available only in Admin API. Also it looks like there is a way to get metafields from Storefront API, but again it will require mutation to Shopify Admin API - https://help.shopify.com/en/api/custom-storefronts/storefront-api/guides/metafields
Edited

May 18, 2019 at 9:22am
Ah, I see. I have a similar problem, where I need to check current quantity of a product, again only available through the Admin API. Someone suggested using Netlify functions to create a small Apollo server, which has a resolver that queries the Admin API, then you can use react-apollo to query the apollo server - rather than accessing the Admin API directly, if that makes sense? I would have thought you could do a similar thing with getting metafields - the source-graphql plugin would then connect to the Apollo server instead.
Edited
So: Shopify Admin API <-> Apollo Server <-> Gatsby

May 18, 2019 at 5:23pm
Yes, it makes sense, but I will try to go another route (which will hopefully require less time). I will write a custom plugin to whitelist all metafields by creating a MetafieldStorefrontVisibility record using Admin API. After doing it I'm supposed to get read access to these fields from Storefront API.
The thing I'm not clear about if I will have to make any modifications to gatsby-source-shopify to be able to fetch newly available metafields?

May 20, 2019 at 8:41pm
Here is the github issue with code examples. It will be awesome if someone can have a look at it, please.

November 22, 2019 at 1:23pm
How do you handle customers account's?
like-fill
1