I'm using a plugin in ajax that filter some products of my site. The url changes without reload the page.
I need indentify the url, split the words and add those class to body.
E.G: I filter some products, then my url changes to https://website.com/size=big/color=yellow,green,dark-red So, this classes would be added to body: size big color yellow green dark-red
I have this code but I don't know how to make it work.
$(window).on('hashchange', function(e){
$('body').
});
Thanks.
UPDATE: Based on the comment thread in my answer it seems that you're really trying to convert the querystring values to css class names.
You can use the window.location.search
to access all the querystring parameters.
function updateBodyClasses() {
var classNames = [];
// Use `.split()` to separate each key/value pair in the query by `&`
window.location.search.split('&')
// and loop over the results
.forEach(function(c) {
// Now split each pair by '='
var pair = c.split['='];
// Add the value to the left of the '='
if (pair.length > 0) {
classNames.push(pair[0]);
// if there are values on the right of the '='...
if (pair.length > 1) {
// ... split them by ',' and loop through them
pair[1].split(',').forEach(function(t) {
classNames.push(t);
});
}
}
});
// Now append those classNames to the body
$('body').addClass(classNames.join(' '));
}
// If your ajax plugin modifies the url via HTML5 history api...
$(window).on('popstate', updateBodyClasses);
// Update classes on page load
$(window).on('load', updateBodyClasses);
// If the ajax plugin modifies the url using window.location.replace()
// you'll need to check on an interval whether things have changed
// and update accordingly. the following example does this every 1000 milliseconds (or every second)
setInterval(updateBodyClasses, 1000);