How can I fix 404 errors with URL translation and redirection?

[kazunari]

I have several languages in the shop. I started to translate the URLs into each language, but there was a problem with redirection.

Now, when someone accesses the URL:
https://de.medpak.shop/collections/vitamine-nahrungserganzungsmittel/

and then wants to go back to that URL using the language change in the bottom left corner:
https://medpak.shop/collections/vitamine-nahrungserganzungsmittel

This gets a 404 error. Is it possible to make it so that the redirect always works correctly though?
https://medpak.shop/collections/vitamine-nahrungserganzungsmittel

and it should go to:
https://medpak.shop/collections/vitamins-supplements

This is what my code for changing the language looks like:

{% form 'localization', id: "localization_form_tag", class: "dropup" %}
<button class="language-button"><a href="#">{{ form.current_locale.endonym_name }}</a></button>
<div class="dropup-content">
  {% for locale in shop.published_locales %}
  <a href="https://medpak.shop{{ request.path }}" id="localeItem">{{ locale.endonym_name }}</a>
  <a href="https://cz.medpak.shop{{ request.path }}" id="localeItem"><img src="https://cdn.shopify.com/s/files/1/0560/5788/8819/files/202-czech_republic.svg" width="32" height="32">Czech</a>
  <a href="https://de.medpak.shop{{ request.path }}" id="localeItem"><img src="https://cdn.shopify.com/s/files/1/0560/5788/8819/files/208-germany.svg" width="32" height="32">Deutsch</a>
  <a href="https://nl.medpak.shop{{ request.path }}" id="localeItem"><img src="https://cdn.shopify.com/s/files/1/0560/5788/8819/files/077-netherlands.svg" width="32" height="32">Dutch</a>
  <a href="https://ee.medpak.shop{{ request.path }}" id="localeItem"><img src="https://cdn.shopify.com/s/files/1/0560/5788/8819/files/004-estonia.svg" width="32" height="32">Estonian</a>
  <a href="https://medpak.shop{{ request.path }}" id="localeItem"><img src="https://cdn.shopify.com/s/files/1/0560/5788/8819/files/110-united_kingdom.svg" width="32" height="32">English</a>
  <a href="https://fr.medpak.shop{{ request.path }}" id="localeItem"><img src="https://cdn.shopify.com/s/files/1/0560/5788/8819/files/197-france.svg" width="32" height="32">French</a>
  <a href="https://it.medpak.shop{{ request.path }}" id="localeItem"><img src="https://cdn.shopify.com/s/files/1/0560/5788/8819/files/263-italy.svg" width="32" height="32">Italian</a>
  <a href="https://lt.medpak.shop{{ request.path }}" id="localeItem"><img src="https://cdn.shopify.com/s/files/1/0560/5788/8819/files/238-lithuania.svg" width="32" height="32">Lithuanian</a>
  <a href="https://sk.medpak.shop{{ request.path }}" id="localeItem"><img src="https://cdn.shopify.com/s/files/1/0560/5788/8819/files/218-slovakia.svg" width="32" height="32">Slovak</a>
  <a href="https://es.medpak.shop{{ request.path }}" id="localeItem"><img src="https://cdn.shopify.com/s/files/1/0560/5788/8819/files/230-spain.svg" width="32" height="32">Spanish</a>
  {% endfor %}
  </div>
{% endform %}

[richbrown_staff]

Hi @kazunari , it looks like it might be your language switcher. When we test the language switchers on Dawn we hit the localization endpoint which is what's responsible for ensuring that the translated handle references the correct resource. 

Here's the doc on it: https://shopify.dev/docs/themes/markets/multiple-currencies-languages#the-language-selector

We think it's because there's hard coded request paths, e.g: cz.medpak.shop{{ request.path }} , plus a number of subdomain markets where the language switcher is being treated like a country switcher to switch between domains. A country switcher would likely make more sense here. A language switcher isn't really meant to switch between countries.

Hope that helps - we can't provide too much support for custom code, but hopefully this gives an overview of the issue.

[Transcy]

Hello @kazunari ,

You can try to modify the code like this:

{% form 'localization', id: "localization_form_tag", class: "dropup" %}
<button class="language-button">{{ form.current_locale.endonym_name }}</button>
<div class="dropup-content">
  {% for locale in shop.published_locales %}
    {% case locale.locale %}
      {% when 'en' %}
        <a href="https://medpak.shop{{ request.path }}" id="localeItem"><img src="https://cdn.shopify.com/s/files/1/0560/5788/8819/files/110-united_kingdom.svg" width="32" height="32">English</a>
      {% when 'cz' %}
        <a href="https://cz.medpak.shop{{ request.path }}" id="localeItem"><img src="https://cdn.shopify.com/s/files/1/0560/5788/8819/files/202-czech_republic.svg" width="32" height="32">Czech</a>
      {% when 'de' %}
        <a href="https://de.medpak.shop{{ request.path }}" id="localeItem"><img src="https://cdn.shopify.com/s/files/1/0560/5788/8819/files/208-germany.svg" width="32" height="32">Deutsch</a>
      {% when 'nl' %}
        <a href="https://nl.medpak.shop{{ request.path }}" id="localeItem"><img src="https://cdn.shopify.com/s/files/1/0560/5788/8819/files/077-netherlands.svg" width="32" height="32">Dutch</a>
      {% when 'ee' %}
        <a href="https://ee.medpak.shop{{ request.path }}" id="localeItem"><img src="https://cdn.shopify.com/s/files/1/0560/5788/8819/files/004-estonia.svg" width="32" height="32">Estonian</a>
      {% when 'fr' %}
        <a href="https://fr.medpak.shop{{ request.path }}" id="localeItem"><img src="https://cdn.shopify.com/s/files/1/0560/5788/8819/files/197-france.svg" width="32" height="32">French</a>
      {% when 'it' %}
        <a href="https://it.medpak.shop{{ request.path }}" id="localeItem"><img src="https://cdn.shopify.com/s/files/1/0560/5788/8819/files/263-italy.svg" width="32" height="32">Italian</a>
      {% when 'lt' %}
        <a href="https://lt.medpak.shop{{ request.path }}" id="localeItem"><img src="https://cdn.shopify.com/s/files/1/0560/5788/8819/files/238-lithuania.svg" width="32" height="32">Lithuanian</a>
      {% when 'sk' %}
        <a href="https://sk.medpak.shop{{ request.path }}" id="localeItem"><img src="https://cdn.shopify.com/s/files/1/0560/5788/8819/files/218-slovakia.svg" width="32" height="32">Slovak</a>
      {% when 'es' %}
        <a href="https://es.medpak.shop{{ request.path }}" id="localeItem"><img src="https://cdn.shopify.com/s/files/1/0560/5788/8819/files/230-spain.svg" width="32" height="32">Spanish</a>
    {% endcase %}
  {% endfor %}
</div>
{% endform %}

Let us know if it works

Hope this can help.

Transcy

[kazunari]

This method does not work because the individual languages do not display.