Filter page functionality, ebay/amazon style


#1

Hi people,

I’m want to build a page that have filtering capabilities like ebay or amazon,
something like this:
image

I was wondering if there’s a plugin or liquid logic that can do that.

Oh and i’m not that much of a developer (not afraid of liquid or a little bit of JS, though),
so i need something i can wrap my tiny brain around :slight_smile:

Thanks in advance for any help!


#2

How many items are we talking about?

If it’s a few dozen, Isotope might work.

If it’s a few hundred or a few thousand, check out Algolia. They have an Amazon’esque boilerplate to get you started. Link to code can be found here.

There are likely a few worthwhile Jekyll plugins, but I’ll let someone else chime-in for recommendations as I’m not too familiar with that side of the plugin world.


#3

One option might be DataTable, a jQuery plugin for manipulating HTML tables. I’ve had good success using Jekyll to transform data into a basic HTML table (a simple Liquid loop), and then use DataTable to add search/sort/filter functions.

For the type of filtering you want, the closest example-code might be the Multi-filter:

https://datatables.net/examples/api/multi_filter_select.html

If you customize that to use checkboxes rather then select popups, it would be close to what you want.


#4

Just throwing in another option…

I have done something similar with ThemeJekyll (click the filter button on the left), but I only used Jekyll to generate JSON and then used Vue.js to do the filtering and rendering part. Doing it this way does require a good bit of JavaScript and Vue knowledge, but it works nicely and isn’t dependent on a third-party service.


#5

Thank you guys for all the options, i’ll have to see if i can handle all the JS part of your solutions.

thanks again! :slight_smile: