Listing block

The listing block is a special block that can be configured to run a catalog query in the backend and show the results of that search.

Apart from the standard variation and schema enchancing extensions, the listing block provides a configurable way to handle the "No results" message.

When the listing block configured search returns no results, Volto presents a default "No results found" message. But sometimes you want to change such a message to offer more meaningful messages, or do some other fancy stuff in that case. For instance, you may want to show a "There are no future events" or "There are no images in the gallery" message for a given listing block.

To achieve that, you can configure a new noResultsComponent when configuring the listing block, and provide a custom component to render such a message. To do that, you need to reconfigure that option in the configuration of your project:

import { FormattedMessage } from 'react-intl';

const MyNoResultsComponent = (props) => {
  return (
    <FormattedMessage
      id="mynoresultsmessage"
      defaultMessage="This is my no results text"
    />
  );
};

const applyConfig = (config) => {
  config.blocks.listing['noResultsComponent'] = MyNoResultsComponent;
  return config;
};

In addition to that, each variation configured for the listing block can have a custom no results template. This way you can provide specific no results messages per-variation. This can be done, like in the earlier step, stating that in the configuration:

import { FormattedMessage } from 'react-intl';

const MyNoResultsComponent = (props) => {
  return (
    <FormattedMessage
      id="myNoResultsComponentForVariation"
      defaultMessage="This is my no results text specific for the default variation "
    />
  );
};

const applyConfig = (config) => {
  config.blocks.listing.variations.default[
    'noResultsComponent'
  ] = MyNoResultsComponent;
  return config;
};