If you have custom Javascript that you need executed on a product page then you will want to make sure that it is called on every page correctly.
Normally, you would simply target the product page using a body class like "ex-product". Then you would execute your script.
However, when it comes to the product configurators you will want to consider that the page may make AJAX requests to change the product content. Once we get the response we will change the DOM elements with the new content potentially overwriting any changes you made with Javascript.
Putting it another way, your Javascript will run once on the page load but won't run again when the user interacts with the product selectors.
How it works
When a customer interacts with the product selectors on a configurable products page, the system does 1 of 2 things.
Either it...
Reloads the page entirely
Or it makes an AJAX request to get the content without a full page reload.
The above is a choice based on a setting in the Admin area.
If the store setting is set to use AJAX requests. For example, the toggle to reload the page is OFF. Then you will want to add any of your Javascript into the below function and then call that function on a product page.
<script>
function evoXProductChangeCallback(){
// Add content here, if it needed to be executed on the product page after a user makes selections on a configurable product.
}
</script>
Example
Let's say that I wanted to log something to the console on the product page. Silly example but it will illustrate the point.
<script>
//First declare my function
function evoXProductChangeCallback() {
console.log("Hello, you handsome fella");
}
// Now we should call it on the load of the page
if (document.body.className.indexOf("ex-product") >= 0) {
evoXProductChangeCallback();
}
</script>
See it in action
That's it, go enjoy your day!! 🚀