Building eCommerce sites with 11ty

Eleventy (also referred to as 11ty) is a static site generator that prides itself on being simpler than most others. 11ty is a “powered by Node” static site generator that is backed by a growing community, and is completely open source on GitHub.

11ty supports layouts for content, pagination, fetching remote data, has a CLI, and much more. Almost anything you’d expect a modern static site generator to do, 11ty has it covered.

11ty is NOT a JavaScript framework though — and you’ll feel right at home if you’ve used something like Jekyll way back when.

Getting started

You’ll want to get started with 11ty by reading the “Getting Started” guide — and once you’ve got 11ty up and running, adding Commerce.js is refreshingly simple.

Inside a new file /lib/commerce.js you’ll want to export your Commerce.js instance. Make sure you use dotenv to load the API keys from .env.

require("dotenv").config();

const CommerceSDK = require("@chec/commerce.js");

exports.client = new CommerceSDK(
  process.env.CHEC_PUBLIC_KEY
);

We can now create the file index.njk with our intended output, using the nunjucks template language — 11ty also works with handlebars, liquid, EJS, Haml, and many others, if that’s your thing.

<ul>
 {% for category in categories %}
   <li>{{ category.name }}</li>
  {% endfor %}
</ul>

<ul>
  {% for product in products %}
    <li>
  <a href="products/{{ product.permalink | url }}">{{ product.name }}</a>
    </li>
  {% endfor %}
</ul>

In order for us to fetch the data for this page, we can create the file index.11tydata.js alongside index.njk to fetch our remote data.

const { client } = require("./lib/commerce");

module.exports = async () => {
  const { data: categories } = await client.categories.list();
  const { data: products } = await client.products.list();

  return {
    categories,
    products,
  };
};

Inside index.11tydata.js we import our Commerce.js instance, and make a request to fetch products, categories, and return those in a new object.

That works fine for an index page of products, but what about static pages per product?

That’s also something 11ty can do. Inside of the file product.njk add the following:

---
pagination:
  alias: product
  data: products
  size: 1
permalink: products/{{ product.permalink | slug }}/index.html

---

<h1>{{ product.name }}</h1>
<div>{{product.description | safe}}</div>
<p>{{product.price.formatted_with_symbol}}</p>

Now we’ve got the template for our individual product pages, let’s now create the file _data/products.js and add the following:

const { client } = require("../lib/commerce");

module.exports = async () => {
  const { data: products } = await client.products.list();

  return products;
};

This “data” we return as products is then accessible to our template as data.

That’s all you need to create static pages — you can run the 11ty CLI to generate the pages, and/or generate and serve.

Add this to your package.json:

"scripts": {
  "build": "npx @11ty/eleventy",
  "dev": "npx @11ty/eleventy --serve"
},

Then run npm run dev to see your 11ty static site in the browser!