Bookshop can render changes to your components live in CloudCannon, allowing you to build rich visual editing experiences.
Installing Bookshop's development dependencies#
To power the live editing experience, Bookshop requires a few extra packages to be installed. Unlike the previous plugin we installed, these dependencies have no impact on your production site: they only provide Bookshop tooling locally on your machine and within the CloudCannon Visual Editor.
npm i -D --save-exact @bookshop/generate @bookshop/browser @bookshop/eleventy-engine
Bookshop releases all packages on every release, so the version numbers should
always stay exactly the same. Using --save-exact here means that npm won't use a newer version
than the one specified.
Running the Bookshop generate command#
Bookshop provides a command to run after your static site build. This command automatically discovers your component library and your site files, and connects CloudCannon's live editing APIs to the Bookshop components on your site.
Additionally, when we cover the structured data features of Bookshop, this command will do the work of creating your CloudCannon Structures for you.
To run this command, add the following to a CloudCannon postbuild script at the root of your repository:
npx @bookshop/generate
With that in place, any Bookshop components that use data from the front matter of a page should render changes live in the Visual Editor.
Additionally, you should notice CloudCannon's Data Bindings have been added around your components, allowing you to click directly on the page and open an editing panel.
As an example, if we have a component that pulls from front matter:
---
title: About
layout: base.liquid
permalink: /about/
hero_component:
title: On a mission to change email marketing
description: We're here to breathe new air into email marketing and help grow your business.
button:
text: "Try This Free"
link: "/signup"
---
{% bookshop "about/hero" bind: hero_component %}
When viewed in the Visual Editor, we will be able to interact with the element directly on the page and open up an editing panel:
