news icon indicating copy to clipboard operation
news copied to clipboard

routeEnhancer for searchSubject minumumDate and maximumDate

Open derBoogie opened this issue 2 years ago • 1 comments

I've implemented the news search form with search subject, minimum date and maximum date.

Now I need to define the corresponding route enhancer for speaking URLs.

Unfortunately, I can't find an example of this in the documentary, nor can I find one on the web.

The URL looks i.e. like this https://mydomain.tld/news/?tx_news_pi1[search][subject]=Test&tx_news_pi1[search][minimumDate]=2023-02-01&tx_news_pi1[search][maximumDate]=2023-02-10

I have tried the following configuration - but it does not work:

routeEnhancers:
	NewsPlugin:
		type: Extbase
		extension: News
		plugin: Pi1
		routes:
			- routePath: '/suche/{minimum_date}-{maximum_date}-{search_term}'
				_controller: 'News::list'
				_arguments:
					search_term: search/subject
					minimum_date: search/minimumDate
					maximum_date: search/maximumDate

Environment

  • TYPO3 version: 11.5.24
  • news version: 10.0.3
  • Composer Mode: no
  • OS: Windows 10

derBoogie avatar Feb 21 '23 10:02 derBoogie

@georgringer thank you for the explanation about the routing.

I've implemented, as you suggested, the submitting of the search form with javascript. The action URI is modified accordingly with the search parameters.

JavaScript (jQuery):

$('div.news-search-form form[name="search"]').on('submit', function(e)
{
	e.preventDefault();
	
	const action = $(this).prop('action');
	let searchQuery = '';

	const dateInputRegex = new RegExp("^[0-9]{4}-[0-9]{2}-[0-9]{2}$"); // format yyyy-mm-dd
	const startDate = $(this).find('input#news-minimumDate').val();
	const endDate = $(this).find('input#news-maximumDate').val();
	
	// minimum date
	if (dateInputRegex.test(startDate))				
		searchQuery = 'von-' + startDate;

	// maximum date
	if (dateInputRegex.test(endDate))
	{
		if (searchQuery.length > 0)
			searchQuery += '/';
		else
			searchQuery += 'von-' + endDate + '/'; // no start date is set -> set end date as start date
		
		searchQuery += 'bis-' + endDate;
	}

	if (searchQuery.length > 0)
		searchQuery += '/';
	
	// search term 
	if ($(this).find('input#news-subject').val().length > 0)
		searchQuery += encodeURIComponent($(this).find('input#news-subject').val());
	
	if (searchQuery.length > 0)
		searchQuery = 'query/' + searchQuery;

	window.location.href = action + searchQuery;
});

Routing:

routeEnhancers:
  NewsPlugin:
    type: Extbase
    extension: News
    plugin: Pi1
    routes:
      -
        routePath: '/query/von-{min_date}/bis-{max_date}/{search_term}'
        _controller: 'News::listSearchResults'
        _arguments:
          min_date: search/minimumDate
          max_date: search/maximumDate
          search_term: search/subject
      -
        routePath: '/query/von-{min_date}/bis-{max_date}'
        _controller: 'News::listSearchResults'
        _arguments:
          min_date: search/minimumDate
          max_date: search/maximumDate
      -
        routePath: '/query/von-{min_date}/{search_term}'
        _controller: 'News::listSearchResults'
        _arguments:
          min_date: search/minimumDate
          search_term: search/subject
      -
        routePath: '/query/von-{min_date}'
        _controller: 'News::listSearchResults'
        _arguments:
          min_date: search/minimumDate
      -
        routePath: '/query/{search_term}'
        _controller: 'News::listSearchResults'
        _arguments:
          search_term: search/subject

derBoogie avatar Feb 22 '23 20:02 derBoogie