37. Using Volto add-ons

Volto chapter

Volto Logo

This chapter is about the React frontend Volto.

For Plone add-ons see chapter Extending Plone With Add-on Packages

37.1. Volto Add-ons

A selection of add-ons can be found on:
Github: https://github.com/collective/awesome-volto#addons
npm: https://www.npmjs.com/search?q=keywords:volto-addon
Add-ons enrich a Volto app with spezialized blocks, themes, integration of Node packages and more.

One typical add-on is about adding a new block to present content in columns: @eeacms/volto-columns-block

The eea volto-columns-block package gives you a block with columns. Each column is its own separate blocks container.

Here is how you would install a Volto add-on:

Update package.json:

"addons": [
  "@eeacms/volto-blocks-form",
  "@eeacms/volto-columns-block"
],

"dependencies": {
  "@plone/volto": "8.3.0",
  "@eeacms/volto-blocks-form": "github:eea/volto-blocks-form#0.5.0",
  "@eeacms/volto-columns-block": "github:eea/volto-columns-block#0.3.2"
},

Add-ons that are already released on npm https://www.npmjs.com:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
"addons": [
  "@eeacms/volto-blocks-form",
  "@eeacms/volto-columns-block"
],

"dependencies": {
  "@plone/volto": "8.3.0",
  "@eeacms/volto-blocks-form": "^1.0.2",
  "@eeacms/volto-columns-block": "^1.0.0"
},

Install new add-ons and restart Volto:

$ yarn
$ yarn start

37.2. Complementing Volto with Plone add-ons

With some additional features of Volto add-ons in place, where do we need to work on the Plone side? With the split of Plone in backend and frontend, Plone is still the place to shape your data model. For our training story ‘Platform for a Plone Conference’ we need to model the content type talk. So in an earlier Dexterity I: Content types chapter we created a new Plone add-on ploneconf.site that adds the content type talk and the correspondent views for a talk and a list of talks in our Volto app volto-ploneconf in chapter Volto View Components: A Default View for “Talk”.