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

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

kazunari
Tourist
7 0 3

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 %}
Replies 3 (3)

richbrown_staff
Shopify Staff
651 95 160

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.

To learn more visit the Shopify Help Center or the Community Blog.

Transcy
Shopify Partner
285 19 84

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

Transcy - The #1 Translation and Currency Converter
- Was my answer helpful? Please hit Like or Mark it as solution!
- Get in touch with us: App Store | Blog
kazunari
Tourist
7 0 3

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

opera_cwwUFdhIkj.png