Please keep in mind that a knowledge of Javascript is necessary in order to use these Callbacks.
We do not support custom code, but are happy to offer our development services.
Product Options Loaded:
This function will fire once the Product Options app has completely finished the initial load.
This callback does not include Conditional logic events.
$('body').on("productOptionsLoaded", function() { console.log("Product Options Loaded"); });
<script type="text/javascript">
document.querySelector('body').addEventListener("productOptionsLoadedJS", function(e) {
console.log("Product Options Loaded");
});
</script>
Field Added Callback:
This Callback will fire each time a Product Options field is added to the page. Whether that be via page load, or Conditional Logic.
function fieldAddedCallback(field, element) {
console.log(field);
console.log(element);
}
Product Options Price Change:
This function will fire each time the customer selects an option which has an additional price or "Product" associated with it.
JavaScript Version (preferred)
<script type="text/javascript">
document.querySelector('body').addEventListener("productOptionsPriceChangeJS", function(e) {
console.log("price changed");
var price = e.detail[0];
var container = e.detail[1];
var products = e.detail[2];
//debug
console.log(price);
console.log(container);
console.log(products);
});
</script>
jQuery Version:
$('body').on("productOptionsPriceChange", function(e, price, container, products) {
//debug
console.log(price);
console.log(container);
console.log(products); });
Product added to the cart:
This function will fire each time a upcharge product is added to the cart. It will pass the product details of the product being added. (quantity, id, properties)
<script type="text/javascript">
document.querySelector('body').addEventListener("productOptionsAddToCartJS", function(e) {
var product = e.detail[0];
//debug
console.log(product);
});
</script>
Manually submit Add To Cart Callback:
When the property window.poCustomSubmit is set to true, the app will not submit the product page's add to cart form. Instead, it will call this callback method and pass the form data with it.
This is typically used with custom development to process the data before submitting the form.
<head>
<script>
window.poCustomSubmit = true;
</script>
</head>
function productOptionsSubmitCallback(data) {
console.log("form submitted");
//read form data
for (var [key, value] of data.entries()) {
console.log(key, value);
}
//form data as json
const jsonForm = Object.fromEntries(data.entries());
console.log({ jsonForm });
document.querySelector(".w3-product-options-form").submit();
}