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 10 (10)

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
156 9 15

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!

 

 

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
36855 3637 11980

@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