[Resolved] Frontend filtering for Event – filter each day based on CPF Datetime

[Author]

Posts

[davidH-33]

Tell us what you are trying to do?
I'm preparing festival website with the screening listing based on the screening date of each film (Toolset custom post type slug: screening, CPF slug: screening-date, format: date and time) and I need to figure out how to create frontend filter that can filter each day of festival (and all days as a default value). I prefer some dropdown menu filter or alternatively maybe some horizontal aligned buttons for each day. Using datepicker or input field isn't user friendly and I can't use classic frontend filter also due to the date and time format. Could you please help me to figure out how to implement the day filters?

Is there any documentation that you are following?
I was searching for some solution on but din't find any way ho to create the filter.

Is there a similar example that we can see?
Yes, I'm re-creating the website with the same feature/filter that has been created in Umbraco.

What is the link to your site?
Please see my listing that has been prepared in Views and embedded into Elementor Pro page:
hidden link

This is the web page that already contains the day filtering (we need to move the content from this Umbraco website to new.lfs.cz WordPress website):
hidden link

[Jamal Supporter Languages: English (English ) French (Français ) Timezone: Africa/Casablanca (GMT+01:00)]

Hello and thank you for contacting the Toolset support.

This can be done but will need custom code. Note, that dates or dates&times are stored as timestamps(numbers) in Toolset. You will need to hook into the view's query and compare them as signed numbers. A timestamp is the number of second since the epoche

First, You can implement a dropdown with custom values(corresponding to the festival days) using the values and display_values attributes of the wpv-control-postmeta shortcode.

[wpv-control-postmeta values=",07/08/2020,08/08/2020" display_values="Every day,Friday 07.08.2020,Saturday 08.08.2020" field="wpcf-your-date-field" type="select" source="custom" url_param="wpv-day"]

Notice how I started with a comma(,) in the "values" attribute. It correspond to no day filter entered. Read more about the options of the shortcode here https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#vf-520693

Then, you will need custom PHP code to hook into the view's query and customize the meta_query to search between the start of the day and the end of it.

Check an example of custom code that is somehow similar to your case, except that it uses two custom fields, where you should use only one custom field and compare it with two values(beginning of the day, and end of the day)
hidden link

I hope this helps. Let me know if you have any questions.

[davidH-33]

Thank you. The dropdown has been implemented and the php code has been added too but unfortunately it's not working yet. Could you please check what should be wrong?
This is my dropdown code:

[wpv-control-postmeta values=",23/07/2021,24/07/2021,25/07/2021" display_values="Every day,Friday 23.07.2021,Saturday 24.07.2021,Sunday 25.07.2021" field="wpcf-screening-date" type="select" source="custom" url_param="wpv-day"]>

.
And this is my PHP code that has been added by me:

add_filter( 'wpv_filter_query', 'default_this_month_inclusive', 10, 3 );
function default_this_month_inclusive ( $query, $view_settings, $view_id ) {
  if( $view_id == 413 ) {
    $selected_start = strtotime('0:00:00');
    $selected_end = 9999999999;

    // determine if user has selected a start or end date, and destroy those meta query items
    if ( isset($query['meta_query']) ) {
      foreach($query['meta_query'] as $key => $meta) {
        if(isset($meta['key']) && $meta['key'] == 'wpcf-screening-date'){
          // get a timestamp that represents 12:00 am on the event start date
          $selected_start = strtotime(date('d/m/Y', $meta['value']) . ' 0:00:00');
          unset($query['meta_query'][$key]);
        }
        if(isset($meta['key']) && $meta['key'] == 'wpcf-screening-date'){
          // get a timestamp that represents 11:59:59 pm on the event end date
          $selected_end = strtotime(date('d/m/Y', $meta['value']) . ' 23:59:59');
          unset($query['meta_query'][$key]);
        }
      }
    }

    $args = array(
      'relation' => 'AND',
      array(
        'key' => 'wpcf-screening-date',
        'value' => $selected_end,
        'compare' => '<=',
        'type' => 'numeric'
      ),
      array(
        'key' => 'wpcf-screening-date',
        'value' => $selected_start,
        'compare' => '>=',
        'type' => 'numeric'
      )
    );
    // add these arguments to your meta query
    $query['meta_query'] = isset($query['meta_query']) ? $query['meta_query'] : [];
    $query['meta_query'][] = $args;
  }
  return $query;
}

If you prefer to log in to WordPress I can provide you admin login details.
Thank you.

[Jamal Supporter Languages: English (English ) French (Français ) Timezone: Africa/Casablanca (GMT+01:00)]

I run a test locally and I was able to get the expected results with the following code:

add_filter( 'wpv_filter_query', 'default_this_month_inclusive', 10, 3 );
function default_this_month_inclusive ( $query, $view_settings, $view_id ) {
  if( $view_id == 1784 ) {
    $selected_start = 0; // strtotime('0:00:00');
    $selected_end = 9999999999;

    // determine if user has selected a start or end date, and destroy those meta query items
    if ( isset($query['meta_query']) ) {
      foreach($query['meta_query'] as $key => $meta) {
        if(isset($meta['key']) && $meta['key'] == 'wpcf-screening-date'){
          // get a timestamp that represents 12:00 am on the event start date
          $selected_start = strtotime(date($meta['value']) . ' 0:00:00');
          unset($query['meta_query'][$key]);
        }
        if(isset($meta['key']) && $meta['key'] == 'wpcf-screening-date'){
          // get a timestamp that represents 11:59:59 pm on the event end date
          $selected_end = strtotime(date($meta['value']) . ' 23:59:59');
          unset($query['meta_query'][$key]);
        }
      }
    }

    $args = array(
      'relation' => 'AND',
      array(
        'key' => 'wpcf-screening-date',
        'value' => $selected_end,
        'compare' => '<=',
        'type' => 'numeric'
      ),
      array(
        'key' => 'wpcf-screening-date',
        'value' => $selected_start,
        'compare' => '>=',
        'type' => 'numeric'
      )
    );
    // add these arguments to your meta query
    $query['meta_query'] = isset($query['meta_query']) ? $query['meta_query'] : [];
    $query['meta_query'][] = $args;
  }
  return $query;
}

And I used the format d/m/Y for my filter values=",11/29/2020,11/30/2020":

[wpv-control-postmeta  type="select" source="custom" values=",11/29/2020,11/30/2020" display_values="Every day,11/29/2020,11/30/2020" field="wpcf-screening-date" url_param="wpv-wpcf-screening-date"]

I changed the following in your previous code:
- View ID, as I have a different ID for my view.
- $selected_start = 0; in line 4, so we can get all the post when the filter does not have a value.
- The first argument to date() function in lines 12 and 17

I hope this helps. Otherwise, I set your next reply to be private to check the view closely. ** Make a database backup before sharing credentials. **

[davidH-33]

The day filter now works fine. Thank you for the support.