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

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

Charlie_Horse
Excursionist
30 0 12

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>
 

- Charlie
Replies 11 (11)

Vesta_CTO
Visitor
1 0 1

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

Octipus
Shopify Partner
30 2 7

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

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
Choong_HueApps
Shopify Partner
163 9 16

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!

 

 

File Search & Download Hub MPX ➜ Create searchable file directory for customers to search & download files from your online store.

Blog Articles Filter & Search PRO ➜ Blog Article Tag filters + Blog Article search + Featured Articles for Shopify blog.


EMS_Co
Shopify Partner
20 0 4

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
Tourist
4 1 0

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
Shopify Partner
13 0 4

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

sean4949
Tourist
4 1 0

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

LinnN
Shopify Partner
13 0 4

@Charlie_Horseor @KetanKumar would you be able to help?

KetanKumar
Shopify Partner
36932 3642 11997

@LinnN 

can you please share store url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
webdeveloperssp
Shopify Partner
11 0 0

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

urbansoul
Shopify Partner
1 0 0

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>