Web page product Filter with Anchor

Highlighted
Top Contributor

Hello. I've been learning how I could add a filter to my web page using the estate agent example - https://designers.hubspot.com/docs/tutorials/how-to-build-a-real-estate-listing-with-hubdb. Although it works, I've used this example on one of my test pages, about half way down the page and it always jumps back to the top of the page once a selection is made.

 

Is it possible to refresh the product list without the browser moving back to the top? As a last resort would an anchor work and if so, where do I put reference to this?

Reply
0 Upvotes
5 Replies 5
Top Contributor | Platinum Partner

The anchor fix you mentioned would be the easiest/quickest solution.

You'd want to put the anchor directly above the estate agent listings; it should then scroll to the top of the listing when updated. 

(you could also add some JS to disable that scroll function; would need to see a URL or sample to provide guidance for that approach tho)

Reply
0 Upvotes
Top Contributor

I've found a better workaround using Isotope JS.

 

https://isotope.metafizzy.co/v2/filtering.html

 

Within my HubDB I used a particluar column to match my CSS classes such as number of bedrooms; bed1, bed2, bed3 etc.  Then using the above link as a guide, I was able to link each button of the filter to each class, thus filtering out the content without refreshing the page.

 

It was amzingly simple to do and could be used to add muliple filters under 1 query.

Reply
0 Upvotes
New Member

Do you have an example of the page using isotope? Smiley Happy

Reply
0 Upvotes
Top Contributor

Hi @lmlTimolml ,

 

It's in a very early stage with little design, but feel free to take a look...

 

https://www.duchyhomes.co.uk/?hs_preview=VQwAwuGl-23670783557

 

You'll notice I removed the animation when selecting a filter as I found it stuttered on some older browsers.

Reply
0 Upvotes
New Member

Nice! Thank you Smiley Happy

Reply
0 Upvotes