Over the Christmas break, I used my spare time building a basic one page JAMStack ECommerce website. I created a small demo called ‘Stick em Up!’, an example online shop selling stickers built using Snipcart, NuxtJS and Netlify CMS.
Project Writeup
Not much of a writeup since it was a small project.
https://www.danidean.co.uk/portfolio/stick-em-up/
Project
The Snipcart is set to test mode so feel free to use the ‘shop’ and checkout with the test payment details.
https://stick-em-up.netlify.app/
I found using Snipcart incredibly straightforward so I have written the steps that I took to implement it into my NuxtJS website and also created a starter NuxtJS/Snipcart repo which you can clone yourself to get a simple project up and running locally.
GitHub Repo
https://github.com/TitchyDean/nuxtjs-snipcart-netlifycms
I used the nuxtjs/snipcart module that was already available and followed their setup instructions.
Assuming you already have a NuxtJS project ready, the steps are as simple as the following...
- From the root of your project in the command line, run npm install @nuxtjs/snipcart
- Add '@nuxtjs/snipcart' to your buildModules in the nuxt.config.js file
- Finally add snipcart configuration to the nuxt.config.js file also with the minimum of a Snipcart API key, which you can find in your Snipcart dashboard after registering with them. If you store your API key in a .env file, remember to add this key to your environment variables where you are deploying your snipcart project from.
snipcart: {
key: process.env.snipcartKey
}
Once the Snipcart installation was complete, I was ready to create my first product which I did by following Snipcarts product setup guide.
The required attributes you need for a snipcart product are:
- data-item-id
- data-item-price
- data-item-url (Since I built a one page website, all the products were placed on the home page so all urls ended up as /)
- data-item-name
<button data-item-id="adventure-begins-sticker" data-item-price="0.20" data-item-url="/" data-item-name="Adventure Begins Sticker" type="button" class="snipcart-add-item">Add To Cart</button>
In the end I ended up with the following for each of my products. I included a weight and set shippable to true so that I could provide the correct shipping options to meet the cart contents. I also added an image and description for visual purposes.
<button data-item-id="adventure-begins-sticker" data-item-price="0.20" data-item-weight="1.40" data-item-shippable="true" data-item-url="/" data-item-description="Adventure begins vinyl sticker" data-item-image="/img/adventure.jpg" data-item-name="Adventure Begins Sticker" type="button" class="snipcart-add-item">Add To Cart</button>
When I had completed the product HTML and deployed the code changes, I hopped over to my Snipcart dashboard and ‘fetched’ the products to import them into my Snipcart so I could eventually set stock levels against them. That is the minimum required to get an ecommerce setup up on your NuxtJS website and to complete a full test checkout flow.