Streaming live at 10am (PST)

Override Collection List filter option with Custom Code

#1

Hi there,

Is it possible to pilot the filtering option of a collection list with javascript ?

I would love to dynamically filter the name of a regular Collection List, based on the product item name of an ecommerce Products Template page.

Is it something worth exploring ? Is it a lost cause due to Webflow API limitations ?
Thank you for your ideas, always ! :slight_smile:

#2

You can’t pass a url parameter to a webflow page to display elements that are not already on the page. Pages are not dynamic. You can display / hide existing elements with custom code, based on the current window’s URL.

Take a look at this post for inspiration. You may be able to blend the two.

#3

Hi @webdev,

I’m not sure why pages aren’t dynamic ? Elements are actually already on the page (you can see there are two items set up inside the collection list), I would just need to set the filter on page load so that the collection list knows which item to display.

I’ve used mixtiup before, quite a powerful piece pf filtering tool but I’m not sure how I would bind a window’s URL to affect a Webflow Collection list.

As you can see on the screenshot below, both the sweatshirt item and the trouser item are shown. Only a “targeted filter” could only display the right item.

#4

I am referring to server side. Pages are rendered static.

You can’t pass a parameter to a page which causes the page to fetch new data not already downloaded by the page. Pages are rendered based on your settings at publish time.

You could add dynamic functions with custom code. Example, you have a json file with a bunch of data you fetched with Ajax, then display with javascript. That is client side.

It is just a point of clarity. To the end user, it does not matter. Unless they block scripts. Then you have a problem.

1 Like