A Jetboost-powered instant search / sort / filter UI

Sorting & filtering is always somewhat tricky in Webflow because it doesn't support these features natively or even allow 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 at least hidden within) the page itself, which can impact load time. 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 gives step-by-step implementation directions, & also has detailed tutorials for 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.

Step 1 - Creating the collections & building the UI‍

Whether you start with the collection or the UI, you'll need an idea of what datapoints you'd like to search, filter, & sort on. Filter criteria will need to be reference or multi-reference fields, since they'll display as collections in the UI. And a plain text "Tag" field is helpful as a catch-all for any criteria you'd like the user to be able to search on.

The UI can be approached a number of different ways, for this example I went with a sticky sidebar layout that will impact how we treat filters later on.

Step 2 - Searching the data‍

Instant Search is the simplest part of the project. Simply style an input field & implement the boost.

Step 3 - Sorting the data

For this project I built a custom dropdown because the native Webflow dropdown doesn't close on click, & I was going to have to do some custom coding to update the active sorting state, anyhow.

<script>
$('.jetboost-sort-link').on('click', function(){

  // Replace dropdown text w/ selected Sorting mode
  tl = $(this).text();
  $('.jetboost-sort-placeholder-text').text(tl);
  
  // Engage Active state on sorting mode selection
  $('.inactive-wrapper').addClass('jetboost-list-item-hide');
  $('.active-wrapper').removeClass('jetboost-list-item-hide');
  
});

$('#reset-jetboost-filters').on('click', function(){

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

This script populates the dropdown's default state with the current sorting mode & to re-populates it when Reset is clicked. This means the reset button will need the ID #reset-jetboost-filters and the default sorting mode link will need the ID #jetboost-sort-default-link.

Default sorting isn't done with a boost because the Jetboost class will disengage all sorting modes on page load. This will remove the Jetboost Sort Active subclass on the default sort link. Default sorting is instead applied using Webflow native sorting & the default sort button (Name - A to Z) functions as a reset for all other sorting modes.

Step 4 - Filtering the data

Because the filters are in a sticky sidebar & because the filters by nature change the height of the data column, they'll need to be jump links to the top of the results. This feature won't be necessary on tablet & mobile, however, since the filters will be stacked above the data column. So we'll need two sets of filters, one configured as jump links & hidden on tablet & mobile & the other not configured & hidden on desktop.

Since the Jetboost Filter Active subclass, which styles the filter button's active state, is applied dynamically, it will have to be applied somewhere in the project to avoid being deleted when Clean Up is run in the Style Selectors Panel. The easiest way to protect this class from deletion is to create a button with the Jetboost Filter Jetboost Filter Active classes applied & put it inside a Hide All class with display: none; set at the bottom of the sticky column.

If the Applied Filters buttons have a unique active state subclass, that will need to be hidden in the page, too, to avoid deletion. Since we have a label that needs to display dynamically along with our label, we'll need to use the Filter is Active class in the Power Ups section to hide it when inactive. In this project I've applied it to the column that contains the buttons & label.

Step 5 - Reset button & results counter

Reset classes are found in the Power Ups section for each boost. And the results counter is in the Power Up sections for the pagination boost. This project is set to infinite scroll pagination & 40 items per page.

Step 6 - No Results messaging

The No Results classes are found on the Power Ups section for each filter boost.

Step 7 - Display details in a modal

The modal data will come from the Movies collection template page. Since Webflow doesn't support removing published collection pages from the sitemap, it's important to place the following metadata in the template page's Head: <meta name="robots" content="noindex, nofollow">.

For more on building out the template page & modal, view the Ajax-powered quick-view modal Blockhead project.

Appendix

For help reverse engineering this project, these are the Boosts that correspond to the codes used in the project: Movie Search - e1pe, Movie Genre Filter - expm, Movie Decade Filter - e2y6, Movie Rating Filter - 6ljg, Movie Sort Metacritic - eq11, Movie Sort Release Date - egdy, Movie Sort Budget - e923, Movie Pagination - 6dr2.