Getting {{ link.active }} to work for alternative templates that use query parameters like ?view=alt

[Philip_Sole]

Hi there,

I'm using alternative templates for an account page. The alternative template is rendered using the "view" URL parameter, documented here https://shopify.dev/themes/architecture/templates

I have a navigation link that points to the alternative template with the URL /account?view=orders

I want to use something like {% if link.active %} ....do something {% endif %} that only triggers for the alternative template and not the main /account URL. link.active seems to just ignore the query parameters, which makes sense, but, is there another way to take the parameter into account?

I can do it with Javascript after the page loads, but it would be nice to do it with Liquid.

Any ideas? Shopify legends @Jason, @HunkyBill

Thanks

[HunkyBill]

You have an if statement, testing link.active. You say you want that to only trigger for the alternative template. What does that mean?

First off, you know if you're on the alternate template simply by checking that. You'll see "order". Why not trigger your logic off that?

[Philip_Sole · Accepted solution]

Hi @HunkyBill, thanks for your reply.

I guess I was saying the if statement is the usual way of checking if a link is active. I'll try explaining a bit better. 

I have a navigation menu called "dashboard", and one of the links is /account and another is /account?view=orders

The below code is how I'd usually test to see if a link in a navigation menu is active. 

        <ul>
            {%- for link in linklists.dashboard.links -%}
                <li {% if link.active %}class="active"{% endif %}>
                    <a href="{{ link.url }}">
                        {{ link.title }}
                    </a>
                </li>
            {%- endfor -%}
        </ul>

link.active returns true for the /account link when viewing both the /account and /account?view=orders pages.

I've come up with a solution based on your suggestion of using the template.suffix. Wondering if that approach looks ok or any holes you can spot in it?

            {%- for link in linklists.dashboard.links -%}

                {% assign activeLink = false %}

                {% if template.suffix %} 
                    {% capture param %}?view={{ template.suffix }}{% endcapture %}
                    {% if link.url contains param %}
                        {% assign activeLink = true %}
                    {% endif %}
                {% else %}
                    {% if link.active %}
                        {% assign activeLink = true %}
                    {% endif %}
                {% endif %}

                <li {% if activeLink %}class="active"{% endif %}>
                    <a href="{{ link.url }}">
                        {{ link.title }}
                    </a>
                </li>
            {%- endfor -%}

Thanks again.

[HunkyBill]

If it works, great! Don't overthink it.

[Philip_Sole]

@HunkyBill Over thinking is probably my MO!

Thanks!