How can I get anchor links to work correctly with localization?

Technical Q&A
1

I’m trying to link to an anchor on a page from a navigation menu for a site using localization (/en-ca/). Without localization this isn’t an issue, I simply add “#anchor-id” as the navigation menu link. Presuming the user is visiting https://domain.com/products/product-handle, this ends up rendering as https://domain.com/products/product-handle#anchor-id, which is the desired behaviour.

The problem is when the user is directed to the localized site, https://domain.com/en-ca/products/product-handle, this ends up rendering the link as https://domain.com/en-ca#anchor-link.

Anyone know how to get page anchor links to work correctly with localization via the online store navigation menus? Hardcoding the product url/handle isn’t an option, and either way breaks the localization behaviour in general.

2

For the record, I don’t believe this is possible out of the box. That said, you can do some logic in your theme files if you’re so inclined:

{% for link in your_linklist.links %}
{% liquid
  
  assign link_url = link.url

  # check if there is any localization, if not, move on          
  unless request.locale.root_url == '/'
      
    # remove any localization from link.url, then split into an array based on the hash character
    assign link_url_array = link.url | remove: request.locale.root_url | split: '#'
   
    # for some reason, if you split a simple hash/anchor link ("#anchorID") it ends up with two array items, although the first one will be blank. check if that's the case, if so, then we're dealing with a straight hash/anchor link
    if link_url_array.first == ''

      # grab the last item of the array and rebuild it
      assign link_url = link_url_array | last | prepend: '#'

    endif
  endunless               
%}

{{ link.title }}

{% endfor %}