Using Bookshop components

Using a Bookshop component on your Eleventy site is very similar to using a regular Liquid include, with a few small differences.

The Bookshop tag#

The Bookshop plugin provides a bookshop tag for use in your layouts.

If you've been following along with this guide, add the following snippet to a layout to use the sample component we created:

...

{% bookshop "sample" text: "Hello from the sample component" %}

...

This component matches the syntax of the standard Liquid include, but takes a Bookshop component name rather than a file path.

There are no limitations on referencing Bookshop comonents from other components — the {% bookshop %} tag can be used anywhere on your site or in your components.

Bookshop's bind syntax#

Often when working with Bookshop components your data will live in a front-matter object, with all keys passed through. This might end up looking like:

---
hero:
  title: Hello World
  subtext: My page hero contents
  image: /image.png
---

{% bookshop "hero" title: hero.title subtext: hero.subtext image: hero.image %}

Passing through each key can quickly become unwieldy. To help with this, Bookshop provides the bind attribute:

---
hero:
  title: Hello World
  subtext: My page hero contents
  image: /image.png
---

{% bookshop "hero" bind: hero %}

This functions similar to the spread operator in JavaScript, passing all object keys as props to the component.

Rendering dynamic components#

The Bookshop tag supports interpolating Liquid, so if you have your component name in a variable you can use:

---
components:
  - _bookshop_name: hero 
    title: Hello World
    subtext: My page hero contents
    image: /image.png
---

{% for component in components %}
  {% bookshop "{{component._bookshop_name}}" bind: component %}
{% endfor %}

Passing Data to Bookshop Components#

In order to live edit Bookshop components, Bookshop needs a clear path between a component and the data it draws from.

In general, you should avoid adding logic around your Bookshop components in your site layouts, and instead move that logic into a Bookshop component or helper.

For example:

---
hero_text: "Hello World"
---
{% bookshop 'hero' text: hero_text %} 

{% assign my_title = hero_text %}
{% bookshop 'hero' text: my_title %}