[Resolved] Exposed View Filter Sorting

[Author]

Posts

[Lime Valley]

We would like to offer a drop down in our exposed view filters that allows the user to change which field they are sorting by when viewing real estate listings:

Newest First
Price: Lowest First
Price: Highest First

Is there any way to do this now? If not, is something like this coming? Do you have a code snippet we could add somewhere to add it, etc?

Thanks!

[Luo Yang]

Dear yvonne,

Views table layout support sort result in front-end:
https://toolset.com/documentation/user-guides/view-layouts-101/#table
You can select to include the field names in the table headings – this will add a header to your table and, for specific fields, allow site visitors to click and sort the table by a specific column.

If you need a dropdown menu to surt the result, you will need create custom JS codes to passing same URL parameters to the view.

[Lime Valley]

What is an example of what the GET parameters would look like if we put sort by in the URL?

Let's say I have a Type called 'property', and a field on the type called 'current-price'.

I tried creating a table view just to figure that out, but the sort links didn't work at all or show up in the URL, so I hit a dead end there. If you could show an example of how one could pass the GET parameters to the URL to affect the sorting of the view, that would be very helpful.

[Lime Valley]

Here is what I've tried, and it isn't working. I gathered this from previous posts with similar issues:

In my child theme's functions.php file, I have

// Add a shortcode for handling sort by in the query filter
add_shortcode('wpv-post-sorting', 'wpv_post_sorting_shortcode');
function wpv_post_sorting_shortcode($atts) {
      
  return add_query_arg(array('wpv_column_sort_id' => $atts['sort'], 'wpv_column_sort_dir' => $atts['dir'],'wpv_paged_preload_reach'=>1,'wpv_view_count'=>1));
}

In my filter code I have this as the last filter, right before the submit button short code:

<div class="property-sort-by-filter">
    Sort By
    <select name="wpv_column_sort_id">
  		<option value="">Newest</option>
        <option value="[wpv-post-sorting sort="current-price" dir="asc"]">Lowest Price</option>
        <option value="[wpv-post-sorting sort="current-price" dir="desc"]">Highest Price</option>
  	</select>
  </div>

I also tried using sort="types-field-current-price" based on some stuff I saw on other posts, but that didn't work either. The machine name of my custom Types field is current-price.

Hopefully that helps you understand what I'm trying to do.

[Lime Valley]

We are really trying to figure this one out! We got a sortable table view working, so we could finally see the types of GET parameters that end up in the URL when we click on a column header. Here's an example of the GET parameters it adds when sorting by the current price field for a test table view we made with sortable columns:

?wpv_column_sort_id=types-field-current-price&wpv_column_sort_dir=desc&wpv_view_count=13210-CPID13211&wpv_post_id=13211

It appears that the wpv_view_count and wpv_post_id field are required too, because it won't resort the table without them. We can't seem to crack the code on those though. When we go back and view our non-table view, and stick in the same parameters, or modify them to use the post id of that view, we get no sorting happening. I see also that the correct value for wpv_column_sort_id is types-field-current-price, but now we need to figure out the other two parameters...

Whatever help you can give would be so greatly appreciated.

Thanks.

[Lime Valley]

I think I've got it figured out. I just went with this in my filter code:

<div class="property-sort-by-filter">
    Sort By
    <select name="sort_by">
  	<option value="newest">Newest</option>
      	<option value="lowest-price">Lowest Price</option>
        <option value="highest-price">Highest Price</option>
  	</select>
  </div>

And this in my function.php file in the child theme:

// Hook in and change the sort by based on GET parameters
add_filter( 'wpv_filter_query', 'MYTHEME_sort', 110, 1);
function MYTHEME_sort( $query_args ) {
  if($_GET['sort_by'] == 'lowest-price') {
  	$query_args['meta_key'] = 'wpcf-current-price';
  	$query_args['orderby'] = 'meta_value_num';
  	$query_args['order'] = 'ASC';
  }
  elseif($_GET['sort_by'] == 'highest-price') {
  	$query_args['meta_key'] = 'wpcf-current-price';
  	$query_args['orderby'] = 'meta_value_num';
  	$query_args['order'] = 'DESC';
  }
  elseif($_GET['sort_by'] == 'newest') {
  	$query_args['orderby'] = 'date';
  	$query_args['order'] = 'DESC';
  }
  
  return $query_args;
}

I'd like to figure out a way to make the Sort By drop down remember its value like other filters I have in the same form, but other than that this seems to work. Do you see any issues with that solution?

[Lime Valley]

Just to update this to the final picture, I added a shortcode function in my child theme functions.php:

// [show_selected var="" val=""]
function show_selected_func( $atts ) {
    $a = shortcode_atts( array(
    		'var' => 'var',
    		'val' => 'val',
    ), $atts );

   if($_GET[$a['var']] == $a['val']) {
    	return ' selected = "selected"';
    }
    else {
    	return "";
    }
}
add_shortcode( 'show_selected', 'show_selected_func' );

I still use the function in the previous post too (MYTHEME_sort).

And then I updated the HTML in the filter area to include the shortcode:

<div class="property-sort-by-filter">
    Sort By
    <select name="sort_by">
  		<option value="newest"[show_selected var="sort_by" val="newest"]>Newest</option>
      	<option value="lowest-price"[show_selected var="sort_by" val="lowest-price"]>Lowest Price</option>
        <option value="highest-price"[show_selected var="sort_by" val="highest-price"]>Highest Price</option>
  	</select>
  </div>

This way, when a user chooses one of the sort options, they stick in the form rather than resetting to the default value.