0

I made this Website that uses anchor links in two internal pages. It´s a multilingual site, using PolyLang. The language selector is located in a floating menu at the upper right of the Website.

The owner of the site wants to use the reciprocal page functionality of the language selector. That means; in any page in English, you click on the Language Selector (Spanish) that will take you to the equivalent (reciprocal) page acording to the child menus from the parent menu item ACTIVITIES.

Working fine, out of the box, for the links; but not for the anchor links. For that, I tried Apache .htaccess and PHP, but didn´t work. JavaScript worked for this page that only has one anchor. I used:

  1. window.location.replace to substitute the canonical URL with the one including the anchor #outdining at the end of the URL.
  2. window.location.reload to refresh the page and make it go the anchor link.

It works fine.

Afterwards, I realized I had to do a similar programming for the page that has MULTIPLE anchors. Therefore, I realized the JavaScript I made will not work for that page, and what I need is a function to retrieve the anchor from the browser URL and afterwards include the retrieved anchor in the end of the URL; then, the reload function will work the same.

For example, the page is located in the anchor #cycling; then you click in the upper right floating menu “Español” and the corresponding URL will be /es/actividades/; then the #cycling anchor needs to be added at the end.

The code I used for the working page is below:

<script type="text/javascript">
window.location.replace("https://zuleta.com/outdoor-dining/#outdining");
</script>
<script type='text/javascript'>
 (function()
 {
  if( window.localStorage ){
    if(!localStorage.getItem('firstReLoad')){
     localStorage['firstReLoad'] = true;
     window.location.reload();
    } else {
     localStorage.removeItem('firstReLoad');
    }
  }
 })();
</script>   

Please help figuring out the code to dynamically add the anchor displayed in the URL to the translated URL end.

Thanks

0

Try this:

jQuery( window ).on( 'hashchange', function(){
    jQuery( '.polylang-flags > .lang-item > a' ).prop( 'hash', location.hash );
} );

You can use the above code on any pages, and you'd use it in place of these two snippets: (don't forget the <script> and </script> tags, though)

<script type="text/javascript">
window.location.replace("https://zuleta.com/outdoor-dining/#outdining");
</script>
<script type='text/javascript'>
 (function()
 {
  if( window.localStorage ){
    if(!localStorage.getItem('firstReLoad')){
     localStorage['firstReLoad'] = true;
     window.location.reload();
    } else {
     localStorage.removeItem('firstReLoad');
    }
  }
 })();
</script>

That code will watch for the anchor (e.g. #cycling) changes in the browser.

So if you're on this page and you clicked on the "Cycling" sub-menu item under the "Activities" menu item, the language selector link would have #cycling appended to its href value. Or simply put, the link's URL.

  • A clean code; no need for the windows reload function. Your code works great for the first click, meaning going for example from /activities/#cycling to the corresponding Spanish translation in /es/actividades/#cycling. Nevertheless, it doesn´t work for the second click (or click back) as then the hash is gone. It will be great if we can find a way for the second click to work. Thanks – Pablo Molina Jun 28 '18 at 11:38
  • Can you list the steps you did so that I could reproduce the issue? But if you go to /activities/ (i.e. without any hash), and you click on Cycling, the language selector link URL would have the #cycling hash; however, when you go back, the hash would be removed because there was initially no hash in the visited URL. – Sally CJ Jun 28 '18 at 13:56
  • 1. First; got to main upper menu ACTIVITIES > CYCLING where the URL will turn to zuleta.com/activities/#cycling . 2. There the floating menu (upper right) will have the hash at the end. 3. You click the floating menu then you go to the corresponding Spanish page and anchor. 4. Then you will click the menu again and the hashtag is gone. Works fine, but only for the first time. Thanks – Pablo Molina Jun 28 '18 at 14:01
  • I think I got it now.. sorry about that. I'll update the code in a moment. – Sally CJ Jun 28 '18 at 14:09
  • 1
    Worked excellent. Now it seems to reload the hash. Many thanks. – Pablo Molina Jun 28 '18 at 14:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.