Using Data and Collections

When building your site, your Bookshop components are executed as standard Eleventy partials. This means they have access to everything in Eleventy, including the data and collections of your site.

When Bookshop is building live previews of your components in the editor, this isn't always the case. For example, your liquid plugins and site assets won't be available to the templating engine.

Bookshop does provide some access to data and collections in the visual editor, with a few caveats. In many cases, you can continue to use both data and collections in your templating without modification.

Pulling from collections#

Accessing collections.* in your liquid templating works by default. All front matter from collections files will be accessible, but some collection fields such as content will not be available when live editing.

One thing to note is that Bookshop is tied to CloudCannon's collection model, not Eleventy's. Usually these will line up if your site is properly configured for CloudCannon, but in some instances they won't. Most notably, collections for CloudCannon (and thus Bookshop) must be segmented by folder; files spread across multiple folders with the same tags key will not be available as a collection when your component is rendered in the Visual Editor.

{%- for post in collections.post -%}
  <h2>{{ post.data.title }}</h2> 
  <p>{{ post.content }}</p> 
{%- endfor -%}

Pulling from data#

Bookshop can pass through data from your site for live editing. This data is sourced from the CMS build, which means it does need to be defined using data_config in your CloudCannon configuration file.

The following CloudCannon config will allow access to authors.* and offices.* when rendering your components in the Visual Editor:

data_config:
  authors: true
  offices: true

{
  "data_config": {
    "authors": true,
    "offices": true
  }
}

module.exports = {
  data_config: {
    authors: true,
    offices: true
  }
};

Passing data into components#

It's best to avoid accessing data and collections from the layout around your components, and instead move that access into a Bookshop component or helper. If the collections or data are sourced in your layout and passed into your component, they will not be present when live editing.

---
---

{% assign posts = collections.post %}
{% bookshop 'grid' posts: posts %}