Sorting & filtering is always somewhat tricky in Webflow because it neither supports these features natively nor allows direct access to the data in your collections except through an API call. A number of third party solutions have cropped up to provide sorting & filtering functionality, but most of them require any data you intend to sort or filter on be listed on (or hidden within) the page itself, which isn't always an ideal solution. Jetboost is unique in that it manages API calls directly to the collection, allowing for sorting & filtering on any data field within a given collection.

For this project, we'll sort & filter on a collection of movie posters, leveraging collection data & ultimately displaying the film's details from the film's data page in a modal. This won't be a step-by-step tutorial, given that Jetboost has detailed tutorials for implementing their Collection List Search, Filtering, Sorting, & Pagination boosts. And I've detailed displaying detail page content in a modal via ajax. I'll only be going over aspects that are unique to this project or are otherwise can't be found in Jetboost's documentation.

1. Active vs Inactive state. An Inactive (default) state isn't always necessary, but can be useful to feature content like latest additions that may recede into the collection if the default sorting mode is, for instance, alphabetical.

Jetboost documentation provides the classes engaging & disengaging the Active & Inactive divs for filtering (under the Power Ups), but does not provide them for sorting. However, you'll find that the sorting classes are the same as the filtering classes (jetboost-inactive-show-XXXX & jetboost-active-show-XXXX).

The documentation also doesn't allow for a way to engage the Active div in the default state (which is to say without engaging a filter or sorting mode first). To accomplish this we'll have to create a hidden filter & use the Select All Power Up (jetboost-filter-all-XXXX) to engage the Active div & the Reset button to return to the default (Inactive) state. This class can then be added to any link or button in the default state to engage the list view. This filter can sort on any collection field so long as every collection item has an entry, so for this project I simply duplicated the Decades filter boost & then hid the buttons.

2. Sorting dropdown. On page load, Jetboost disengages any sorting modes. So if you'd like to set an active state on a default sorting mode, you'll want to set that order using the native Webflow Sort Order feature & use that default link as a sorting reset link, rather than as a standard sorting button. (If the default sorting mode has no rationale, it can simply be named Default.) I've also added the same class from the previous point to engage the Active state & prevent a return to the default state when the default sorting mode is selected.

Since the Webflow native dropdown element doesn't close automatically on click, I built a custom dropdown to house the sort modes. This meant writing some javascript to populate the dropdown's default state with the current sorting mode & to re-populate it when Reset is clicked. (The default sorting mode link will need the ID #filter-default & the reset button will need the ID #reset-filters.)

<script>
$('.filter-link').on('click', function(){
  // Replace dropdown text w/ selected Sorting mode
  tl = $(this).text();
  $('.filter-dropdown-placeholder').text(tl);
  // Engage Active state on sorting mode selection
  $('.inactive-wrapper').addClass('jetboost-list-item-hide');
  $('.active-wrapper').removeClass('jetboost-list-item-hide');
});

$('#reset-filters').on('click', function(){
  // Restore sorting dropdown to default state on reset
  $('.filter-dropdown-placeholder').text('Name - A to Z');
  $('#filter-default').addClass('jetboost-sort-active');
});
</script>

3. Applied filters heading. To include a heading for applied filters, you'll want to include the filter buttons & heading inside a div w/ the Active div class for that filter boost (jetboost-active-show-XXXX). If you apply this class to the heading alone the filter button & the header will display in stages.

4. Keyword searching. For search filtering, a plain text field with comma separated keywords is all that's needed to make the boost far more robust. For this project, I included studios (A24), directors (Stephen Spielberg), actors (Nic Cage), countries of origin (Japan), subgenres (vampires), & more as search terms for films.

5. Results counter & pagination. The results counter uses the Total Results Power Up from the Pagination boost (jetboost-total-results-XXXX). And the Movies collection uses Infinite Scroll pagination at 40 items per page.