Blog dropdown topic filter not working

SOLVE
vjaramillo
Member

Hi,

 

After contacting support I was told to use the code below 

<select id="blog-topics">
	<option>Filter by topic</option>
	{% for topic in contents_topics %}
		<option value="{{ group.absolute_url }}/topic/{{ topic.slug }}">{{ topic.name }}</option>
	{% endfor %}
</select>

As you can see here the dropdown displays but nothing happens when a topic is selected. I think this could be because some code is missing but I am not sure what exactly.

 

0 Upvotes
1 Accepted solution

Accepted Solutions
tjoyce
Solution
Recognized Expert | Platinum Partner

I would probably use this HUBL instead:

{% set my_topics = blog_topics('default', 250) %}
<select id="blog-topics">
	<option>Filter by topic</option>
	{% for item in my_topics %}
		<option value="{{ blog_tag_url(group.id, item.slug) }}">{{ item }}</option>
	{% endfor %}
</select>

It seems that 'content_topics' might only be getting the list of tags used for the particular blog post you are currently landed on, whereas the above code retrieves the list of all used tags in blog posts. Keep in mind, I say "used" because I think the list will omit unused blog tags. 


tim@belch.io

View solution in original post

5 Replies 5
tjoyce
Recognized Expert | Platinum Partner

That looks like half of the solution, but there is no logic for anything that happens after the dropdown is used.

Drop this script somewhere into your template

<script>
$(function(){
  $('#blog-topics').on('change', function(){
    var link = $(this).val();
    if(link != "Filter by topic"){
      window.location.href = link;
    }
  });
});
</script>

tim@belch.io

vjaramillo
Member

Hi Tim,

 

Thanks for your help.

 

This seems to partly work. I have added the script and when a topic is selected it filters the blogs and shows those with the selected topic which is great. However, once you have selected a topic, if you click on the drop-down only that topic appears to choose from and all the other topics are no longer available. Please see here.

 

Do you know why this is? and is there a way to fix this?

 

I am copying the code used here for your reference

 

HTML

 

<select id="blog-topics">
	<option>Filter by topic</option>
	{% for topic in contents_topics %}
		<option value="{{ group.absolute_url }}/topic/{{ topic.slug }}">{{ topic.name }}</option>
	{% endfor %}
</select>

 

 

JS

 

<script>
$(function(){
  $('#blog-topics').on('change', function(){
    var link = $(this).val();
    if(link != "Filter by topic"){
      window.location.href = link;
    }
  });
});
</script>

 

 

Thanks in advance!

tjoyce
Solution
Recognized Expert | Platinum Partner

I would probably use this HUBL instead:

{% set my_topics = blog_topics('default', 250) %}
<select id="blog-topics">
	<option>Filter by topic</option>
	{% for item in my_topics %}
		<option value="{{ blog_tag_url(group.id, item.slug) }}">{{ item }}</option>
	{% endfor %}
</select>

It seems that 'content_topics' might only be getting the list of tags used for the particular blog post you are currently landed on, whereas the above code retrieves the list of all used tags in blog posts. Keep in mind, I say "used" because I think the list will omit unused blog tags. 


tim@belch.io

View solution in original post

mik3mitchell
Participant

Thank you for this!  Works great!

 

Do you know how you would do the same thing with post archives?

0 Upvotes
jonburdon
Member

I'd really like to see this working for Months too, with a select field which opens blogs from that month when clicked. This is because I'm using select and option tags for all the other navigation and I'd like to keep consistent styling. Any thoughts appreciated.

0 Upvotes