How to add a listing block to every event page?

Plone Support
1

In my current project, I need to add a listing block to the bottom of every event page that shows the events with certain tags, so that I can show the latest events.

There are many event pages on the website and I am searching for the options for adding it automatically instead of adding it to them one by one. I know that I can add a listing block to the page layout but then I will have to select the listing criteria in each of them separately.

I have seen that this is possible to do in the Classic Plone with portlets but how can I do this on the Volto? Has anyone ever done this before or seen a project with a similar approach?

2

Volto newbie here, but I would override the Event View and call a custom Component there, like

EventView.js:

const EventView = (props) => {
   [...]
     return (
    <>
         [...]
         <RelatedEvents {..content} />
    </>
  );
};

In RelatedEvents components you could make a query with searchContent:

This is a example for news but you get the idea:

  useEffect(() => {
    dispatch(
      searchContent(
        '/' + content.language.token,
        {
          portal_type: ['News Item'],
          review_state: 'published',
          sort_on: 'effective',
          sort_order: 'reverse',
          b_size: 8,
          metadata_fields: ['effective', 'newsitem_types', 'hasPreviewImage']
        },
        'related_news',
      ),
    );
  }, [dispatch]);
2 Likes
3

Thank you for the advice @csanahuja. I was hoping to use a listing block for this purpose but your suggestion is also very good. I might give this a try in a different section of the project.

4

Can't you go to the control panel and add the listing block to the layout for the event type?
You can set it to not be editable by event editors.