CMS Development

jpineda91
Contributor

HubDb filter show-all

SOLVE

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

0 Upvotes
1 Accepted solution
jpineda91
Solution
Contributor

HubDb filter show-all

SOLVE

***Update***
@amwilie 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>




View solution in original post

4 Replies 4
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

HubDb filter show-all

SOLVE

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

Anton Bujanowski Signature
jpineda91
Contributor

HubDb filter show-all

SOLVE

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>

 

0 Upvotes
jpineda91
Solution
Contributor

HubDb filter show-all

SOLVE

***Update***
@amwilie 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>




Jaycee_Lewis
Community Manager
Community Manager

HubDb filter show-all

SOLVE

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

 

Thank you! — Jaycee

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot