Next.js with styled components and Snipcart
Storyblok is the first headless CMS that works for developers & marketers alike.
This tutorial will show us how to use styled-components with Next.js and Storyblok. Styled components and other libraries will bring more flexibility in customizing Blok. You will see how to create a component that gives you the flexibility to manage responsive design or more power for your user from Storyblok.
The goal is to give you ideas of what you can do. I think it's essential to find the balance between what a User from Storyblok can do and your code. Too many parameters or properties can harm your CMS experience and give you more maintenance complexity.
As for the bonus, I will show you how to implement Snipcart, a shopping cart that you can easily integrate into any website in minutes.
We will start with the tutorial from Add a headless CMS to Next.js in 5 minutes. It shows how to create components in Storyblok and Next.js. We recommend that tutorial before starting this one. You can find the tutorial GitHub repository. From this point, we will install styled-components. You can use :
Then, create a next.config.js file at the root with this code :
If you are missing something you can always check this repository, each step of the tutorial has its own branch.
Create a card component with styled-components
Let's now add a block named
sbCard which will be a Nested type block. It should have the following fields :
- image of type asset (image) : similar to the way we added in this tutorial.
- title of type text.
- text of type textarea.
You can get the asset I used in my storyblok-next-demo repository.
Let’s start creating a new file called
SbCard.js in the components folder and add the following code to it.
The container component will be a
<li> element because we will use as an item of the list. It will be wrap in a grid on the next step. Here you can see a simple use of styled-components, on the next step we will see how to create a styled-components based on props.
Now we can create a
sbCard, it should display like this :
Wrap sbCard in a Grid layout
We will create a Grid Layout to wrap our
sbCard in this part. We will pass some parameters from Storyblok to the component to choose how many columns we want to display in different formats (mobile, tablet, desktop) and optionally add a padding-top. Let's create a block named
sbGrid, a Nested type block. It should have the following fields :
- content of type Blocks
- nbColumnMobile of type number and 1 as default value.
- nbColumnTablet of type number and 2 as default value.
- nbColumnDesktop of type number and 4 as default value.
- paddingTop of type number and 0 as default value.
You should have something like this :
Let’s create a new file called
SbGrid.js in the components folder and add the following code to it :
Now let’s modify our content in Storyblok. Create a
sbGrid and move the created
sbCard inside and add 3 new
You should have something like this :
So what have we just done? We use the Grid CSS property and media queries to define the display. Storyblok gives the number of columns in each format and with styled-components we passed props in order to have a dynamic grid.
For example, you can reuse
sbGrid and have different columns in the same format. For example, I create two
sbGrid with 48px of padding-top, the first one with 3 columns and the second with 2 columns.
And that's it! Now you can use
sbCard as you want, or create more flexible and customizable components with styled-components from Storyblok.
You can find the final result of this part on the branch feat/final-result.
Now, let’s start with Snipcart!
How it works
Unlike many e-commerce solutions, Snipcart lives on your site, in its HTML client-side code.
We follow the tutorial we have just finished. You can find the final result in this branch's GitHub repository.
First, create an account on Snipcart.
Add Snipcart script
Check your Snipcart account and go to the credentials page. You should see this image below :
In your Next.js project, create a
_document.js and replace
<your-public-api-token> by your API key from Snipcart.
Be careful : if you have an attribute lang in your tag
<Html>, the script will use the language you have in your Html. So if you have
<Html lang="fr">, you will have the cart in French :
Create a ShoppingCartButton
Let’s make the
ShoppingCartButton first. The button will show the current state of your cart. And on click, it will open the Cart.
SbShoppingCartButton.js, you don’t need to create a component from Storyblok.
Here is the code below :
Then, add in
index.js the button :
You should have :
On clicking on the button, a cart should be opened :
Add Snipcart Buy Button
Add parameters price to the
sbCard from :
Let’s add the buy button. It will help us to add your product in the cart. Below the code, we add a button and change the layout card in order to make the card more consistent.
Let explained a bit the code of the button, here is what you got in the DOM :
The important thing is to add the class
snipcart-add-item, if you don’t, the script won’t recognize the button, and you won’t add anything to your cart. After the other attributes help to describe your product. More information here.
In the cart, it shows like this :
To conclude you should have now :
And when you click on the Add to cart button, the cart should open and get your product.
Then you can click on Checkout, but to put it in production you need to put a payment gateway in your Snipcart account and everything should work without doing anything.
In this tutorial, you see how to use styled-components in Next.js and how to create flexible components in different formats and bring more power and customization to your user.
With Snipcart, you see how is easy to set up and can be plugged into any frontend you have. If you leave the website and come again, Snipcart keeps your last cart state. And also on the payment of the product, it will browse your e-commerce website and check the products on your cart to get the same information (price, id etc…) as your website for security.
- To customize the cart part: https://snipcart.com/blog/customizing-snipcart-to-reflect-the-style-of-your-website
- Inspired by: https://snipcart.com/blog/next-js-ecommerce-tutorial-example