Creating a Filtered Partner List using Hubdb

[eemcc]

I am trying to create dropdowns that will filter through a list of companies in my Hubdb table. I followed this example I found through the forums: How to Build a Real Estate Listing 

When I ran into problems I looked through all the forum posts that I could find, this is the main one that I think is closest to my project. But I am still stuck because it does not actually show the results of the filter I choose. Can anyone help me out?

<div>
<form id="partner-filter" method="get">
    <div>    
      <select name="partCat" form="form_id" id="partnerType" onChange="this.form.submit()">
        <option value="show-all">All Categories</option>
          {% set types = hubdb_table_column(3553654, "partner_type").options %}
          {% for choice in types %}
          {% set type_list = type_list~choice.id|list %}
          {% if choice.id == request.query_dict.partner_type %}
          <option selected="selected" value="{{ choice.id }}">{{ choice.name }}</option>
          {% else %}
          <option value="{{ choice.id }}">{{ choice.name }}</option>
          {% endif %}
          {% endfor %}
        </select>
    </div>
  <div>   
      <select name="partSub" form="form_id" id="partnerSubtype" onChange="this.form.submit()">
        <option value="show-all">Partner SubCategory</option>
          {% set types = hubdb_table_column(3553654, "partner_subtype").options %}
          {% for choice in types %}
          {% set type_list = type_list~choice.id|list %}
          {% if choice.id == request.query_dict.partner_subtype %}
          <option selected="selected" value="{{ choice.id }}">{{ choice.name }}</option>
          {% else %}
          <option value="{{ choice.id }}">{{ choice.name }}</option>
          {% endif %}
          {% endfor %}
        </select>
    </div>
</form>

<!-- sets the different query parameters using submitted input for hubdb query -->

{% set queryparam = "" %}
{% if request.query_dict.partCat in ["1", "2", "3"] %}
    {% set queryparam = queryparam ~ "&partner_type__contains="~request.query_dict.partCat|urlencode %} 
{% endif %}
{% if request.query_dict.partCat == "show-all" %}
    {% set queryparam = queryparam %}
{% endif %}
  {% set queryparam = "" %}
{% if request.query_dict.partSub in ["1", "2", "3"] %}
    {% set queryparam = queryparam ~ "&partner_subtype__contains="~request.query_dict.partSub|urlencode %} 
{% endif %}
{% if request.query_dict.partSub == "show-all" %}
    {% set queryparam = queryparam %}
{% endif %}
</div>

{% set table = hubdb_table_rows(3553654, environment ~ "=true", queryparam)%}

{% if table == [] %}
    <p class='align-center'>Sorry, no partners found for that Search. Try changing your filter and search again.</p>
{% else %}
  {% for row in table %}
  <div class="partners-panel">
    <div class="partners-listing d-flex flex-wrap">
      <div class="block-container">
        <div class="block align-items-center {{ row.name }}">
          <div class="align-items-center">
            <div><img src="{{ row.logo.url}}" class="partner-logo" alt="{{ row.name }}"></div>
            <div>
              <h3>{{ row.partner_type.name }}</h3>
              <h4>{{ row.partner_subtype.name }}</h4>
              <h4>{{ row.location.name }}</h4>
              <div class="button"><a href="{{ row.website_url }}">Details</a></div>
            </div>
          </div>
      </div>
    </div>
  </div>
</div>
  {% endfor %}
  {% endif %}

[alyssamwilie · Accepted solution]

@eemcc 

On your selects you need to change form="form_id" to the actual ID you're using on your form. So form="parnter_filter".

[eemcc]

For those struggling with the same thing as I did, I had the multiple query params defined incorrectly and this post helped.

https://community.hubspot.com/t5/CMS-Development/HubDB-Multiple-Filtering/td-p/9084

[eemcc]

@alyssamwilie So I made the first adjustments you recommended and just got rid of the environment ~"=true". That fixes the issue of the choice of types not sticking when the page reloads. But it's still load loading the choices I make. I feel like I'm missing something big with the "contains" lines?

