Relative Internal Links on Translated Page

[MsMinis]

I have create multiple pages with links to other pages using the a-tag as shown below. Works perfectly.

<a href="/pages/contact-us">Contact us.</a>

Now, when a user browses to a page with this link on it when using a localized page, aka domain.com/nl/ for example, and the user clicks the link he/she will be directed to domain.com/pages/contact-us. Something you don't want because the user is redirected to a different language.

So, you'd say I'd just add the /nl/ in the translated page, like shown below, but that creates a whole new issue.

<a href="/nl/pages/contact-us">Contact us.</a>

I have two domains domain.com and domain.nl, domain.com is english by default and has a dutch translation hence the /nl/, domain.nl is dutch by default and has an english translation which creates a /en/ subfolder. You might already see where this is going.

The translations in Shopify are shared so dutch pages when using the domain.nl would redirect to '/nl/pages/contact-us' but the entire /nl/ subfolder does not exist there because the domain already implies it's dutch. Same thing happens the other way around, it's basically a mess.

Who has a solution? Any pointers or ideas?

[MsMinis]

No one?

[MsMinis]

Let's bump this up, again. I don't have a solution yet but I'd suggest that Shopify implements something that will make relative links include the localization path that the user is on when clicked.

[jonasgoddeeris]

exactly

[scala1]

Hey, we have the same situation and I just simply solved it like this:

      {% if localization.language.iso_code == 'en' %}
        <a href="{{ request.path | replace: "/en/", "/" }}" class="header__icon header__icon--cart link focus-inset header__icon--language-toggle">
          NL
        </a>
      {% else %}
        <a href="/en{{ request.path }}" class="header__icon header__icon--cart link focus-inset header__icon--language-toggle">
          EN 
        </a>
      {% endif %}