Show "selected tag"

Themes
1

Hello!

I’ve been trying to create a “selected tag” template. Something like this:

43
Screenshot 2019-04-20 at 16.52.43.png1680×478 185 KB

But no matter what I try, I cannot seem to do it. I’ve tried something like this, when I’m on a tag page:

<div class="index-tags">
    <span class="index-tag">
        <a href="/">All Posts</a>
    </span> |
    {{#get 'tags' limit='all' as |tags|}}
    {{#foreach tags as |my_tag|}}
        <span class="index-tag{{#has slug=my_tag.slug}} selected{{/has}}">
            <a href="{{ my_tag.url }}">{{ my_tag.name }}</a>
        </span>
        {{#if @last}}
        {{else}}
        |
        {{/if}}
    {{/foreach}}
    {{/get}}
</div>

Is it possible to do this? I guess I want to:

  1. Go through all the tags
  2. For each tag, compare it to the page I’m in
  3. If it’s the same, add the selected class to it

My {{#has slug=my_tag.slug}} should work I believe, but because I’m inside the foreach, it seems that slug has the value of the current tag even though I’m using my_tag as the iterator. I believe it should keep the page slug since I’m using the iterator there.

Maybe it’s not possible. Any thoughts?

Thank you!

Jose

2

I have bypassed Handlebars and went straight to JavaScript.

This is my solution, for others wondering the same thing:

<div class="index-tags">
    <span class="index-tag">
        <a href="/">All Posts</a>
    </span> |
    {{#get 'tags' limit='all' as |tags|}}
    {{#foreach tags as |my_tag|}}
        <span class="index-tag {{slug}}">
            <a href="{{ my_tag.url }}">{{ my_tag.name }}</a>
        </span>
        {{#if @last}}
        {{else}}
        |
        {{/if}}
    {{/foreach}}
    {{/get}}
</div>

<script>
    {{#tag}}
    document.getElementsByClassName("{{slug}}")[0].className += " selected";
    {{/tag}}
</script>