Jump to content
rgaikema

[SOLVED] 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:

-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!

 

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 Bacelo
      Hi there,
      I have a bit of trouble on filtering correctly some event pages by some selectors...
      I do have the following 2 date fields:
      - start date (fieldname = date)
      - end date (fieldname = enddate)

      Some events are a single day event (only start date) - some are a multi day event (end date).
      Past single day events should not show up.
      Current multi day events should show up (even if start day is in the past, but end date is future).
      So I have the following selector:
      if ($standort == '') { $termine = $page->children("sort=date, limit=10, (date>=today, enddate=''), (enddate>=today)"); } else { $termine = $page->children( "(standort_reference~=$standort), (standort_alle=1), (date>=today, enddate=''), (enddate>=today), sort=date, limit=10"); } This selector
      $termine = $page->children("sort=date, limit=10, (date>=today, enddate=''), (enddate>=today)"); works fine, but the follwing does not work (all past entries are also shown):
      $termine = $page->children( "(standort_reference~=$standort), (standort_alle=1), (date>=today, enddate=''), (enddate>=today), sort=date, limit=10"); I have no clue what I'm missing - any ideas?
    • By michelangelo
      Hello there,
      I am building my website, which has a dozen projects with 10 images each. Basically, I need a filtering system but built in the most efficient and user-friendly way. You can see below that the images flow sideways so being hidden, JS lazy loading was a good tool, but I just wanted to try AJAX. Is it fit for this purpose or it's more for dynamic content?
       

    • By Lmwt
      Hi there,
      I am new to PW but already very convinced. I need to build a dropdown button to browse in a collection of authors by country and language. The dropdown should be editable in the BACK and displayed on the same as the authors collection. I tried my luck with "PageField Creator" but I don't know how to display the dropdown, I simply used: 
      "$content .=$page->Land;" (the name of the select field)
      but nothing is displayed...
      I see there is a 2nd module out there to achieve this : "Select Options Fieldtype". I am not sure what is the difference, anyone has a tip?
      And a clear tutorial with the necessary steps to build this? I am a bit confused which should be the parent template or page, if it should have a file or not...
      Thanks a lot in advance!
    • By Orkun
      Hi Guys
      I needed to add extended functionalities for the InputfieldDatetime Module (module is from processwire version 2.7.3) because of a Request of Customer.
      So I duplicated the module and placed it under /site/modules/.
      I have added 3 new Settings to the InputfieldDatetime Module.
      1. Day Restriction - Restrict different days based on weekdays selection (e.g. saturday, sunday) - WORKING

       
      2. Time Slots - Define Time slots based on custom Integer Value (max is 60 for 1 hour) - WORKING

       
      3. Time Range Rules per Weekday - Define a minTime and MaxTime per Weekday (e.g. Opening Hours of a Restaurant) - NOT WORKING PROPERLY

       
      The Problem
      Time Slots and Day Restriction working fine so far. But the Time Range Rules per Weekday doesn't work right.
      What should happen is, that when you click on a date, it should update the minTime and maxTime of the Time Select.
      But the change on the select only happens if you select a date 2 times or when you select a date 1 time and then close the datepicker and reopen it again.
      The time select doesn't get change when you select a date 1 time and don't close the picker.
      Here is the whole extended InputfieldDatetime Module.
      The Files that I have changed:
      InputfieldDatetime.module InputfieldDatetime.js jquery-ui-timepicker-addon.js (https://trentrichardson.com/examples/timepicker/) - updated it to the newest version, because minTime and maxTime Option was only available in the new version  
      Thats the Part of the JS that is not working correctly:
      if(datetimerules && datetimerules.length){ options.onSelect = function(date, inst) { var day = $(this).datetimepicker("getDate").getDay(); day = day.toString(); var mintime = $(this).attr('data-weekday'+day+'-mintime'); var maxtime = $(this).attr('data-weekday'+day+'-maxtime'); console.log("weekday: "+day); console.log("minTime: "+mintime); console.log("maxTime: "+maxtime); var optionsAll = $(this).datetimepicker( "option", "all" ); optionsAll.minTime = mintime; optionsAll.maxTime = maxtime; $(this).datetimepicker('destroy'); $(this).datetimepicker(optionsAll); $(this).datetimepicker('refresh'); //$.datepicker._selectDate($(this).attr("id"),date); //$.datepicker._base_getDateDatepicker(); // var inst = $.datepicker._getInst($(this)); // $.datepicker._updateDatepicker(inst); /*$(this).datetimepicker('destroy'); InputfieldDatetimeDatepicker($(this), mintime, maxtime); $(this).datetimepicker('refresh'); */ // $(this).datetimepicker('option', {minTime: mintime, maxTime: maxtime}); } } Can you have a look and find out what the Problem is?
      InputfieldDatetime.zip
       
      Kind Regards
      Orkun
    • By VeiJari
      Hello forum! 
      Our customer wants to choose only 15 minute intervals in the inputfield Datetime. So the dropdown values would be: 0, 15, 30 and 45.
      Is there an easy way to achieve this?
      Any help is appreciated 🙂
×
×
  • Create New...