How can I create a dropdown menu to filter blog posts by tags?

[Charlie_Horse]

Trying to create a dropdown menu to filter blog posts by tags on one page. I've tried every possible code. I know the code to just show a list of tags, but I want them to appear in a dropdown menu. 

This is the code that I have so far. But the problem is that it doesn't go to the selected tag.

It goes to this: https://www.thehorsebc.world/blogs/google-blogger/tagged/tag

Instead I need for it to go to the selected tag: https://www.thehorsebc.world/blogs/google-blogger/tagged/backtalk

I know it's something to do with the jQuery which I am not very good at. Any help would be appreicated. 

<div class="clearfix filter">
  <p>Browse by tag:</p>
  <select class="blog-filter">
    <option value="">All</option>
    {% for tag in blog.all_tags %}
    {% if current_tags contains tag %}
    <option value="{{ tag | handle }}" selected>{{ tag }}</option>
    {% else %}
    <option value="{{ tag | handle }}">{{ tag }}</option>
    {% endif %}
    {% endfor %}
  </select>
</div>

<script>
  /* Blog Tag Filters - on blog pages */
  var blogFilters = jQuery('.blog-filter');
  blogFilters.change(function() {
    var newTags = [];
    blogFilters.each(function() {
      if (jQuery(this).val()) {
        newTags.push(jQuery(this).val());
      }
    });
    if (newTags.length) {
      var query = newTags.join('+');
      window.location.href = jQuery('{{ 'blog.all_tags' | link_to_tag: 'tag' }}').attr('href').replace('/' + query);
    }
    else {
      {% if blog.handle %}
      window.location.href = '/blogs/{{ blog.handle }}';
      {% endif %}
    }
  });
</script>
 

[Vesta_CTO]

Did you ever resolve this situation?  I need the same functionality and hoping you have a solution. 🙂

[Octipus]

I`m looking for a solution to this as well. Anyone?

[Choong_HueApps]

I just recently created and published an app that lets you create multiple dropdown blog post filters using tags. If you are still facing this issue, feel free to check it out here on the Shopify App store with 14 days free trial available. Would really love to hear your thoughts!

[EMS_Co]

Try This:

<select id="BlogTagFilter">
<option id="go_all" value="{{ shop.url }}{{ blog.url }}" selected>All</option>
{%- for tag in blog.all_tags -%}
{% if current_tags contains tag %}
<option value="{{ shop.url }}{{ blog.url }}/tagged/{{ tag | handle }}" selected>{{ tag }}</option>
{% else %}
<option value="{{ shop.url }}{{ blog.url }}/tagged/{{ tag | handle }}">{{ tag }}</option>
{% endif %}
{%- endfor -%}
</select>
<script>
$(function(){
$('#BlogTagFilter').on('change', function () {
var url = $(this).val(); // get selected value
if (url) { // require a URL
window.location = url; // redirect
}
return false;
});
});
</script>

[sean4949]

Thank you for the code. The Filter works and pulls in the tags. In the inspector, the correct URLs are there, but it is not redirecting to the tagged URL when selecting the filter. Thoughts?

[LinnN]

Did you find a way around this? I've run into the same issue with URLs not redirecting.

[sean4949]

I did not, and I put this on the back burner after messing with it for awhile.

[LinnN]

@Charlie_Horseor @KetanKumar would you be able to help?

[KetanKumar]

@LinnN 

can you please share store url

[webdeveloperssp]

Hello
It's filter is not working  after click on tag show all blogs not only respective tags blogs

[urbansoul]

Although this is now an old thread, I still found it useful for the exact same needs as those above. I'm using the Dawn theme and the issue is that trying to run the jQuery script fails as jQuery is not being loaded. The simple way to fix this is remove the whole jQuery <script>...</script> section and change the <select> tag to include a tiny bit of javascript. The finished code, using the EMS_Co snippet above would be...

<select onChange="window.document.location.href=this.options[this.selectedIndex].value;" id="BlogTagFilter">
<option id="go_all" value="{{ shop.url }}{{ blog.url }}" selected>All</option>
{%- for tag in blog.all_tags -%}
{% if current_tags contains tag %}
<option value="{{ shop.url }}{{ blog.url }}/tagged/{{ tag | handle }}" selected>{{ tag }}</option>
{% else %}
<option value="{{ shop.url }}{{ blog.url }}/tagged/{{ tag | handle }}">{{ tag }}</option>
{% endif %}
{%- endfor -%}
</select>