How to switch url with javascript button

Question

I'm trying to reuse a button in different landing pages and change the hyperlink of this button depending on what page is being browsed.

I started my function for it but I'm stuck on how to pass the data. If the user is on a page that contains home_ns in the url, I would like the button link to be cart1 and if the user is on a page called home_nd I would like it to be cart 2.

<script type="text/javascript">
    var cart1 = '/?add-to-cart=2419';
    var cart2 = '/?add-to-cart=2417';
    function urlCart() {
        if(window.location.href.indexOf("home_ns") > -1) {

 // This is where I am stuck
}
    }

</script>

Then the button will be

<button onclick="urlCart()">Order Now</button>

What is a full url example containing `home_ns`? – Mr. Polywhirl Dec 02 '19 at 17:07 — Mr. Polywhirl, Dec 02 '19 at 17:07
@Mr.Polywhirl https://mywebsite.com/home_ns – Gabriel Dube Dec 02 '19 at 17:08 — Gabriel Dube, Dec 02 '19 at 17:08

score 2 · Accepted Answer · answered Dec 02 '19 at 17:08

2

Here is what you need:

var cart1 = '/?add-to-cart=2419';
    var cart2 = '/?add-to-cart=2417';
    function urlCart() {
        if(window.location.href.indexOf("home_ns") > -1) {
            window.location.href = cart1;
        } else {
            window.location.href = cart2;
        }
    }

answered Dec 02 '19 at 17:08

Andrew Gura

382
2
11

I advise against modifying the full URL, you should only be setting the appropriate query param key-value pair. This only works for web servers that have a default HTML/PHP file e.g. `index.html`... – Mr. Polywhirl Dec 02 '19 at 17:23
@Mr.Polywhirl yes, I realize that. I posted the simplest solution for this particular question without overcomplicating things – Andrew Gura Dec 03 '19 at 07:24

Mr. Polywhirl · Answer 2 · 2019-12-02T19:27:17.717

You could create a look-up map of pages to cart ID. You can then update the search parameter in the URL to reflect the found ID.

Note: Since the Stack snippet below is not going to actually have the correct href, the code will not add/update the parameter. If you want to integrate this, replace the url variable declaration with this:

let url = window.location.href;

You could also use the pathname instead of the href for finer granularity.

let url = window.location.pathname;

// See: https://stackoverflow.com/a/56593312/1762224
const setSearchParam = function(key, value) {
  if (!window.history.pushState) return;
  if (!key) return;
  let url = new URL(window.location.href);
  let params = new window.URLSearchParams(window.location.search);
  if (value === undefined || value === null) params.delete(key);
  else params.set(key, value);
  url.search = params;
  url = url.toString();
  window.history.replaceState({ url: url }, null, url);
}

const pageMap = {
  "home_ns": 2419,
  "home_nd": 2417
};

function urlCart() {
  let url = 'https://mywebsite.com/home_ns' || window.location.href;
  Object.keys(pageMap).some(page => {
    if (url.includes(page)) {
      console.log('Found page:', page);
      setSearchParam('add-to-cart', pageMap[page]);
      return true;
    } else {
      return false;
    }
  });
}

<button onclick="urlCart()">Order Now</button>

This is great! Thank you so much – Gabriel Dube Dec 02 '19 at 19:15 — Gabriel Dube, Dec 02 '19 at 19:15

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

Simply you can move the user to another page by:

location.href = myURL;

The browser will automatically go to the specified page.

Examples of what a URL can be:

An absolute URL - points to another web site (like location.href="http://www.example.com/default.htm")

A relative URL - points to a file within a web site (like location.href="default.htm")

An anchor URL - points to an anchor within a page (like location.href="#top")

A new protocol - specifies a different protocol (like location.href="ftp://someftpserver.com", location.href="mailto:someone@example.com" or location.href="file://host/path/example.txt")

Source

How to switch url with javascript button

3 Answers3