Live Editing Fallbacks

Some components will never be editable without the full context of your Eleventy site. For example, if you rely heavily on a custom plugin, or access file and network resources directly.

In these cases, you'll need to provide fallback content for Bookshop to use, or opt out of live previews for a set of components altogether.

Rendering different content when live editing#

Bookshop sets a global flag when rendering your components in the Visual Editor. Using this flag you can show extra information to your editors, or render fallback content instead of unsupported templating.

You can render special content in the live editing environment by checking the Bookshop Live Editor flag. This can be useful to show extra information to your editors, or to use a feature that isn't supported while live editing.

{% if env_bookshop_live %}

  <p>I am being edited live!</p>
  <h1>Fallback Title</h1>

{% else %}

  <p>Standard build output</p>
  <h1>{{ title | custom_filter }}</h1>

{% endif %}

With the above component, your production hosted site will contain Standard build output and the output from the custom_filter filter. Only when inside CloudCannon's Visual Editor, where custom_filter does not exist, your editors will see the Fallback Title branch of the template.

This approach alone will not work for custom plugins, as these must exist when the templating is parsed. For example, the following template will fail to render:

{% if env_bookshop_live %}

  <p>I am being edited live!</p>
  <h1>Fallback Title</h1>

{% else %}

  <p>Standard build output</p>
  <h1>{% my_plugin %}</h1>

{% endif %}

To resolve this error, define your custom plugin via your Bookshop configuration.

module.exports = function (Liquid) {
    this.registerTag('my_plugin', () => {
      return true;
    });
}

The above snippet registers the my_plugin tag, which will allow the component to parse successfully.

In this example we don't add any functionality inside the plugin, so we would still wrap its usage in a {% if env_bookshop_live %} check. As another option, we could instead implement a fallback inside our custom plugin file, and avoid using the env_bookshop_live check altogether.

Disabling Live Editing#

In some cases you can disable live editing entirely, using a flag in the component data.

This only works for components that are referenced in a site layout, and opts out of rendering that tree of components and subcomponents. As such, this feature is intended for rendering components such as navigation and footer templates from your Bookshop. In the page building workflow, you should instead use the env_bookshop_live template check referenced above.

To disable live editing, Bookshop will look for any of the following keys on a top-level component:

• live_render
• liveRender
• _live_render
• _liveRender

{% bookshop 'navigation' props: props %} 

{% bookshop 'navigation' live_render: false props: props %}