Customize Content-type Views and other Components – Volto Customization for JavaScript Beginners

Customize Content-type Views and other Components

Customize Content-type Views and other Components#

You can customize all components of Volto using a technique called component shadowing.

Basically you copy the component (i.e. the file) to a folder customizations keeping the same folder-structure and the overridden file will replace the original.

Tip

Those familiar with Plone's JBOT (just a bunch of templates) customizing add-on will recognize this pattern since it works the same way, except that here you have to create exactly the same folder structure hierarchy of the original component instead of using the dotted notation used in JBOT overrides.

To avoid duplication we simply follow the chapter Customizing Volto Components of the Mastering Plone Training.

In that chapter you learn how to override the logo, the footer, the news-item view and the default listing-block.

The only difference is whenever we add new files instead of adding them to the project we add the to our addon.

For example when we customize the News Item View instead of adding the override as:

src/customizations/components/theme/View/NewsItemView.jsx

we add it as

src/addon/volto-teaser-tutorial/src/customizations/volto/components/theme/View/NewsItemView.jsx.

Both paths work fine though, we just want to go all-in with the addon-approach.