javascripthtmlurladdress-bar

How does this web page change URL query parameter in the address bar?

The initial URL is

https://robertbarakett.com/products/the-barakett-t-hoodie?option1=Blue+night&option2=S

I traced the HTTP requests. It only does 1 redirect: from

https://robertbarakett.com/products/the-barakett-t-hoodie?option1=Blue+night&option2=S

to

https://robertbarakett.com/products/the-barakett-hoodie-black?option1=Blue%20night&option2=S.

However, the final URL in the address bar is

https://robertbarakett.com/products/the-barakett-hoodie-black?variant=31966791729263.

I read about changing URL without reloading page:

  1. How do I modify the URL without reloading the page?
  2. Appending parameter to URL without refresh

Since there is no navigation history after loading the web page, it rules out window.history.pushState. Maybe it uses window.history.replaceState? I did a search in the page's source code, didn't find any use of replaceState. So how to verify whether it uses replaceState or other techniques?

Solution

  • Is using window.history.replaceState

    In: https://cdn.shopify.com/s/files/1/0061/4134/5903/t/13/assets/theme.js?v=13437044988013674143

    Its has:

    _updateHistoryState: function(variant) {
   if (!history.replaceState || !variant) {
     return;
   }
  
   var newurl = window.location.protocol + '//' + window.location.host + window.location.pathname + '?variant=' + variant.id;
   window.history.replaceState({path: newurl}, '', newurl);
},

    Is the only place in the source which assigns ?variant

    Found by downloading site (right-click save-as), then doing a search for ?variant