[SOLVED] Dynamic filtering content with dropdown

[rgaikema]

Hi everyone,

Currently I'm struggling with a filter option and I hope somebody can help or advise me the right way to this.

What I want is an index page where campaigns are shown and where I can filter the campaigns by year.
Each campaign has a datetime field with the output set to "j F Y", so it shows "1 April 2016" in the frontend.
The dates are unique for each campaign, but there can be multiple campaigns in the same year.
The page structure is:

-client
--campaign-a
--campaign-b
--campaign-c
--campaign-d

This is the PHP code I use on the client page to display all the campaigns.

$campaigns = $page->children("sort=sort");

foreach ($campaigns as $campaign) {

	if($campaign->campaign_description) {
		echo '<div class="campaign-description info">';
		echo '<h2>' . $campaign->title . '</h2>';
		echo '<p>' . $campaign->campaign_description . '</p>';

		// Todo remove only for testing
		$campaignDate = $campaign->campaign_date;
		$campaignYear = substr($campaignDate, -4);

		echo '<i>' . $campaignDate . '</i>';
		echo '</div>';
	}
}

$campaignYear is where I see the years, 2015, 2016, 2017 and so on.

Here I create the dropdown to show the unique years:

if (count($campaigns)) {

	// Store unique Years
	$arr = array();
	foreach ($campaigns as $campaign) {
		$campaignDate = $campaign->campaign_date;
		$campaignYear = substr($campaignDate, -4);
		$arr[] = $campaignYear;
	}
	$unique_years = array_unique($arr);

	// Show dropdown with unique years
	echo '<select id="campaign-date-select">';
	foreach($unique_years as $year) {
		echo '<option value="' . $year . '">' . $year . '</option>';
	}
	echo '</select>';
}

I read a couple of articles, for example this: https://processwire.com/talk/topic/8513-sort-with-select-dropdown/
but I can't figure out how to dynamically change the output of the campaigns, based on the input of the select options.

Maybe the datetime field is not the best option, or maybe I have to use URL segments and JavaScript to combine something...
Any help or advise is welcome!

 

[dragan]

There's a million ways to do something like this.

An easy and straightforward way is to add a data-attribute (YYYY) to your campaign wrapper div.

Then use a few lines of JS to hide every campaign year item except the selected one.

Examples:

https://www.sitepoint.com/jquery-filter-objects-data-attribute/

 

[rgaikema]

Thank you @dragan!
That looks like a quick solution. I will look into it and try to make it work.