The Big List of Small Volto Rules/Tips

[tiberiuichim]

I think we need a big list of small volto rules. Things that only need one line, just the rule. These are very much context dependent rules, maybe not known, obscure, whatever. Let's try to document them here, maybe? And then we can better organize our docs.

Edit: this turned into a FAQ sort of thing. Oh well...

[tiberiuichim]

You can create a page called /search and replace the builtin view with something that uses a Search block, but you need to remove the noncontent route:

config.settings.nonContentRoutes = [
 ...config.settings.nonContentRoutes.filter((p) => p !== '/search'),
];

Also, in routes.js, you need something like (needs to be adjusted according to multilingual capabilities of the site):

routes[0].routes = routes[0].routes
  .filter((r) => r.path !== '/search')
  .filter((r) => r.path !== '/(de|en)/search');

[wesleybl]

@tiberiuichim I tried to customize a file like: https://github.com/plone/volto/issues/2810#issuecomment-1757555571

but it did not work. I get the error:

TypeError: Cannot set property validateFileUploadSize of #<Object> which has only a getter

It seems like this only works for adding things to the module. Not to overwrite things. Did you manage to overwrite it?

[tiberiuichim]

@wesleybl It worked, as far as I remember. I don't recall where (which project) I did it for, though. Maybe things have changed with the way webpack/babel/nodejs transpile and interpret the modules? My technique was mixing esm code (the import statement) with commonjs (module.export). Maybe it would work if you convert the code to commonjs? (only use require instead of import). Otherwise, paste the customized code on a gist, I can take a look.

[wesleybl]

Maybe it would work if you convert the code to commonjs? (only use require instead of import)

@tiberiuichim I tried using require. There was no error, but the original file was used. Customization was ignored. I'm trying to customize the FormValidation.js file. My code:

import * as original from '@plone/volto-original/helpers/FormValidation/FormValidation';

const validateFileUploadSize = (file, intlFunc) => {
  console.log('test');
};

original.validateFileUploadSize = validateFileUploadSize;

module.exports = original;

[tiberiuichim]

Customization was ignored.

Is the customization working for this customized file?

[tiberiuichim]

Another tip:

When adding a language that's not supported by Volto (its language file is not in the Volto locales folder), there will be a crash when switching the language to that missing language. For example, I'm trying to show content in Polish. I have to create a locales/pl/LC_MESSAGES/volto.po basic po file in both my addon and the Volto project frontend.

I have to run yarn i18n in the addon first, then in the Volto frontend project.

[wesleybl]

Is the customization working for this customized file?

The code in https://github.com/plone/volto/issues/2810#issuecomment-1991614568 gives the error that I mentioned in https://github.com/plone/volto/issues/2810#issuecomment-1989063730.

The custom file is ignored when I use require:

const original = require('@plone/volto-original/helpers/FormValidation/FormValidation');

const validateFileUploadSize = (file, intlFunc) => {
  console.log('test');
};

original.validateFileUploadSize = validateFileUploadSize;

module.exports = original;