Intro
I've had the pleasure of working with Gatsby for static websites multiple times now. However, this particular project I'm working on stands out as a very interesting approach to creating a E-commerce shop for the real-world by fully utilizing the power of JAMstack.
This project consists of three components:
- Gatsby for Static Site Generation
- Contentful for Data storage + structure management
- Foxy.io for remote Shopping Cart management
So how does it work?
1. Gatsby:
We use Gatsby for static site generation, meaning, everything is compiled and built once and served. This includes (most) HTTP requests as well. We create pages dynamically, by fetching the data from Contentful and looping over the data.
Gatsby provides us with a lot of helper 'plugins', such as Gatsby Image, which uses Sharp under-the-hood to render images. This is one of the things that makes Gatsby sites blazing fast, and provides an amazing experience for the end-user as well as the developer.
2. Contentful:
Contentful can be called the 'brain' of our application, where Gatsby was the body. Basically, we create multiple data structures for our data in Contentful, and link them together so it is a breeze to get the required data through the GraphQL API.
The data structures:
Localization:
In the app I worked on, we had three languages, English, Deutsch and French. For each item that we added to Contentful, we also added the Deutsch and French versions for it and provided a common fallback (English). This makes it easy to query for the required version of each item through the GraphQL API.
Secondly, we also have individual translated strings for most items throughout the site. This is for generalization where we don't need to create a whole new page or component, so we use a single string data structure. We fetch all these translated strings at build time and store them in our Redux store, and use a selector to get the required string according to the locale where we need.
Some other data structures specific to the locale include:
- Continent
- Country, linked to continent (Country code, name, currency)
- Currency, linked to the country (Currency name)
Products & Categories:
We have different products with different categories. Each category represents multiple products, for example a "bag" category can represent shoulder bags, handbags, etc. Each product, i.e. shoulder bag can have multiple variants, such as black, white, with strap, without strap, and so on..
Each Contentful item is linked to ensure we have full knowledge of our tree when fetching from the GraphQL API.
Pages:
Even though our end result is a static website, we don't have "static" hardcoded pages. Each page is defined in Contentful, with multiple sections as data structures. Each section can have images, videos, headings, text, etc. depending on the structure. During build time, we loop through all contentful pages and fetch the sections for each and display them using the components we have already created in Gatsby. This means we don't need to modify code to move around sections, add new sections or pages, etc. We can simply make the required changes in Contentful and see the changes in pages when we build our application.
Apart from these, we also have multiple small data structures such as footer information, etc. that I won't go into more detail here.
2. Foxy.io:
Foxy provides a remote shopping cart which we can easily integrate into our website to implement an existing shopping cart into our application.
This means, we do not need to create our custom cart and manage items, payment processing, updating database, etc. etc.
In our example, we have created a shopping cart inside our website for 'costmetic' purposes, which we link to Foxy on checkout. All we need to do is create a form that submits the selected products with their information to our Foxy checkout page, which handles the rest.
We can customize the remote cart to our liking through it's dashboard.
Conclusion
This was a VERY high-level view of how I created an online shop with Gatsby, Contentful & Foxy.io. A more detailed blog may follow at a later date.
Thanks for reading.
Top comments (0)