Filter HubDB

Highlighted
Top Contributor

Hi I am building a resource page and would like help/guidance on how to implement a filter that will update the listing when something is selected.

 

The preview site is:
https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=...

 

The current code is:

<div id=resources>

  <!-- FEATURED RESOURCE PANEL -->

  {% set table = hubdb_table_rows(848813, "resource-order=1") %}
  {% if table == [] %}
  <p class='align-center'>Sorry, no listings found for that Search. Try changing your fiter and search again.</p>
  {% else %}
  {% for row in table %}

  <a href="{{ row["resource_url"] }}">
    <div id="featured-resource-container" >
      <div id="featured-resource" >
        <div class="{{ row["type"].name }}">
          <div class=resource-thumbnail>
            <div class=content-type-icon><img src="{{ row["content-type-icon"].url}}"></div>
            <img src="{{ row["thumbnail"].url}}">
          </div> 
          <div class="resource-details">
            <h1>Featured Resource</h1>
            <p class="resource-type">{{ row["resource-type"].name }}</p>
            <h2>{{ row["resource-title"] }}</h2>
            <div class="focus">
              <p>Focus Areas:</p>
              <ul class="tag">
                {% for area in row["area"] %}
                <li>{{area.name}}</li>
                {% endfor %}
              </ul>
            </div>
            <!--<div class="button"><a href="{{ row["resource_url"] }}">Learn more</a></div>-->
          </div>
        </div>            
      </div>
    </div>
  </a>
  {% endfor %}
  {% endif %}
  
  
<!-- FILTER -->

  <div>
    <form id="form_id" method="get">

      <div>
        <h4>FILTER BY LISTING TYPE: </h4>
        <select name="type" form="form_id" onChange="this.form.submit()">
          <option value="show-all">Show All</option>
          {% set types = hubdb_table_column(848813, "resource-type").options %}
          {% for choice in types %}
          {% set type_list = type_list~choice.id|list%}
          {% if choice.id == request.query_dict.type%}
          <option selected="selected" value="{{ choice.id }}">{{ choice.name }}</option>
          {% else %}
          <option value="{{ choice.id }}">{{ choice.name }}</option>
          {% endif %}
          {% endfor %}
        </select>
      </div>

    </form>
  </div>


  <!-- RESOURCE PANELS -->

  {% set table = hubdb_table_rows(848813, "&orderBy=resource-order") %}

  {% if table == [] %}
  <p class='align-center'>Sorry, no listings found for that Search. Try changing your fiter and search again.</p>
  {% else %}
  {% for row in table %}

  <a href="{{ row["resource_url"] }}"> 
    <div class="resource-container" >
      <div id="resource-listing" >
        <div class="{{ row["type"].name }}">
          <div class=resource-thumbnail>
            <div class=content-type-icon><img src="{{ row["content-type-icon"].url}}"></div>
            <img src="{{ row["thumbnail"].url}}">
          </div>
          <div class="resource-details">
            <p class="resource-type">{{ row["resource-type"].name }}</p>
            <h2>{{ row["resource-title"] }}</h2>
            <div class="focus">
              <p>Focus Areas:</p>
              <ul class="tag">
                {% for area in row["area"] %}
                <li>{{area.name}}</li>
                {% endfor %}
              </ul>
            </div>
            <!--<div class="button"><a href="{{ row["resource_url"] }}">Learn more</a></div>-->
          </div>
        </div>            
      </div>
    </div>
  </a>
  {% endfor %}
  {% endif %}

</div>  

I have got the dropdown to call the options from the hubDB but I am unsure how to make the selection update the table below.

 

I have two versions of the table displaying on the page. One is just showing the Featured Resource and the second table is showing the other resources.

 

Thank you in advance for any assistance.

6 Replies 6
Community Manager

 

@AJLaPorte_diagr is this something you could assist with? 

 


Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes
Advisor | Platinum Partner

@jennysowyrda @Woodsy, this is actively being discussed in the Dev Slack at the moment Smiley Happy

Reply
0 Upvotes
Esteemed Advisor

@Woodsy,

 

There are only three ways I can think if to acheive this.

 

1. using the url and queries. You would need to append the filter to the url and reload the page. Collect the query in a HubL variable. use the query to filter the database which would output items the correspond to the filter. 

 

2. Using Ajax. When the filter is selected you have to send it to the database and recieve the results. Ajax allows you to update parts of a page without reloading the entire page. I haven't use Ajax with HubDB yet though so I don't have much on the topic.

 

3. jquery filter. You can use jquery to hide elements and show them based on selected filters. I don't like this because the hidden items still exist on the page, and to filter them you are probably going to have to do something obscure like check the text contained in an element. If you have full markup control then it would be a lot cleaner.

 

Need help? Hire Us Here

- Jonathan Sumner
Occasional Contributor | Gold Partner | Certified Trainer

Hi there

 

I have the same issue on my page: http://campaign-stssensors-com.sandbox.hs-sites.com/en/events?country=show-all

 

I buzilt the module based on this documentation: https://designers.hubspot.com/docs/tutorials/how-to-build-a-real-estate-listing-with-hubdb

 