<div>
<form id="partner-filter" method="get">
    <div>    
      <select name="partCat" form="partner-filter" id="partnerType" onChange="this.form.submit()">
        <option value="show-all">Partner Categories</option>
          {% set partCat = hubdb_table_column(3553654, "partner_type").options %}
          {% for choice in partCat %}
          {% set type_list = type_list~choice.id|list %}
          {% if choice.id == request.query_dict.partCat %}
          <option selected="selected" value="{{ choice.id }}">{{ choice.name }}</option>
          {% else %}
          <option value="{{ choice.id }}">{{ choice.name }}</option>
          {% endif %}
          {% endfor %}
        </select>
    </div>
  <div>   
      <select name="partSub" form="partner-filter" id="partnerSubtype"onChange="this.form.submit()">
        <option value="show-all">Partner SubCategory</option>
          {% set partSub = hubdb_table_column(3553654, "partner_subtype").options %}
          {% for choice in partSub %}
          {% set type_list = type_list~choice.id|list %}
          {% if choice.id == request.query_dict.partSub %}
          <option selected="selected" value="{{ choice.id }}">{{ choice.name }}</option>
          {% else %}
          <option value="{{ choice.id }}">{{ choice.name }}</option>
          {% endif %}
          {% endfor %}
        </select>
    </div>
</form>
{% set queryparam = "" %}
{% if request.query_dict.partCat %}
    {% set queryparam = queryparam ~ "&partner_type__contains="~request.query_dict.partner_type|urlencode %} 
{% else %}
    {% set queryparam = queryparam %}
{% endif %}
{% if request.query_dict.partSub %}
    {% set queryparam = queryparam ~ "&partner_subtype__contains="~request.query_dict.partner_subtype|urlencode %} 
{% else %}
    {% set queryparam = queryparam %}
{% endif %}
</div>

{% set table = hubdb_table_rows(3553654, queryparam)%}
{% if table == [] %}
    <p class='align-center'>Sorry, no partners found for that Search. Try changing your filter and search again.</p>
{% else %}
  {% for row in table %}
  <div class="partners-panel">
    <div class="partners-listing d-flex flex-wrap">
      <div class="block-container">
        <div class="block align-items-center {{ row.name }}">
          <div class="align-items-center">
            <div><img src="{{ row.logo.url}}" class="partner-logo" alt="{{ row.name }}"></div>
            <div>
              <h3>{{ row.partner_type.name }}</h3>
              <h4>{{ row.partner_subtype.name }}</h4>
              <h4>{{ row.location.name }}</h4>
              <div class="button"><a href="{{ row.website_url }}">Details</a></div>
            </div>
          </div>
      </div>
    </div>
  </div>
</div>
  {% endfor %}
  {% endif %}

[alyssamwilie · Accepted solution]

@eemcc 

On your selects you need to change form="form_id" to the actual ID you're using on your form. So form="parnter_filter".

[eemcc]

@alyssamwilie 

That definitely makes more sense to just see if anything actually exists. But it still reloads every time I pick something and does not actually filter the category. Here is the code and here is the link so you can see what I'm working with- https://www.losant.com/partner-filter-test-123

(I DM'd you the password)

<div>
<form id="partner-filter" method="get">
    <div>    
      <select name="partCat" form="partner-filter" id="partnerType" onChange="this.form.submit()">
        <option value="show-all">All Categories</option>
          {% set types = hubdb_table_column(3553654, "partner_type").options %}
          {% for choice in types %}
          {% set type_list = type_list~choice.id|list %}
          {% if choice.id == request.query_dict.partner_type %}
          <option selected="selected" value="{{ choice.id }}">{{ choice.name }}</option>
          {% else %}
          <option value="{{ choice.id }}">{{ choice.name }}</option>
          {% endif %}
          {% endfor %}
        </select>
    </div>
  <div>   
      <select name="partSub" form="partner-filter" id="partnerSubtype"onChange="this.form.submit()">
        <option value="show-all">Partner SubCategory</option>
          {% set types = hubdb_table_column(3553654, "partner_subtype").options %}
          {% for choice in types %}
          {% set type_list = type_list~choice.id|list %}
          {% if choice.id == request.query_dict.partner_subtype %}
          <option selected="selected" value="{{ choice.id }}">{{ choice.name }}</option>
          {% else %}
          <option value="{{ choice.id }}">{{ choice.name }}</option>
          {% endif %}
          {% endfor %}
        </select>
    </div>
</form>
  
{% set queryparam = "" %}
  {% if request.query_dict.partCat %}
    {% set queryparam = queryparam ~ "&partner_type__contains="~request.query_dict.partCat|urlencode %} 
{% else %}
    {% set queryparam = queryparam %}
{% endif %}
  
 {% set queryparam = "" %}
  {% if request.query_dict.partSub %}
    {% set queryparam = queryparam ~ "&partner_type__contains="~request.query_dict.partCat|urlencode %} 
{% else %}
    {% set queryparam = queryparam %}
{% endif %}
</div>

{% set table = hubdb_table_rows(3553654, environment ~ "=true", queryparam)%}

{% if table == [] %}
    <p class='align-center'>Sorry, no partners found for that Search. Try changing your filter and search again.</p>
{% else %}
  {% for row in table %}
  <div class="partners-panel">
    <div class="partners-listing d-flex flex-wrap">
      <div class="block-container">
        <div class="block align-items-center {{ row.name }}">
          <div class="align-items-center">
            <div><img src="{{ row.logo.url}}" class="partner-logo" alt="{{ row.name }}"></div>
            <div>
              <h3>{{ row.partner_type.name }}</h3>
              <h4>{{ row.partner_subtype.name }}</h4>
              <h4>{{ row.location.name }}</h4>
              <div class="button"><a href="{{ row.website_url }}">Details</a></div>
            </div>
          </div>
      </div>
    </div>
  </div>
</div>
  {% endfor %}
  {% endif %}

[alyssamwilie · Accepted solution]

@eemcc The page is supposed to reload. You woud have to use javascript to filter the items to not have the page reload. The only reason it's not showing the selected item in the dropdowns is because your if statement to set the selected isn't using the correct query parameter names. You have

{% if choice.id == request.query_dict.partner_type %}
{% if choice.id == request.query_dict.partner_subtype %}

should be the following to match what you're sending to the URL

{% if choice.id == request.query_dict.partCat %}
{% if choice.id == request.query_dict.partSub %}

What's the

environment ~ "=true"

in your database call? As far as I know that call only takes two parameters - Table ID/Name and filter query. So whatever this is could be messing things up as that's what Hubspot would be looking at as your query and completely ignoring the queryparam set after it. If it's supposed to be part of your query you should put it in your queryparam variable instead .

{% set queryparam = environment ~ "=true" %}

[eemcc]

Thanks for the response, @alyssamwilie!

It didn't completely solve the problem, though. The page shows it reloading but then resets the filters. The chosen filters don't take. I changed out this: 

{% set queryparam = queryparam ~ "&partner_type__contains="~request.query_dict.partCat|urlencode %} 

 for this:

{% set queryparam = queryparam ~ "&partCat="~request.query_dict.partCat|urlencode %} 

That didn't do anything different, though. Any thoughts?

[alyssamwilie]

Don't know what you're database looks like so just making some guesses here. Is partner_type the actual name of the field your trying to filter by?

Also, I see you have this if statement around the query set

{% if request.query_dict.partCat in ["1", "2", "3"] %}
    {% set queryparam = queryparam ~ "&partner_type__contains="~request.query_dict.partCat|urlencode %} 
{% endif %}

 Is 1, 2, and 3 actual options in that field? If they aren't and the parameter isn't set to one of those it's not gonna set that query.

Would make more sense to just check if that parameter exists.

{% if request.query_dict.partCat %}
    {% set queryparam = queryparam ~ "&partner_type__contains="~request.query_dict.partCat|urlencode %} 
{% else %}
    {% set queryparam = queryparam %}
{% endif %}

[dennisedson]

@eemcc ,

Why don't we get the talented @alyssamwilie who authored the solution to the post you referenced in here to take a look 😀 (she has skills!)