Static CMS Tutorial: Creating an e-Commerce Site — Forge

In this 3rd instalment of our walkthrough of creating CMS-driven static sites, we’re going to dive into a very powerful and common use-case — creating an e-Commerce site. In this case, we’re going to enable people to buy premium templates from the Hammerformac Gallery.

We’re building on our earlier work, so if you’ve not yet checked out the earlier articles, you may want to catch up there first:

1. Converting the Hammer Gallery
2. Generating New Content

We’ll be extending our Template content model to accommodate this product information, including an id, specifying if the template is free or paid, the price, etc. We’ll do this in Contentful.

Then, in our templates, we’ll add shopping cart functionality using a very nice micro-service from Snipcart.

Let’s do it.

Update the Content Model

We’re going to add some relevant and necessary fields to our Template content model, over in our Contentful admin.

Create Snipcart Account & Setup

We are going to use another great micro-service to power our shopping cart, called Snipcart.

Snipcart is ideally suited to static sites, as we’ll soon see.

1. You can register for a free account.

2. Simply add the Snipcart javascript and css assets to our project. In this case I created a little partial and included it in my _header.html, ensuring that it came after my jquery include (Jquery library is REQUIRED).

Replace YOUR-SNIPCART-API-KEY with your actual API key which you can find by going to https://app.snipcart.com/dashboard/account/credentials or clicking the little person icon in the top right corner and selecting API Keys from the right side menu.

3. Define our product. We’ll do that in the next part of this tutorial, where you’ll see our Hammer project template and our contentful data variables coming together.

Update the Templates, er, template

One of the things we created for ourselves in the first step, by adding the isPaid boolean field to our template content model, is a simple helper method to check if the template is in fact, a paid download. With this, we can easily decide whether to present the shopping cart button or a simple download button, if the item is free.

- if isPaid? 
  // do something for paid items 
- else 
  // do something for free items

In our case, our paid items will all be a direct download from our Contentful data storage. We’re going to use the Template’s price from our contentful data, which we can easily add using the slim languages string interpolation in our template — this is really useful and we’ll use this a lot.

- if template.isPaid? 
  span.price = "£#{template.price}" 
- else 
  span.price FREE

Free items, however, have an additional check — either a direct download or a link to a Github repository.

We can handle this with an additional nested conditional in the else. In this case, we’re going to present a “Buy” button, “Download button” or “Download from Github” button depending on the Template’s parameters.

You can see how we’re continuing to use our “template” variable to access the various data fields for our entry, using the string interpolation method I mentioned earlier. This is how we create and manage our product listings too — we don’t need to do any major administration work in Snipcart, products are created according to our content.

Snipcart Explained

Enabling our buttons with the Snipcart shopping cart functionality is easy. We simply need to add some classes and data attributes that help to define our Product.

.snipcart-add-item — adding this class to our button / a element will specify it as a Snipcart button

data-item-id — a unique numeric reference for our Product, obtained from Contentful

data-item-name — a unique name string for our product, obtained using name field in content model

data-item-price — the one-time download price for our template, obtained from our price field in content model

data-item-description — a longer text description of our product, obtained from the description field in the content model

data-item-url — the url of the site that snipcart will be added. Leaving this out, will default to the url specified in the snip cart portal > domains.

You can read more about Snipcarts product configuration options at http://docs.snipcart.com/configuration/product-definition.

Now, when a user clicks a snip cart enabled button, we’ll see the Shopping Cart popup and they can go through the process to complete their purchase. Amazing!

So overall, here’s what we have in our Template Detail:

Add a Shopping Cart to the Page

Finally, let’s add a finishing touch. When our customer selects an item, it gets added to their cart. They may continue to keep shopping, in which case, it would be helpful to show the customer what is currently in their Cart and to be able to easily access it again to complete the purchase.

Adding the shopping cart information to our site is dead easy, and Snipcart handles this for us. We’ll create a slim partial, so we can show the cart on any page we choose on the site.

By using the snipcart-total-items and snipcart-total-price classes on our span elements, we can present this data in real time to our customer. It will update immediately when a customer modifies their cart, by adding or removing items.

Finally, adding the snipcart-checkout class to the Checkout link, snipcart will takeover and load the cart when a customer clicks it.

Let’s add, commit and push our code to our github repository and watch it deploy like magic on Forge.

Originally published at https://blog.beach.io on December 21, 2015.