First thing to mentione is that I don't have access to the source codes of the website, I am just coding a A/B test which should be applied with JavaScript.
The thing is functioning properly, the main point is that it should just re-arrange and change some CSS on catalog page.
The problem is, when I enter the second page, the thing stops to function, on mobile we have on-site refresh, so basically the URL is static and the content is refresh and because of that my JS isnt loaded onto the second page.
Here is the code, this all works okay it does what I wanted it to do.
let swag = `
<style>
.... some code here ....
</style>
`;
jQuery(document).ready(function loader() {
jQuery('#catalog-listing').append(swag);
jQuery('li.item.col-sm-4.col-xs-6 ').each(function () {
jQuery(this).find('a.wrapper > h2').insertBefore(jQuery(this).find('a.wrapper > div.data'));
});
jQuery('li.item.col-sm-4.col-xs-6 ').each(function () {
jQuery(this).find(' div > span.rrp').insertAfter(jQuery(this).find('div > span.price'));
});
});
Now based on some other replies here I tried various things like;
let html = `
<script type="text/javascript">
<body onload='loader();'>
</script>
`;
jQuery('body').append(html);
OR
if(window.attachEvent) {
window.attachEvent('onload', loader);
} else {
if(window.onload) {
var curronload = window.onload;
var newonload = function(evt) {
curronload(evt);
loader(evt);
};
window.onload = newonload;
} else {
window.onload = loader;
}
}
The thing is, everything has to be 'appended' with JavaScript, so even if I want to insert script into HTML body or head I have to do it directly here.
Could you please help me? Thanks.