How to render filters used on page ex. "Showing results for [filter 1], [filter 2], [filter 3]"

[ckingg]

Hi there, 

I'm trying to figure out how to render onto the page the values that were used to filter my database. Currently I'm using a select filter, a multi-select/checkbox filter and a search filter. 

I would like to render something like "Showing results for Resellers in the United States associted with AirParrot" when the results are shown. 

Would appreciated any help! 

Here is my code: 

<!-- set the filter by drop down, search bar, and submit button -->

<div>
<form id="form_id" method="GET" style="text-align: center">
<!--Dropdown -->
{% if module.show_hide_partner_type %}

    <div>
        <h4>Filter by partner type: </h4>
        <select name="partner_type" form="form_id">
            <option value="show-all">Show All</option>
            {% set partner_type = hubdb_table_column((3420769), "partner_type").options %}
            {% for partner in partner_type %}
                {% set partner_list = partner_list~partner.id|list %}
                {% if partner.id == request.query_dict.partner_type %}
                    <option selected="selected" value="{{ partner.id }}">{{ partner.name }}</option>
                {% else %}
                    <option value="{{ partner.id }}">{{ partner.name }}</option>
                {% endif %}
            {% endfor %}
        </select>
    </div>

{% endif %}
  
  
<!-- Multi-select -->
  {% if module.show_hide_partner_product %}

      <div>
        <h4>Filter by partner product: </h4>
          {% set partner_products = hubdb_table_column((3420769), "partner_products").options %}
          {% for product in partner_products %}
            {% set product_list = product_list~product.id|list%}
            {% if product.id == request.query_dict.partner_products%}
              <input type="checkbox" id="{{product.id}}" name="partner_products" value="{{product.id}}">
              <label for="{{product.name}}">  {{product.name}}</label><br>
            {% else %}
              <input type="checkbox" id="{{product.id}}" name="partner_products" value="{{product.id}}">
              <label for="{{product.name}}">  {{product.name}}</label><br>
            {% endif %}
          {% endfor %}
      </div>
  
{% endif %}
  
<!-- Search -->
{% if module.show_hide_search %}

 <div>
   <h4>Filter by partner country: </h4>
   <input name="partner_country" type="text" id="search-by" class="autocomplete" placeholder="Search by Country">
 </div>
{% endif %}
  <div style="margin-top: 20px">
    <input id="submit-button" type="submit" value="Enter">
    <div style="margin-top: 20px">
       <a href="/test-partner-locator-page">Reset Filters</a>
    </div>
   
  </div>

</form>
</div>



{% set queryparam = "" %}
<!-- Dropdown Selection + No Country Entry -->
{% if request.query_dict.partner_type in ["1", "2"] and request.query_dict.partner_country == "" %}
    {% set queryparam = queryparam ~ "&partner_type="~request.query_dict.partner_type|urlencode %}
{% endif %}
<!-- Dropdown Selection + Country Entry -->
{% if request.query_dict.partner_type in ["1", "2"] and request.query_dict.partner_country != "" %}
    {% set queryparam = queryparam ~ "&partner_type="~request.query_dict.partner_type|urlencode~"&partner_country__contains="~request.query_dict.partner_country|urlencode %}
{% endif %}
<!-- Multi-Select Selection + No Country Entry -->
{% if request.query_dict.partner_products in ["1", "2", "3"] and request.query_dict.partner_country == "" %}
    {% set queryparam = queryparam ~ "&partner_products__in="~request.query_dict.partner_products|urlencode %}
{% endif %}
<!-- Multi-Select Selection + Country Entry -->
{% if request.query_dict.partner_products in ["1", "2", "3"] and request.query_dict.partner_country != "" %}
  {% set queryparam = queryparam ~ "&partner_products__in="~request.query_dict.partner_products|urlencode~"&partner_country__contains="~request.query_dict.partner_country|urlencode %}
{% endif %}
<!-- No Dropdown or Multi-Select + Country Search -->
{% if request.query_dict.partner_type == "show-all" and request.query_dict.partner_products == "show-all" and request.query_dict.partner_country != "" %}
    {% set queryparam = queryparam~"&partner_country__contains="~request.query_dict.partner_country|urlencode %}
{% endif %}
<!-- If Dropdown or Multi-Select is hidden, still allow search to function -->
{% if request.query_dict.partner_type == "show-all" or request.query_dict.partner_products == "" and request.query_dict.partner_country != "" %}
    {% set queryparam = queryparam~"&partner_country__contains="~request.query_dict.partner_country|urlencode %}
{% endif %}
{% if request.query_dict.partner_type == "" or request.query_dict.partner_products == "show-all" and request.query_dict.partner_country != "" %}
    {% set queryparam = queryparam~"&partner_country__contains="~request.query_dict.partner_country|urlencode %}
{% endif %}
<!-- Show All + No Country Entry -->
{% if request.query_dict.partner_type == "show-all" and request.query_dict.partner_products == "show-all" %}
    {% set queryparam = queryparam %}
{% endif %}