The URL changes according to my choice in the dropdown, but the table is not filtered.

Here is the code:

<!-- set the filter by drop down, search bar, and submit button -->
<div class="bg-dark-grey"> 
<div class="wrapper">
<form id="form_id" method="get">     
        <select name="country" form="form_id" onChange="this.form.submit()">
            <option value="show-all">Show All</option>
            {% set types = hubdb_table_column(1039586, "country").options %}
            {% for choice in types %}
                {% set country_list = country_list~choice.id|list%}
                {% if choice.id == request.query_dict.country%}
                    <option selected="selected" value="{{ choice.id }}">{{ choice.name }}</option>
                {% else %}
                    <option value="{{ choice.id }}">{{ choice.name }}</option>
                {% endif %}
            {% endfor %}
        </select>
</form>
</div>
</div>

<!-- sets the different query parameters using submitted input for hubdb query -->
{% set queryparam = "" %}
{% if request.query_dict.country in types %}
    {% set queryparam = queryparam ~ "&country="~request.query_dict.country|urlencode %}
{% endif %}
{% if request.query_dict.country == "show-all" %}
    {% set queryparam = queryparam %}
{% endif %}



{% if table == [] %}
    <p class='align-center'>Sorry, no listings found for that Search. Try changing your filter and search again.</p>
{% else %}
{% for row in hubdb_table_rows(1039586) %}
<div class="bg-light-grey">
  <div class="wrapper">
    <div class="preview-img-left">
      <img src="{{ row.logo.url }}">
    </div>
     <div class="events-text-right">
      <h2>{{ row.name }}</h2>
      <div>{{ row.date }}</div>
      <div>{{ row.location }}</div>
      {% if row.website_link %}
        <a class="cta-link" href="{{row.website_link}}" target="_blank">Website</a>
       {% endif %}
      {% if row.registration_link %}
        <a class="cta-link" href="{{row.registration_link}}" target="_blank">Registration</a>
      {% endif %}
     </div>       
  </div>
</div>
{% endfor %}
{% endif %}

I would like to solve it with HubL, not with jquery or Ajax. Has anybody an idea, how to solve it?

 

Thanks for your help.

 

Reply
0 Upvotes
Occasional Contributor | Gold Partner | Certified Trainer

Figured it out in the meanwhile Smiley Happy

 In case someone is interested in the code:

<!-- set the filter by drop down, search bar, and submit button -->
<div class="bg-dark-grey"> 
<div class="wrapper">
<form id="form_id" method="get">     
        <select name="country" form="form_id" onChange="this.form.submit()">
            <option value="show-all">Show All</option>
            {% set types = hubdb_table_column(1039586, "country").options %}
            {% for choice in types %}
                {% set country_list = country_list~choice.id|list%}
                {% if choice.id == request.query_dict.country%}
                    <option selected="selected" value="{{ choice.id }}">{{ choice.name }}</option>
                {% else %}
                    <option value="{{ choice.id }}">{{ choice.name }}</option>
                {% endif %}
            {% endfor %}
        </select>
</form>
</div>
</div>

<!-- sets the different query parameters using submitted input for hubdb query -->
{% set queryparam = "" %}
{% if request.query_dict.country in types %}
    {% set queryparam = queryparam ~ "&country="~request.query_dict.country|urlencode %}
{% endif %}
{% if request.query_dict.country == "show-all" %}
    {% set queryparam = queryparam %}
{% endif %}

{% if table == [] %}
    <p class='align-center'>Sorry, no listings found for that Search. Try changing your filter and search again.</p>
{% else %}

{{queryparam}}

{% for row in hubdb_table_rows(1039586) %}
{% if request.query_dict.country == "show-all" %}
<div class="bg-light-grey">
  <div class="wrapper">
    <div class="preview-img-left">
      <img src="{{ row.logo.url }}">
    </div>
     <div class="events-text-right">
      <h2>{{ row.name }}</h2>
      <div>{{ row.date }}</div>
      <div>{{ row.location }}</div>
      {% if row.website_link %}
        <a class="cta-link" href="{{row.website_link}}" target="_blank">Website</a>
       {% endif %}
      {% if row.registration_link %}
        <a class="cta-link" href="{{row.registration_link}}" target="_blank">Registration</a>
      {% endif %}
     </div>       
  </div>
</div>
{% endif %}
{% if row.country.id in request.query_dict.country%}
<div class="bg-light-grey">
  <div class="wrapper">
    <div class="preview-img-left">
      <img src="{{ row.logo.url }}">
    </div>
     <div class="events-text-right">
      <h2>{{ row.name }}</h2>
      <div>{{ row.date }}</div>
      <div>{{ row.location }}</div>
      {% if row.website_link %}
        <a class="cta-link" href="{{row.website_link}}" target="_blank">Website</a>
       {% endif %}
      {% if row.registration_link %}
        <a class="cta-link" href="{{row.registration_link}}" target="_blank">Registration</a>
      {% endif %}
     </div>       
  </div>
</div>

{% endif%}

{% endfor %}
{% endif %}

Best,

Jaqueline

Community Manager

Thanks for sharing @Jaqueline!


Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes