Hello, I'm working on a resource library using HubDB. I got most of the things working, except the filters by content_type. Filters display but I'm not sure if the URL ?topic=Case%20Study is created and shows only the resources type = Case Study.
<div class="resource-cards-module">
{% if module.show_filters %}
<div class="filters">
<div class="filter-by-type">
<select name="topic">
<option value="">View Resources By Type</option>
{% for content_type in resource_content_type|map(attribute='content_type') %}
{% set resource_content_type = hubdb_table_rows(module.hubdbtable_field) %}
<option>{{ content_type.name }}</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>
</div>
<div class="search-articles">
{% icon name="search" style="SOLID" %}
<input type="text" name="search" placeholder="Search Resources" value="" />
</div>
</div>
{% endif %}
{% if module.headline %}<h2 class="text-center light">{{ module.headline }}</h2>{% endif %}
<div class="grid">
{% for row in hubdb_table_rows(module.hubdbtable_field,'&orderBy=-date','&limit='~module.limit) %}
<div class="grid-item">
<a href="{{ row.link }}" class="item-link"></a>
<div class="item-image-wrapper">
<div class="item-image" style="background-image: url('{{ row.featured_image.url }}');"></div>
</div>
<div class="item-content">
<h3>{{ row.name }}</h3>
{{ row.description|truncatehtml(150) }}
<hr />
{% if row.content_type %}
<div class="resource-topics">
{% for tag in row.content_type.name|split(',') %}
<a class="resource-topic-link" href="{{module.resources_page_link.url.href}}?topic={{tag}}">{{ tag }}</a>{% if not loop.last %},{% endif %}
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
</div>
Not sure if this is the solution, but it's the first thing I noticed - it looks to me like these two lines may be in the wrong order:
{% for content_type in resource_content_type|map(attribute='content_type') %}
{% set resource_content_type = hubdb_table_rows(module.hubdbtable_field) %}
You're doing the for content_type in resource_content_type but it hasn't been set yet.
You're not setting anything to filter the entries in your loop that creates the posts
So this:
{% for row in hubdb_table_rows(module.hubdbtable_field,'&orderBy=-date','&limit='~module.limit) %}
Needs to call in your string from the url:
// You need to do an if statment to account for the fact that it may not be set:
{% if request.query_dict.topic %}
{% set tableQuery = hubdb_table_rows(module.hubdbtable_field, 'content_type='+request.query_dict.topic) %}
{% else %}
{% set tableQuery = hubdb_table_rows(module.hubdbtable_field) %}
{% endif %}
// I haven't included your other parameters but you can add then in yourself
Then you'd replace your:
{% for row in hubdb_table_rows(module.hubdbtable_field,'&orderBy=-date','&limit='~module.limit) %}
<div class="filters">
<div class="filter-by-type">
<select name="topic">
<option value="">View Resources By Type</option>
{% set resource_content_type = hubdb_table_rows(module.hubdbtable_field) %}
{% for content_type in resource_content_type|map(attribute='content_type') %}
<option>{{ content_type }}</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='+topic;
}
});
</script>
</div>
It worked in a very quick test I ran on my portal. I removed the ".name" from the option. My column "content_type" was just a text input, what type of input is yours that it has a name attribute, I'll test that out too.
@BarryGrennan Thanks for all your help! that fixed the display issue, but now I have a new issue 😓 I added more resources with the same content_type and it just shows the same filter option multiple times.
@BarryGrennan I'm sorry, I don't know how to implement the array. Does that code replace the <select>? *EDIT* The code you suggested got rid of the duplicates 🙌 but I published the page to test the actual filtering ?topic and it does not work 😫. Any help is appreciated!
<select name="topic">
<option value="">View Resources By Type</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>{{ item }}</option>
{% endfor %}
</select>
You're not setting anything to filter the entries in your loop that creates the posts
So this:
{% for row in hubdb_table_rows(module.hubdbtable_field,'&orderBy=-date','&limit='~module.limit) %}
Needs to call in your string from the url:
// You need to do an if statment to account for the fact that it may not be set:
{% if request.query_dict.topic %}
{% set tableQuery = hubdb_table_rows(module.hubdbtable_field, 'content_type='+request.query_dict.topic) %}
{% else %}
{% set tableQuery = hubdb_table_rows(module.hubdbtable_field) %}
{% endif %}
// I haven't included your other parameters but you can add then in yourself
Then you'd replace your:
{% for row in hubdb_table_rows(module.hubdbtable_field,'&orderBy=-date','&limit='~module.limit) %}
Not sure if this is the solution, but it's the first thing I noticed - it looks to me like these two lines may be in the wrong order:
{% for content_type in resource_content_type|map(attribute='content_type') %}
{% set resource_content_type = hubdb_table_rows(module.hubdbtable_field) %}
You're doing the for content_type in resource_content_type but it hasn't been set yet.
{% set resource_content_type = hubdb_table_rows(module.hubdbtable_field) %}
{% for content_type in resource_content_type|map(attribute='content_type') %}
Because you're doing a for loop base on resource_content_type but it hasn't been set yet.
Also just to note that I edited my reply (I think just before you replied) to mention that your jQuery may not work due to missing closing bracket, etc.