We will use query parameters.

How does that look like?


Wait. How did we even get that url?
Thats simple, when u click on a link or button

const cakeName="Red Velvet Heart Cake";
// triggering with js
window.open("https://myawesomecakes.com/buy?cakename="+cakeName, "_blank")
// triggering url in html
<a href="https://myawesomecakes.com/buy?cakename=Red Velvet Heart Cake" 

We have used cakename to pass that value.

How to read the queryname(cakename) in the other page?

If you log to the console window.location.search in the buy page. you will get ?cakename=Red%20Velvet%20Heart%20Cake . So now we can parse this and get back our cakename.

We can use the URLSearchParams api to get that.

var urlParams = new URLSearchParams(window.location.search);
// ?cakename=Red%20Velvet%20Heart%20Cake
const cakename = urlParams.get('cakename')
// Red Velvet Heart Cake

So now you can use this to update the description in the page or the order name.

You can use any alternative for URLSearchParams since IE browser support is you know...

// alternative to URLSearchParams
function getUrlParameter(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));

The above code is from David Walsh blog .

Hope this helped you.