Using the plugin on a SPA reloads the page when going to a single product page

Most of SPA libraries (if not all) use the History API to modify the URL on the browser. I thought to find an event in which is triggered every time the URL is changed by using history.pushState function. A similar property is WindowEventHandlers.onpopstate, but this event is not triggered when using pushState, but only functions like history.back(), history.go(2). Anyway, I managed to find a function modified to also work with pushState:

(function(history){
	var pushState = history.pushState;
	history.pushState = function(state) {
			if (typeof history.onpushstate == "function") {
					history.onpushstate({state: state});
			}
			
			return pushState.apply(history, arguments);
	};
})(window.history);

Now if we add this below:

window.onpopstate = history.onpushstate = function() { … }

an event is triggered every time the URL is changed using pushState function.

I added a new variable “var is_spa_site = false;” and if this event is triggered, I change the variable to true. This is triggered before your click event so when the code goes to your callBack, I make a check of is_spa_site variable, if it’s true, there’s no need to go into your callBack code.

All the code can be found here: https://gist.github.com/erip2/5ebbfd0ae0f9cafd08af09fee2b46635

P.S. I tried to add a <em>window.onpopstate = null</em> after the callback function in order not to trigger this event anymore since we know that this is a SPA with only one use of pushState, but I noticed that the JS file was being initialized again even on the new page, so it didn’t make any difference.