# Filter page functionality, ebay/amazon style

**URL:** <https://talk.jekyllrb.com/t/filter-page-functionality-ebay-amazon-style/1251>\
**Category:** Help\
**Created:** [December 12, 2017, 2:18pm UTC](https://talk.jekyllrb.com/t/filter-page-functionality-ebay-amazon-style/1251 "2017-12-12T14:18:05Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![liavh](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/liavh/32/2059_2.png) [@liavh](https://talk.jekyllrb.com/u/liavh)\
**Post date:** [December 12, 2017, 2:18pm UTC](https://talk.jekyllrb.com/t/filter-page-functionality-ebay-amazon-style/1251/1 "2017-12-12T14:18:05Z")

</div>

Hi people,

I’m want to build a page that have filtering capabilities like ebay or amazon,  
something like this:  
 ![image](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/1X/5ba1d01cf2a8b107c426224738a0a4c7fe235f20.jpg)

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 🙂

Thanks in advance for any help!

---

<div class="post-metadata">

**Author:** ![ckruse](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/ckruse/32/16_2.png) [@ckruse](https://talk.jekyllrb.com/u/ckruse)\
**Post date:** [December 12, 2017, 3:53pm UTC](https://talk.jekyllrb.com/t/filter-page-functionality-ebay-amazon-style/1251/2 "2017-12-12T15:53:10Z")

</div>

How many items are we talking about?

If it’s a few dozen, [Isotope](https://isotope.metafizzy.co/) might work.

If it’s a few hundred or a few thousand, check out [Algolia](https://www.algolia.com/). They have an [Amazon’esque boilerplate](https://community.algolia.com/instantsearch.js/v1/examples/e-commerce/) to get you started. Link to code can be [found here](https://community.algolia.com/instantsearch.js/v1/examples/).

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.

---

<div class="post-metadata">

**Author:** ![chuckhoupt](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/chuckhoupt/32/523_2.png) [@chuckhoupt](https://talk.jekyllrb.com/u/chuckhoupt)\
**Post date:** [December 12, 2017, 4:25pm UTC](https://talk.jekyllrb.com/t/filter-page-functionality-ebay-amazon-style/1251/3 "2017-12-12T16:25:22Z")

</div>

One option might be [DataTable](https://datatables.net), 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](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.

---

<div class="post-metadata">

**Author:** ![chromatical](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/chromatical/32/278_2.png) [@chromatical](https://talk.jekyllrb.com/u/chromatical)\
**Post date:** [December 13, 2017, 1:11am UTC](https://talk.jekyllrb.com/t/filter-page-functionality-ebay-amazon-style/1251/4 "2017-12-13T01:11:16Z")

</div>

Just throwing in another option…

I have done something similar with [ThemeJekyll](https://themejekyll.github.io/themes/) (click the filter button on the left), but I only used Jekyll to generate JSON and then used [Vue.js](https://vuejs.org/) 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.

---

<div class="post-metadata">

**Author:** ![liavh](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/liavh/32/2059_2.png) [@liavh](https://talk.jekyllrb.com/u/liavh)\
**Post date:** [December 13, 2017, 6:36am UTC](https://talk.jekyllrb.com/t/filter-page-functionality-ebay-amazon-style/1251/5 "2017-12-13T06:36:54Z")

</div>

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! 🙂
