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

Solved
Philip_Sole
Shopify Partner
15 1 4

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

 

 

Web design and development
webdesign@philipsole.com
Accepted Solution (1)

Accepted Solutions
Philip_Sole
Shopify Partner
15 1 4

This is an 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.

Web design and development
webdesign@philipsole.com

View solution in original post

Replies 4 (4)
HunkyBill
Shopify Expert
4614 54 531

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?

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
Philip_Sole
Shopify Partner
15 1 4

This is an 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.

Web design and development
webdesign@philipsole.com

View solution in original post

HunkyBill
Shopify Expert
4614 54 531

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

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
Philip_Sole
Shopify Partner
15 1 4

@HunkyBill Over thinking is probably my MO!

 

Thanks!

Web design and development
webdesign@philipsole.com