Volto: default search page, filtering options

pigeonflight · February 8, 2024, 6:06pm

With Volto, the default search results page does allow filtering by tag but there are no options to filter by date-range or author.
Classic Plone at least allowed filtering by content type and I'm not seeing that option in Volto.
What strategies could I use to change the capabilities in Volto.

ichimdav · February 10, 2024, 7:35am

@pigeonflight you would need to customize the search component from Volto

github.com

plone/volto/blob/a377850ed5f56e1e49bf101382a822048f394420/packages/volto/src/components/theme/Search/Search.jsx#L112


      
           * @param {string} searchableText The searchable text string
           * @param {string} subject The subject (tag)
           * @param {string} path The path to restrict the search to
           * @returns {undefined}
           */
          
          doSearch = () => {
            const options = qs.parse(this.props.history.location.search);
            this.setState({ currentPage: 1 });
            options['use_site_search_settings'] = 1;
            this.props.searchContent('', options);
          };
          
          handleQueryPaginationChange = (e, { activePage }) => {
            const { settings } = config;
            window.scrollTo(0, 0);
            let options = qs.parse(this.props.history.location.search);
            options['use_site_search_settings'] = 1;
          
            this.setState({ currentPage: activePage }, () => {
              this.props.searchContent('', {

and add extra properties that are passed as options to the searchContent action.
See how NewsAndEvents view is doing it hardcoded:

github.com

plone/volto/blob/a377850ed5f56e1e49bf101382a822048f394420/packages/coresandbox/src/components/Views/NewsAndEvents.tsx#L31


      
          const NewsAndEvents = () => {
            const newsandevents = useSelector(
              (state: RootState) => state.search.subrequests.newsandevents?.items,
            );
            const dispatch = useDispatch();
          
            useEffect(() => {
              dispatch(
                searchContent(
                  '/',
                  {
                    portal_type: ['News Item', 'Event'],
                    metadata_fields: ['subject', 'modified', 'someotherinfo'],
          
                    // That's OK:
                    // portal_type: ['News Item'],
                    // metadata_fields: ['subject'],
                  },
                  'newsandevents',
                ),
              );

ichimdav · February 10, 2024, 7:59am

@pigeonflight I answered strictly to your question regarding the search page.
Personally, I would go another route which is to create a search page and add the search block where you can easily add search criteria options as needed and just customize the form action for the search input to go to that search block page.

tiberiuichim · February 10, 2024, 8:08am

You can create a page called /search, 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');