<!-- end -->

{% set table = hubdb_table_rows((3420769), queryparam) %}


{% 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 table %}
<div>
    <div class="{{ row["partner_type"].name }}">
            <div>
              <div class="item">
                <h4>Partner:</h4>
                 <p>{{ row.partner_name }}</p>
               </div>
              
              <div class="item">
                <h4>Partner Type:</h4>
                <p>{{ row.partner_type.name }}</p>
              </div>
              
              <div class="item">
                <h4>Partner Country:</h4>
                <p>{{ row.partner_country}}</p>
              </div>
             
              <div class="item">
                 <h4>Partner Products:</h4>
                  {% for product in row.partner_products %}
                    {{ product.name }}{% if !loop.last %}, {% endif %}
                  {% endfor %}
              </div>
             
              <hr>
            </div>
    </div>            
</div>
  {% endfor %}
{% endif %}

[tjoyce · Accepted solution]

@ckingg - Here's how I would do it...

I would start pushing javascript variables to your window object... for example, in your "partners" select field logic you have a for loop... you could use the same for loop to push variables to the window

<script>
  window.CHOSEN_QUERY_PARAMS = {
    partner: '',
    country: '',
    association: ''
  };
</script>
{% set partner_type = hubdb_table_column((3420769), "partner_type").options %}
{% for partner in partner_type %}
   {% set partner_list = partner_list~partner.id|list %}
      {% if partner.id == request.query_dict.partner_type %}
         <script>window.CHOSEN_QUERY_PARAMS.partner = '{{partner.name}}';</script>
      {% endif %}
   {% endfor %}

then your helper text would look like this:

Showing results for <span class="uni-chosen-partner"></span> in the <span class="uni-chosen-country"></span> associted with <span class="uni-chosen-association"></span>

and finally, your footer script would look like this

<script>
  $(function(){
    $('.uni-chosen-partner').text(window.CHOSEN_QUERY_PARAMS.partner);
    $('.uni-chosen-country').text(window.CHOSEN_QUERY_PARAMS.country);
    $('.uni-chosen-association').text(window.CHOSEN_QUERY_PARAMS.association);
  });
</script>

As long as you're not worried about SEO for this text, this is the easiest way to get around variable and object scoping in HUBL using foreach loops.

Alternatively, If you do want to stick with HUBL to render this text... take a look at this guide here https://community.hubspot.com/t5/CMS-Development/How-to-change-a-variable-outside-of-a-for-loop-Scop...

JavaScript is just much simpler... hope this helps.

[Ntbrown]

Lot of text I only skimmed it, but high level you seem to have the query params and a lot of code surrounding it.... Why not just use that to build a string dynamically with the search description and display it?

Although.... I think this is an anti-pattern. When a users selects search criteria and new results are displayed they know what they've filtered..... and with a multi-select that description can become overly verbose unless truncated to some high level description which is the antithesis of verbosity.

If you want it for ARIA announcements then sure.... That's useful for people with visual impairments and disabilities.

There are patterns to achieve this, but I don't think that's what you're getting at here.

[ckingg]

Thanks for the reply @Ntbrown. I could probably pass on displaying the filters in the search results. However, when I hit enter to begin filtering, the checkboxes and search box are cleared and don't show what the user searched for after the results are displayed.  Any idea how I can prevent those from clearing upon submit? 

Also, for what it's worth, I've tried working through my initial questions and I can get the table item ID to display (this is the only one I've tried so far) after hitting submit with 

 {% set display = request.query_dict.partner_type %}

And using 

{{ display }}

To render the table item ID associated with the filter when the filter is applied, but I can't get it to render the name of the table item.
Does that make sense? 

[Anton]

Hi @ckingg, 

what does 

{{ display }}

show you, when you pprint it?

best, 

Anton

[ckingg]

@Anton it shows:

 (String: 1)