Share Your Work

ben-duchy
Top Contributor

Filtering data with Isotope

Working within the housing industry one of the key (and arguably oldest) web modules is the development sitemap. It has recently taken a big leap forwards and so I thought I would share the result.

 

Firstly it is now 99% database driven so that when we re-use this on our different pages, it practically builds / updates itself once you specify the development within the page editor.  Lightboxes have now been added when you select a plot dot. I have also added a zoom and drag function to allow our audiance (specifically mobile) the ability to see the data batter.

 

https://www.duchyhomes.co.uk/developments/north-east/wynyard

 

My goal going forwards is to move away from HubDB and link it to a custom object. In the meantime I'm looking into how I can make the key even more interactive, such as adding a multi select function for example if you want to select 2 different house types.

 

Feedback would be really appreciated.

7 Replies 7
jonchim
Guide | Diamond Partner
Guide | Diamond Partner

Filtering data with Isotope

nicee! dig it!






Jon Chim
VP of Design & Development
Hypha HubSpot Development


check Did my post help answer your query? Help the Community by marking it as a solution
ben-duchy
Top Contributor

Filtering data with Isotope

Thanks @jonchim / @dennisedson ,

 

I thought I managed to crack the multi select option already, but there appears to be a bug!

https://codepen.io/red-dog/pen/NWyMROp 

 

When you select 2 filters from the same block of buttons, it works fine, however when you select different options across the board it isn't adding the filters together. For example, when you select "Reserved" and "2 Beds" it should only display based on those 2 selections, but unfortunately it is also pulling in data beyond these selections. It's like it is treating it as an 'or' condition instead of 'and'  ...if that makes sense?

 

If anyone has any ideas, I'm open to suggestions.🙁

0 Upvotes
dennisedson
HubSpot Product Team
HubSpot Product Team

Filtering data with Isotope

@ben-duchy ,

Your join method separates the values with a comma.  I believe that is what is causing the issue

try:

filters = filters.join('');

instead of

filters = filters.join(', ');
ben-duchy
Top Contributor

Filtering data with Isotope

@dennisedson good spot, I like your thinking 🙂

 

Unfortunately whilst your idea adds the block filters together, it only allows 1 from each.

 

Ideally I need it to filter more specifically for example as a customer I may want to look at plots that are both "Available" and "Not Released", but at the same time I may only be interested in the house type "Wavendon"

 

Apologies for the confusion, JavaScript isn't my strength.

0 Upvotes
dennisedson
HubSpot Product Team
HubSpot Product Team

Filtering data with Isotope

Looks like you are not the first to ask this question.  Here is a stackoverflow writeup on it.  Hopefully, you can work it out with that example!

0 Upvotes
ben-duchy
Top Contributor

Filtering data with Isotope

Thanks @dennisedson, I'll take a look 🙂

dennisedson
HubSpot Product Team
HubSpot Product Team

Filtering data with Isotope

Nice! 

Thanks for sharing this!  @Teun@jonchim@Adesignl@Jake_Lett  thought you all would be interested in checking this out from my favorite gorilla 😜