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
– Mr. Polywhirl

2019-12-02 17:07:32 +00:00
Commented Dec 2, 2019 at 17:07 — Mr. Polywhirl
– Mr. Polywhirl, Commented Dec 2, 2019 at 17:07
@Mr.Polywhirl mywebsite.com/home_ns

Gabriel Dube
– Gabriel Dube

2019-12-02 17:08:20 +00:00
Commented Dec 2, 2019 at 17:08 — Gabriel Dube
– Gabriel Dube, Commented Dec 2, 2019 at 17:08

Andrew Gura · Accepted Answer · 2019-12-02 17:08:18Z

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 2, 2019 at 17:08

Andrew Gura

3823 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mr. Polywhirl Over a year ago

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...

Andrew Gura Over a year ago

@Mr.Polywhirl yes, I realize that. I posted the simplest solution for this particular question without overcomplicating things

Mr. Polywhirl · Accepted Answer · 2019-12-02 19:27:17Z

1

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>

edited Dec 2, 2019 at 19:27

answered Dec 2, 2019 at 17:20

Mr. Polywhirl

49.1k12 gold badges96 silver badges147 bronze badges

1 Comment

Gabriel Dube Over a year ago

This is great! Thank you so much

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

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:[email protected]" or location.href="file://host/path/example.txt")

Source

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 2, 2019 at 17:07

Saud Aljaffer

1488 bronze badges

Collectives™ on Stack Overflow

How to switch url with javascript button

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related