Skip to main content
All CollectionsAdvanced HelpStore Settings
Product Configurator(s) - custom javascript
Product Configurator(s) - custom javascript

Running custom Javascript on the product configurator pages.

Niall Diamond avatar
Written by Niall Diamond
Updated over a week ago

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!! πŸš€

Did this answer your question?