Dynamic filtering content with dropdown

Recommended Posts

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:


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!


Share this post

Link to post
Share on other sites

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

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By celfred
      I've been struggling for hours with this, and it is driving me crazy. I guess I completely misunderstand basic concepts, but I'm facing a wall here hence this message... Here's what I'm trying to do :
      I have a list of players in $allPlayers (pages) Each player has (among others) 2 pageArray fields : 'group' and 'team'. I'm trying to loop through all the players to build another pageArray (or WireArray or whatever...) to gather the players in groups/teams accordingly and deal with the different info I have on them and calculate a score. My main problem is that some players are in a different team but their group has the same name (and I need to restrict players to their own team mates). Here's my 'code' so far (which doesn't work) :
      // Build group list (for players having a team) $allPlayers->filter("team.name!=no-team")->sort("team.name"); $allGroups = new PageArray(); $uniqueGroups = []; $uGroups = new PageArray(); // This was a test, see below... $already = []; foreach($allPlayers as $p) { // Assign a groupId to each player $groupId = $p->team->id.$p->group->id; $p->groupId = $groupId; if (!in_array($groupId, $already)) { // The following lines were a test but didn't work and I DON'T UNDERSTAND WHY ? // $uG = new Page(); // $uG->of(false); // $uG->template = 'player'; // $uG->name = $groupId; // $uGroups->add($uG); // bd($uGroups->count()); // !! Keeps showing 1 ? My purpose was to be able to use $uGroups->karma, $uGroups->nbBonus... afterwards array_push($uniqueGroups, $groupId); } array_push($already, $groupId); } // Then, I loop through $uniqueGroups, get the players and calulate my score foreach($uniqueGroups as $group) { // Limit to groupId players for group scores $players = $allPlayers->find("groupId=$group"); // Check for group bonus and calculate scores [...] // I cut to simplify my post // But my other problem is storing my score : I can't use $group->karma or $group->nbBonus since $group is a ragular PHP array ? } // Then, I wanted to create a new pageArray (hence my $uGroups above) to be able to sort them with the following $uGroups->sort("-karma"); And I'm stuck... More than 5 hours today already on this, and still blocked
      I've tried playing with WireData, WireArray... but I'm all lost here. You can understand why I'm posting in the 'Getting started' forum !
      For further information, this part of code is embedded in a setScoreboard() function and this is the 'group' part of it.
      If anyone can devote a little time to give me a clue on how to think about this, I'd greatly appreciate !
      Thanks !
      PS : The more I write about this, the more I think I am able to get the group members and scores (with my awkward coding), but then I am unable of simply storing this information before rendering it. Here I'm referring to my comment in my code where I say that TracyDebugger keeps showing me only 1 $uGroups page. I wish I could dynamically build a 'uniqueGroup' page with Pagefields for Group, Team, pageArray for Members, Integer fields for calculated Karma, nbBonus...... sigh......  
    • By Eunico Cornelius
      I am trying to get the strftime format from the function convertDateFormat(). However, the output has $ signs in it which i cannot use in strftime.(example of conversion : $d/$m/%Y what strftime actually uses: %d/%m/%Y). Am I in the wrong here or is there some way to format strftime? Thank you in advance :).
    • By Eunico Cornelius
      Hi, I am new to process wire and I've been trying to change the date time format in my webpage according to its language selection(example: English 'd/m/y' , Deutsch: 'd.m.y'). I know that using 
      $datetime->getDateFormats(); we can achieve the type of formats in the shape of indexes. Also, by using 
      $user->language->id we can know which language we are using. How do I combine this two functions so that when I select English/Deutsch, the date will be adjusted accordingly?
      Is there a specific function that can do this or is there any provided index in the $user->language somewhere. Thanks in advance :).
    • By Batyr
      Hi Guys, Recently I was working on my new project and I need to implement price range filtering. I am using noUiSlider which came with the template that I have purchased. How can I pass values of minimum and maximum values using ajax? I am using foreach loop as shown in code in the code
      <ul class="row shop list-unstyled" id="grid"> <!-- product --> <?php $result = $pages->get("/sadakalar")->children();?> <?php foreach ($result as $r): ?> <li class="col-sm-4 col-md-3 col-lg-3 product m-product" data-groups='["bedroom"]'> <div class="img-bg-color primary"> <h5 class="product-price" data-price="<?=$r->price;?>"><?=$r->price_range->max;?> manat</h5> <a href="<?=$r->url;?>" class="product-link"></a> <!-- / product-link --> <img src="<?=$r->image->first()->url;?>" alt="<?=$r->image->description;?>"> <!-- / product-image --> <!-- product-hover-tools --> <div class="product-hover-tools"> <a href="<?=$r->url;?>" class="view-btn" data-toggle="tooltip" title="Giňişleýin gör"> <i class="lnr lnr-eye"></i> </a> <!--<a href="shopping-cart.html" class="cart-btn" data-toggle="tooltip" title="Add to Cart"> <i class="lnr lnr-cart"></i> </a>--> </div><!-- / product-hover-tools --> <!-- product-details --> <div class="product-details"> <h5 class="product-title"><?=$r->title;?></h5> <!--<p class="product-category">Hemme zat içinde</p>--> </div><!-- / product-details --> </div><!-- / img-bg-color --> </li> <!-- / product --> <?php endforeach; ?> <!-- sizer --> <li class="col-sm-4 col-md-3 col-lg-6 shuffle_sizer"></li> <!-- / sizer --> </ul> <!-- / products --> Here is the code of my range slider: Values of min and max values are stored inside of <span>
      <!-- filter-by-price widget --> <div class="widget"> <h5 class="widget-title">Baha boýunça saýhalla</h5> <div id="range-slider" class="noUi-target noUi-rtl noUi-horizontal"> </div><!-- / range-slider --> <div class="range-filter"> <div class="column filter-button"> <button type="submit" class="btn btn-xs btn-default-filled btn-rounded" id="filter">Saýhalla</button> </div> <!--/ filter-button --> <div class="column range-values"> <p>$<span class="value" id="range-slider-value-min"></span> - $<span class="value" id="range-slider-value-max"></span></p> </div><!-- / range-values --> </div><!-- / range-filter --> <!-- / filter-by-price widget --> And lastly here is my javascript of which handles the changes in noUiSlider:
      <script> var limitSlider = document.getElementById('range-slider'); noUiSlider.create(limitSlider, { start: [ 100, 5000 ], limit: 10000, behaviour: 'drag', connect: true, range: { 'min': 0, 'max': 10000 } }); var limitFieldMin = document.getElementById('range-slider-value-min'); var limitFieldMax = document.getElementById('range-slider-value-max'); var dataString = limitFieldMin + limitFieldMax; limitSlider.noUiSlider.on('update', function( values, handle ){ (handle ? limitFieldMax : limitFieldMin).innerHTML = values[handle]; }); </script> So what I want to do is, whenever user slides the range filter, it automatically throws the filtered products. I have also attached the picture of my website. Any help is greatly appreciated. Thank you in advance!

    • By fabjeck
      Hello Community

      On my website I have a newsfeed, where I want to display the datetime of when the article was published. I know there is a module called "ProcessWirePublishDate". But is it possible that it only returns the date without the time? How could I fix it.
      Thanks for helping