Enabling E-Commerce Quickly with Gatsby & Netlify Functions
Gatsby has become widely popular.
And rightly so. It’s a compelling tool to craft fast static websites, web apps, or PWAs.
As we're witness to its rising adoption, it’s always thrilling for us when developers reach out to show off their new Gatsby e-commerce projects featuring Snipcart.
Devs like Patrick Faramaz who came up with a cool mix of Gatsby, Snipcart & Netlify Functions for his client’s online store.
We were instantly intrigued and asked him to answer a few questions about his stack, which he gladly accepted :)
Not only this, but Patrick also crafted and shared a Gatsby e-commerce plugin. We’ll also talk about it at the end of this article.
Let’s see what he had to say about Gatsby, Jamstack & e-commerce!
The developer we’re interviewing
Patrick Faramaz has been a web developer for twelve years now. He’s had many work experiences in the field before switching to independent work four years ago. He builds websites & apps primarily for clients in France, his home country, and Swiss. You can find more info about his services on his website (in French).
Patrick has been a full stack developer since the beginning but has kept more of a focus on React in the last five years. This popular JavaScript framework allows him to craft websites with modern & performant UIs enabling top-notch user experiences.
We’ll see an example of that right away!
For French-speakers, Patrick already talked about his experience with Gatsby & Snipcart on this podcast and wrote about it in this blog post.
The client
Mercredi Biscuiterie is a bakery based in Lyon, France. Like many shops around the world, they found themselves in a tricky situation when they were forced to suddenly close its physical shop due to Covid-19 hitting their country.
The situation was particularly hard for small businesses such as Mercredi Biscuiterie that thought of eventually selling online but had no system in place to do so yet. They had to react quickly. After a month of the bakery being closed, they turned to Patrick to come up with a solution to start selling online.
We’ve heard many similar stories in the last few months. It’s a very tough situation for merchants right now, sadly. We like to think we’ve been able to help small businesses get through this in allowing them to enable e-commerce quickly.
Let’s see how Patrick did it for Mercredi Biscuiterie.
E-commerce case study: Gatsby, Netlify Functions & Snipcart
Do you have experience with e-commerce in general? If so, which tools have you been using the most in your workflows? Why?
I do have experience with e-commerce. A few years ago, I developed a custom PHP management platform for a major biking event, which included e-commerce functionalities.
I’ve also worked with PrestaShop for a few websites in the past. At that time, PrestaShop was way more flexible and had an active community evolving the product. I felt like this has changed, so I looked for another e-commerce solution.
How would you qualify the e-commerce needs your client had for this project?
With the current lockdown, Mercredi Biscuiterie found themselves with no point of sale. They needed a simple e-commerce website, and they needed it quickly.
They also had shipping restrictions as certain products weren’t shippable by providers, such as fluffy cakes. We needed to be able to create custom shipping methods.
There’s a plethora of solutions and tools to handle e-commerce projects. Why use Snipcart?
I saw a lot of businesses building e-commerce sites using Shopify, but it didn’t seem to be a fit for what I was looking for. I knew I was going to use Gatsby to build the website, so my first question was: “Is it possible to easily integrate e-commerce in a Jamstack project?”
I’m a big fan of Jamstack. I’m convinced we’ve only seen the start of this movement. It’ll continue to grow & evolve a lot in the years to come. It really influenced my choice of stack here.
I’d known Snipcart through a few of your blog posts. For my use case, it was the perfect solution—simple, efficient & Jamstack-ready.
You used Gatsby as a static site generator for this project. Why? Have you ever tried other tools of this kind?
I’ve never used any other SSGs. My love of React naturally brought me to Gatsby in the first place, so I chose to go with what I know for this project.
For me, Gatsby is way more than a static site generator. It allows developers to easily mix static development with dynamic functionalities while generating web apps that are SEO-friendly.
Gatsby’s main strengths are:
Handling multiple data sources
GraphQL out-of-the-box integration
Tons of useful plugins available (e.g., gatsby-image)
Active community
Another SSG on my radar that I’d like to test out eventually is Eleventy.
How was your experience with Snipcart’s v3.0? How long did it take to get it up and running?
It was fast! I had to follow the documentation for advanced functionalities, but the basic integration was a piece of cake.
I’m a big fan of webhooks, which allowed me to manage shipping methods, among other things. It was very beneficial for this project.
How was the fit between Snipcart & Gatsby?
Like a charm!
Snipcart integrates seamlessly into a Gatsby web application. Plus, Gatsby allows us to manage different databases for product attributes. In my case, I used Markdown files, but I could have gone for Airtable or a headless CMS for more complex infrastructures.
That’s the beauty of Gatsby with Snipcart; the ability to fetch data from any sources.
This gist offers a good view of what the code behind product pages and the fragment used for requests looks like.
You used Netlify Functions to push your e-commerce integration further. Can you explain why you used them, and how was the process of integrating them into your site?
I used functions for two different things:
The first one is used to display whether products are still available or not. The website makes a call to a function that asks the Snipcart API for the products list and inventory.
Why use a function for that? So that the private API key is never exposed in the process.
Translated to English: blue frame says “One left” / red frame says “Soon available”
The second one is used to manage the different delivery methods. This works thanks to the
metadatathat’s added when defining products in the website’s HTML with Snipcart.
Once I have this, it’s possible to apply the correct delivery method depending on the products in a specific client’s cart. This way, a customer buying a fluffy cake that can’t be shipped by a commercial provider won’t have this shipping method as an option.
No confusion and a better user experience!
Products only available for take-out
I’ve just implemented a mode for lunch as take-out.
The meals are available for take-out only from Tuesday to Saturday, so I determine the current day and only return the take-out option for open days. On a Sunday, a customer won’t be able to select the take-out until the following Tuesday.
Custom method for take-out lunches with multiple pick-up date options
The code for these Netlify functions’ integration and the store can also be found in this gist.
Were our documentation & our support helpful?
Yes, they were! The documentation is comprehensive, even though, to be honest, you sometimes need to know where the information is. But it’s all there.
When I needed help, you were always fast to answer my questions via the support chat in the dashboard, so that’s really appreciated!
Did you get the chance to use advanced Snipcart features (inventory management, abandoned carts, email templates customization, multi-currency, etc.)? If so, how did it go?
My client, Mercredi Biscuiterie, uses the inventory management feature, which allows them to use a single interface in their daily routine.
We didn’t use the other advanced e-commerce features that Snipcart offers yet. E-commerce is new for this client. They might eventually need more functionalities, so it’s good to know they’ll be there when needed.
What could we improve to make Snipcart an even better e-commerce solution for developers & merchants?
Obviously, for us in France, the possibility of having the merchant dashboard in French would help a lot. It’s not every client that is comfortable with English.
Also, a color code in the order list assigned to different status would help to distinguish the orders to process.
The complete cart & checkout flow
Patrick’s Gatsby e-commerce plugin
Other than his website for Mercredi Biscuiterie, Patrick Faramaz also built a Gatsby plugin for Snipcart. We wanted to take this occasion to promote his initiative.
You can find the plugin and directions to install it here.
Here’s what Patrick had to say about it:
I noticed in the Gatsby plugins list that the ones integrating Snipcart weren’t necessarily up-to-date. So, I started a local plugin specifically for this project, but then I thought: “Why not share it?”
The plugin provides a fast Snipcart v3.0 integration in a Gatsby project. It enables multiple configurations, such as language & currency settings. It also provides a small internal state determining the number of items in the cart or whether a user is connected.
I love to participate in open source projects as I benefit from other’s participation in so many projects.
We totally share Patrick’s view on open source. We’re always thrilled to see Snipcart users crafting their own plugins and sharing integrations with whatever tools they like. If it’s your case, make sure to reach us at geeks@snipcart.com. We love to promote the hard work our users put into these.
In the meantime, go try out Patrick’s Gatsby plugin, and maybe even contribute?
We want to thank Patrick Faramaz and Mercredi Biscuiterie for letting us take a closer look at their e-commerce setup. We sincerely hope the best for their shop, and every similar local business all over the world struggling to stay afloat during the current crisis.
If you’re in the Lyon area, make sure to try out their delicious bakeries! :)
Liked this post? Take a second to share it on Twitter. All of us (Patrick, Mercredi Biscuiterie & Snipcart) would really appreciate it. We'd also love to hear your thoughts and questions on the integration itself below!
