product-customizer-show-options-cost
Fires when a product customizer option with a cost attached is changed. Useful for displaying customization total or recalculating the product price.
Origin element (target)
'.product-customizer-options'
Handler arguments
optionsCost The summed cost of all product customizer options selected by user.
Usage examples
Change the main product's price when an option with cost changes. Example code would be added within theme.liquid or product template.
/* Single-variant products have their main price html element updated directly.
Products with multiple variants call shopifyOptionSelectors.updateSelectors, assuming that the
selectCallback has been monkey-patched to take the options cost into account.
*/
$('.product-customizer-options[data-product-id="##{{ product.id }}"]').on(
'product-customizer-show-options-cost',
function(event, optionsCost) {
if (typeof(shopifyOptionSelectors) !== 'undefined') {
shopifyOptionSelectors.updateSelectors(0, {});
} else {
theme.cache.$productPrice.html(
shopstorm.apps.productCustomizer.formatMoney(
##{{ product.price }} + optionsCost,
shopstorm.shop.moneyFormat
)
);
}
}
);