0

I'm trying to insert a block on our mobile homepage with shortcut links to our 4 most popular categories (through an A/B testing platform). Our website operates in different countries, so the links to the categories are different depending on which country the user is visiting the Homepage on, and our website does not have automatic redirects in place.

For example:

If they are currently on https://www.brand.com/uk-en/, it should link to https://www.brand.com/uk-en/category1.html
But
If they are on https://www.brand.com/fr-fr/, it should link to https://www.brand.com/fr-fr/category1.html

<div class="shortcuts-block"> 
  <div class="row-1"><a href="https://www.brand.com/uk-en/category1.html">Links to category 1</a></div>
  <div class="row-2"><a href="https://www.brand.com/uk-en/category2.html">Links to category 2</a></div>
  <div class="row-3"><a href="https://www.brand.com/uk-en/category3.html">Links to category 3</a></div>
  <div class="row-4"><a href="https://www.brand.com/uk-en/category4.html">Links to category 4</a></div>
</div>

I'm not familiar with JS, so was hoping if someone could help me with how to achieve this? I found this script which looks close to what I need, but I don't think that's quite it. I need it to match the /uk-en/ part of the target URL with whatever is in the current URL. I hope that makes sense. There are 13 different possibilities for the country/language string. 

<script>
    $(document).ready(function(){
        $('a[href^="http://"]').each(function(){ 
            var oldUrl = $(this).attr("href"); // Get current url
            var newUrl = oldUrl.replace("http://", "https://"); // Create new url
            $(this).attr("href", newUrl); // Set herf value
        });
    });
</script>
Levy88
  • 11
  • Is it not easier to do this on server side? How does your `uk-en` and `fr-fr` pages are coded ? Can you hardcode the `href` in those file? – AlexisBRENON Nov 28 '19 at 10:00
  • @AlexisBRENON I don't have the option to do this. As I said, I'm setting this up through an A/B testing platform so can only affect the front end. I'm not a developer, nor have access to our back end unfortunately. – Levy88 Nov 29 '19 at 09:18

1 Answers1

0

Current url you can get from window.location.href, then use URL class to get it parsed: 

const url = new URL(window.location.href);

Then combine parts and make new url manually: 

const newURL = `${protocol}://${part1}/${part2}/`

Also you can divide part or URL after :// with split 

"/path/path2/path3".split('/').map((part) => /* some transformation here */)

or use any other array method.

Prabhjot Singh Kainth
  • 1,831
  • 2
  • 18
  • 26
Ivan Cherviakov
  • 528
  • 2
  • 12
  • Thank you for your reply. Unfortunately, I don't know JS enough (read: I literally have no experience writing my own JS) to be able to turn this into a working script. – Levy88 Dec 02 '19 at 11:14
  • You have browser dev tools to play with, there you can execute any js code and get answer, then refresh page, to start anew. We all started from knowing nothing, so it is just fine to try and fail. – Ivan Cherviakov Dec 02 '19 at 15:57