Jekyll generators

Dig into Jekyll to learn how to generate a bunch of similar patterns onto a page from a collection.

Goal

Now that we’ve written all the details for the products in our ecommerce pattern library, in the previous lesson, we’re going to look at how to generate the product list page using the Jekyll and our patterns.

  1. Type it, type it real good

    Remember the purpose of this lesson is to type the code out yourself—build up that muscle memory in your fingers!

1 Set up the product card

Before we start, let’s add all the include placeholders within our product card: the card that we’ll use on the product listing page.

Open up your product card and add placeholders similar to what I’ve done below.

Remember: your code will be very different, this is just an example of what you should apply to your own pattern.

<div class="card text-center chop">
  <img class="img-flex" src="{{include.data.image}}" alt="">
  <div class="island-1-2">
    <strong class="push-1-4 peta color-primary">${{include.data.price}}</strong>
    <h2 class="push-1-4">{{include.data.title}}</h2>
    <p class="push-1-2">{{include.data.description}}</p>
    {% pattern buttons/primary text="Buy now" %}
  </div>
</div>

Make sure that the names of the include placeholder variables match the Markdown files.

For example, in your .md file if you have field names like below:

---
title: "Super product"
desc: "Big, long description."
cost: 56
---

The field names must match inside the include placeholders:

{{include.data.title}}
{{include.data.desc}}
{{include.data.cost}}

  1. _patterns/cards/product-card.html — Line B

    Here I’ve replaced the image’s src attribute with an include placeholder. Notice that it’s include.data—this will become more clear later on.

2 Document the fields

Before we move on, let’s not forget to document the include fields.

This one is a little different for documentation purposes because we technically only have one field: data. All of the information after data is not a field we can manipulate directly, those fields come from our Markdown files.

So, the only field we have to document is the data field:

⋮
patterns:
  product-card:
    width: 400
    description: |
      The product card is used on the product listing page to display each available product.
    fields:
      - name: data
        type: object
        data:
          source: "site.products[0]"
          type: Product

  1. Line H

    We are stating that we have one editable field, named data

  2. Line I

    It’s information data type is an object: meaning it holds many things inside.

  3. Lines J–K

    The example of where the data can be found is in our site.products collection. We’re grabbing just the first product to display in the pattern library.

  4. Line L

    The type field is a little freeform: describe what kind of object should be passed to the field: in this case it’s a “Product” meaning from the _products collection.

3 Create a for loop

Now that our product card is ready to accept information into it, we can generate the product listing page from our collection of products.

Open up your products page, and add the following code:

⋮
{% for product in site.products %}
  {% pattern cards/product-card data=product %}
{% endfor %}

Refresh your browser! You should see every single one of the products listed out on the page. Though kinda messy-like.

  1. Line B

    As Jekyll loops through all the products it finds in our product’s collection folder, each single product it finds gets inserted into a container called product (that name’s completely made up, dust-bunny-fluff and it would work the same).

  2. Line C

    Notice here, how we’ve only sent a single field into the pattern include. We called is specifically data; it maps to our placeholders that start with include.data. We could have inserted many fields like we’ve looked a previously, but it seems like extra, unnecessary code.

    We are sending whatever information is stored in product into our include, and inside the include we want to refer to that information as data.

4 Add a grid to lay out the page

Our products page is a little messy now, we kinda need a grid. So let’s add a grid!

⋮
<div class="grid gutter-1-4">
  {% for crystal in site.crystals %}
    <div class="unit [ xs-1 s-1 m-1-3 ] island-1-4">
      {% pattern cards/product-card data=crystal %}
    </div>
  {% endfor %}
</div>

Check it out! Your product listing page should be almost done! (That was easy!)

  1. Lines D–F

    Notice how the .unit <div> is within the for loop? That’s so we’ll get a brand new unit for each single product on the website.

5 Make each card clickable

I think the only thing we’re missing is the ability to click on each of the products to see their full details.

Let’s pop back to the pattern to make a small adjustment:

<div class="card text-center chop">
  <img class="img-flex" src="{{include.data.image}}" alt="">
  <div class="island-1-2">
    <strong class="push-1-4 peta color-primary">${{include.data.price}}</strong>
    <h2 class="push-1-4">{{include.data.title}}</h2>
    <p class="push-1-2">{{include.data.description}}</p>
    {% pattern buttons/primary text="Buy now" url=include.data.url %}
  </div>
</div>

Refresh your product list page and you should be able to click on every single product on your website.

It’s showing you the product details inside the _layouts/product.html we created previously.

With just a little bit of code we generated the whole product list page & all the product pages too!

  1. Line G

    The only change is that we’re passing the url into our button pattern now. Notice we’re passing: include.data.url, but we never specified a URL at the top of our collection’s .md files.

    This is where Jekyll is magic: each of those files in the collection have a URL, as we explored in a previous lesson—and Jekyll knows what that is.