topic Re: How to render filters used on page ex. "Showing results for [filter 1], [filter 2], [filter in CMS Development

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

ckingg — Mon, 15 Mar 2021 17:29:02 GMT

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:

<div> <form id="form_id" method="GET" style="text-align: center">  {% 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 %}  {% 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 %}  {% 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 = "" %}  {% 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 %}  {% 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 %}  {% 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 %}  {% 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 %}  {% 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 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 %}  {% if request.query_dict.partner_type == "show-all" and request.query_dict.partner_products == "show-all" %} {% set queryparam = queryparam %} {% endif %}  {% 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 %}

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

Ntbrown — Mon, 15 Mar 2021 18:51:46 GMT

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.

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

ckingg — Mon, 15 Mar 2021 18:59:02 GMT

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

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?

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

Anton — Mon, 15 Mar 2021 22:09:24 GMT

Hi @ckingg,

what does

show you, when you pprint it?

best,

Anton

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

ckingg — Mon, 15 Mar 2021 23:35:13 GMT

@Anton it shows:

(String: 1)

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

tjoyce — Tue, 16 Mar 2021 09:08:22 GMT

@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

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

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-Scoping-Issues/td-p/211117

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