What function is called on attribute change in product page and how to control it?

[JustJohn]

Trying to create a new field on product page containing product's reference code that's different for every size in our store. Changing that size on the product page does change the reference code in one place, in "about this product" tab which is stock functionality, but I can't understand what part of code I need to modify or add to create another field with exactly the same contents but elsewhere on the page, say, below the price. Supposedly some javascript is triggered on size/feature change but I have no clue where to look to configure it.

I am of course able to output the product's reference in a template, but that will only show the first reference code that's not changing upon selecting a different attribute value (size) for the product.

Edited March 1, 2023 by JustJohn (see edit history)

[JBW]

You can listen to 'updatedProduct' event

prestashop.on('updatedProduct', function() {
    alert("Changed");
});

 

[JustJohn]

And then how do I pull the new reference code using js? Is it stored in a variable somewhere?

[JBW]

If it's somewhere else on the page you can get it from there using it's ID or class. The ud uatedproduct event also passes the new HTML code as argument so you could parse it from there if its part of it

[JustJohn]

Yeah, that's one way but it's a bit hacky. I see that those updates trigger a single POST request to /cart, presumably asking for product data, but I thought that to modify DOM the js that triggers the update has to store that data in some variable(s) which would make pulling that data quite trivial and clean. But I couldn't find those variables. So unless Prestashop's js writes directly from POST result data to DOM...

[JBW]

1 hour ago, JustJohn said:

But I couldn't find those variables.

As said it's provided as a return value in updated product but as several HTML parts which you would have to parse again. Presta just replaces these blocks when it get the result of the POST so you could take it either from there

[JustJohn]

If you could also explain to me how to get the return value (containing that raw HTML supposedly) from updatedProduct, that'd be great.

Like console.log(returnval). Not sure what I should call instead of alert in your example.

Edited March 2, 2023 by JustJohn (see edit history)