Snipcart and Dokoo minimal E-Commerce

Hey, if you know the fantastic world of Headless CMS, you will enjoy to be able to deploy and run a minimal e-commerce website in less than 30 minutes.

In this article, we'll be building a minimal e-commerce website with Dokoo as a content manager and Snipcart as a cart manager. For the front-end, we'll be using NuxtJS, tailwindCSS and Google Material Design icons.

You can find the final result of this article on this page

You can also find all the code of this article on this Github Repository

This article is divided in two parts:

1. we'll configure Dokoo and create a simple product.
2. Second, we'll configure Snipcart a little bit
3. Third, we'll integrate the services in our NuxtJS template

Configuring Dokoo

1. Create a space
2. Create a Custom Type named "Products" using the "Product" template.
3. Create an entity and fill in the cover, label and price attribute.
4. Create a feed and include the cover, the label and the price attribute
5. Include the ID native field to the feed

Configuring Snipcart

Configuring Snipcart for our example is pretty straightforward. We only need to configure the following things:

• Configuring our store to accept euros
• Configuring our store to allow orders from France (yes, France!)
• Creating a shipping method and configure the pricing for it.

If you're new to snipcart, you can find all the necessary information on their documentation.

Linking Dokoo and Snipcart

Installing dependencies

Install snipcart, dokoo and tailwindcss nuxt modules to your nuxt application:

yarn add @nuxtjs/snipcart @nuxtjs/tailwindcss @dokoo/nuxt

Configure the credentials for snipcart and dokoo:

Creating our E-Commerce Front-End

We'll be using the same template than in our previous post on how to create a simple blog with dokoo.

First, we create our general layout for our website. Including the cart button displaying the number of articles in the current cart:

The interesting code here is the cart icon button:

<button class="snipcart-checkout flex items-center">
  <span class="material-icons text-4xl text-blue-500">
    shopping_cart
  </span>
  <span class="snipcart-items-count inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 bg-red-600 rounded-full">0</span>
</button>

With Snipcart awesome features, this is the only markup you need to display the cart button. As you can see the snipcart-checkout class applied to the button tells snipcart that this is the checkout button. The snipcart-items-count item tells snipcart to put the cart items count here.

This is pure magic..

Adding our products informations with Dokoo

Now comes the product's informations part. I created an index page, where I fetch Dokoo's feed and display the informations:

You can see that we're fetching Dokoo in the nuxt fetch hook and displaying the products on our page.

Let's take a look at the "add to cart" button:

<button
  class="snipcart-add-item"
  :data-item-id="item.id"
  :data-item-price="item.attributes.price"
  :data-item-url="`/`"
  :data-item-image="`${item.attributes.cover}?transform=true&width=400&height=400&format=webp`"
  :data-item-name="item.attributes.label"
>
  <span class="material-icons md-24">
    add_shopping_cart
  </span>
</button>

And this is literally it! We have a minimal E-Commerce example completely functional. Go ahead and try it on our demo page!