CMS Development

Woodsy
Top Contributor

Filter HubDB

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
Jsum
Key Advisor

Filter HubDB

@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

Jaqueline
Contributor | Platinum Partner
Contributor | Platinum Partner

Filter HubDB

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.

 


Jaqueline Hoppe
jhoppe@w-4.com
Digital Marketing Consultant, HubSpot Specialist & HubSpot Certified Trainer

W4 – Marketing meets IT
Zurich // Basel // Dresden // Bratislava // Beijing // Gujranwala
www.w-4.com
0 Upvotes
Jaqueline
Contributor | Platinum Partner
Contributor | Platinum Partner

Filter HubDB

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


Jaqueline Hoppe
jhoppe@w-4.com
Digital Marketing Consultant, HubSpot Specialist & HubSpot Certified Trainer

W4 – Marketing meets IT
Zurich // Basel // Dresden // Bratislava // Beijing // Gujranwala
www.w-4.com
jennysowyrda
Community Manager
Community Manager

Filter HubDB

Thanks for sharing @Jaqueline!

0 Upvotes
jennysowyrda
Community Manager
Community Manager

Filter HubDB

 

@AJLaPorte_diagr is this something you could assist with? 

 

0 Upvotes
AJLaPorte_diagr
Key Advisor

Filter HubDB

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

0 Upvotes