Blog filters

CBrew
Member

I hope you can help. I've created a concept for a clients 'Customer stories' section and I plan to create a blog within Hubspot to achieve this. https://invis.io/8Y9TFGH42#/212095480_1_Airbus_Customer_Stories The question being - is it possible to create two separate ways to filter the blog posts? As you can see within the InVision prototype there are two drop downs showing a way to filter by either 'type' or 'region'. You can tag each post with these tags but how would I separate them out within the drop down menus? Please let me know if this explanation is enough. The InVision prototype should explain fully what I'm trying to achieve.

0 Upvotes
3 Replies 3
Ty
HubSpot Employee
HubSpot Employee

Hi CBrew,

 

I actually accomplished a similar idea on Academy's website earlier this year. We already had filtering in place using a previous JS Plugin from the previous designer, so I based my solution off that. You can see the multi filter in progress here: http://academy.hubspot.com/examples

 

So we basically built it off of isotope.js, which basically works as if you set a little logic and some clas snames, you'll be able to filter throughout your list. To get this working, you'll want to look into isotope's combofilters luckily, they use a site called CodePen, so you are able to see every bit of code that goes into it here: Combo Filters with Checkboxes. Basically, to get ours working, I based my ideas off of his logic in that codepen, and updated it to work for what we needed. 

 

Screen Shot 2017-01-04 at 9.33.12 AM.png

 

To handle the filter in HTML, your filter will need to look like this: 

{% if is_listing_view %}
<div class="examples-filter-button-container" id="filterButtons">
  <div class="filter-buttons" data-group="category">
    <h3>Category 1 filters</h3>

    <label>
      <input class="ex-button" type="checkbox" name="blogs" value=".blog"><span>Blogs</span>
    </label>
  </div>

  <div class="filter-buttons" data-group="category">
    <h3>Category 2 filters</h3>

    <label>
      <input class="ex-button" type="checkbox" name="b2b" value=".B2B"><span>North America</span>
    </label>
  </div>

</div>
{% endif is_listing_view %}

 

And then for your filtering to work, you will need to append a class (this is set using HubL from your post template). You'll want a choice module for each type of filter, so for this example, I'll show you one that we are using:

Screen Shot 2017-01-04 at 9.33.44 AM.png

 

{% choice "example_business_type" label="What type of business does this represent?", choices="-Select a Business Type-, B2B, B2C, eCommerce, EDU, Non-Profit", default="-Select a Business Type-", export_to_template_context=True, overrideable=True %}

 

and then, you would match up what is set in your listing template like this (we used HubL drop spaces, or convert them to hyphens):

            <div class="span3 original example {{ content.widgets.example_business_type.body.value|replace(" ", "-")|lower }}">

 

So if you chose "B2B" from you choice select, the above class would be printed as: 

div class="span3 original example b2b">

and the logic in your filter would say "when you click the button with a value of ".b2b" it will hide all others, but display:block; of the class b2b.

 

That's basically all you need to it! Most of the working JS exists in the above codepen, I just tweaked a few things to help us in other applications. Also, you will have to look into the checkbox hack, to make the checkboxes appear as buttons.

 

I hope this helps you out!

-- Ty

 

0 Upvotes
CBrew
Member

Thats great Ty - thanks for getting in touch - I'll check it out.

0 Upvotes
CBrew
Member
 
0 Upvotes