Check if URL has changed in javascript (cannot use hashChanged)

24
October 22, 2019, at 4:30 PM

I've looked through a lot of questions and I can't find a solution that works well within my environment. This is done within Shopify, I have a product with variants. When a variant is changed, the URL is appended with a product ID which changes the product price dynamically (no reload).

I have an extra strip detecting when this change happens so I can so some extra stuff, and currently, it does detect it but it seems like wasted power the route I took with it.

$(document).ready(function() {
    setInterval(function() {
      checkURLchange(window.location.href);
    }, 10);

It happens every 10 ms so the change seems instant to the user (let's say I appended a new picture to the page or something on variant change).

It would be more much effective if I could just save the state of the URL and check if it has changed, but again Im unaware to approach this.

The typical hashChanged event for window does not work in this situation because the url change does not use hashes (Shopify), instead it looks something like this:

?variant=99390743207991

or

?variant=13390743202341

What about popstate (history change)?

Unfortunately, this does not seem to work either. As popstate or the answer suggested here.

Feel free to see the solution being tested in my chaotic staging environment: https://ti560ye2q51lxyvj-11502512.shopifypreview.com/products/the-wg-m1-grill-kit

Answer 1

Listen to window for popstate.

window.addEventListener('popstate', () => {
    /* do something */
})

You can test this by adding a console log to it and changing the hash with window.location.hash = 'somehash'.

READ ALSO
jQuery hide Show More button when text is limited

jQuery hide Show More button when text is limited

I am trying to use a Show More/Show Less button for texts to expand and contract the long texts/paragraphsThe code seems to work fine in all aspect

49
Click event fired twice on touch device

Click event fired twice on touch device

I have a checkbox in a sortable div where the click or changed event is triggered twice on touch devices but not on desktop (nor simulating touch on Firefox dev tools) for some obscure reasonThe unwanted effect is the checkbox being toggled twice in a row leaving...

28
Upload a photo on click/submit button

Upload a photo on click/submit button

how can I get jQuery to execute on click instead of just when user chooses a file? I tried onclick and submit on line 2 instead of change, to no avail:

32
How to return a message or value after checking for file with similar hash in Google Drive using ASP.NET

How to return a message or value after checking for file with similar hash in Google Drive using ASP.NET

I am trying to compare the hash of the files that are in the Google Drive but I am unsure how to do itI have a compare hash code block:

26