HubDb filter show-all

Develop, Build & Integrate CMS Development
1

Hello everyone,
I have a resource page with a filter by content_type, everything is working properly, but I need to add a filter to show-all. Here is my code:

<select name="topic">
 <option value="">View Resources By Type</option>
 <option value="show-all">Show All</option>

 {% set content_type_array = [] %}
 {% for content_type in resource_content_type|map(attribute='content_type') %}
 {% unless content_type.name in content_type_array %}
 {% unless content_type.name == null %}
 {% do content_type_array.append(content_type.name) %}
 {% endunless %}
 {% endunless %}
 {% endfor %}
 {% for item in content_type_array %}
 <option {% if request.query_dict.topic == item %} selected{% endif %}>{{ item }}</option>
 {% endfor %}
 </select>
 <script>
 jQuery('select[name="topic"]').on('change',function(){
 let topic = jQuery(this).val();
 if(topic !='') {
 document.location.href='{{module.resources_page_link.url.href}}?topic={{tag}}'+topic;
 } 
 });
 </script>

I’m not sure how to display all the resources with a show-all filter, any help is appreciated.
thanks in advance,

Jonathan

2

Hi, @jpineda91! Hey @Anton @Oezcan can you lend some insight here on how @jpineda91 might approach this one?

Thank you! — Jaycee

3

Hi @jpineda91,

a really long time ago there was a so called “real estate” HubDB Tutorial at developers.hubspot.com but unfortunately it’s no longer available. @Jaycee_Lewis - any chance it will be available again?

Long story short - the idea was to work with queryparams. Kinda the same thing you’re doing @jpineda91,

To get the “show all” option I’d say you could do it like this

 <script>
 jQuery('select[name="topic"]').on('change',function(){
 let topic = jQuery(this).val();
 if(topic !='') {
 document.location.href='{{module.resources_page_link.url.href}}?topic={{tag}}'+topic;
 } else {
 document.location.href='{{module.resources_page_link.url.href}}';
} 
 });
 </script>

Also here’s the logic original code from the tutorial

<form id="hubdb-filter" method="get">
 <div> 
 <select name="my-hubdb-column" form="form_id" id="my-hubdb-column" onChange="this.form.submit()">
 <option value="show-all">All Categories</option>
 {% set types = hubdb_table_column(XXXXXXX,"my-custom-hubdb-column").options %}
 {% for choice in types %}
 {% set type_list = type_list~choice.id|list %}
 {% if choice.id == request.query_dict.my-custom-hubdb-column %}
 <option selected="selected" value="{{ choice.id }}">{{ choice.name }}</option>
 {% else %}
 <option value="{{ choice.id }}">{{ choice.name }}</option>
 {% endif %}
 {% endfor %}
 </select>
				<input type="submit">
 </div>
</form>

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

{% set queryparam = "" %}
{% if request.query_dict.my-hubdb-column in ["1", "2", "3"] %}
 {% set queryparam = queryparam ~ "&my-custom-hubdb-column__contains="~request.query_dict.my-hubdb-column|urlencode %} 
{% endif %}
{% if request.query_dict.my-hubdb-column == "show-all" %}
 {% set queryparam = queryparam %}
{% endif %}

hope this helps,

best,

Anton

4

Hi @Anton, thank you so much for your reply!
I tried the code but it is still adding the ?topic=show-all. Any help is appreciated.

<select name="topic">
 <option value="">View Resources By Type</option>
 <option value="show-all">Show All</option>

 {% set content_type_array = [] %}
 {% for content_type in resource_content_type|map(attribute='content_type') %}
 {% unless content_type.name in content_type_array %}
 {% unless content_type.name == null %}
 {% do content_type_array.append(content_type.name) %}
 {% endunless %}
 {% endunless %}
 {% endfor %}
 {% for item in content_type_array %}
 <option {% if request.query_dict.topic == item %} selected{% endif %}>{{ item }}</option>
 {% endfor %}
 </select>
 <script>
 jQuery('select[name="topic"]').on('change',function(){
 let topic = jQuery(this).val();
 if(topic !='') {
 document.location.href='{{module.resources_page_link.url.href}}?topic={{tag}}'+topic;
 }
 else {
 document.location.href='{{module.resources_page_link.url.href}}';
 } 
 });
 </script>
5

***Update***
@alyssamwilie Helped me solve this in another post

<select name="topic">
 <option value="">View Resources By Type</option>
 <option value="">Show All</option>
 {% set content_type_array = [] %}
 {% for content_type in resource_content_type|map(attribute='content_type') %}
 {% unless content_type.name in content_type_array %}
 {% unless content_type.name == null %}
 {% do content_type_array.append(content_type.name) %}
 {% endunless %}
 {% endunless %}
 {% endfor %}
 {% for item in content_type_array %}
 <option {% if request.query_dict.topic == item %} selected{% endif %}>{{ item }}</option>
 {% endfor %}
 </select>
 <script>
 jQuery('select[name="topic"]').on('change',function(){
 let topic = jQuery(this).val();
 let link = location.protocol + '//' + location.host + location.pathname;

 if(topic !='') {
 document.location.href = link + '?topic={{tag}}' + topic;
 } else {
 document.location.href = link;
 } 
 });
 </script>