JavaScript Events (options)

The options app fires the following javascript events. By listening to these events you can add custom functionality on your product page. All events are triggered from the options container, the event bubbles up the DOM and can be caught on the window element (shown in the example).

option:changed

Fired every time an option selection has changed. Example code to check when a specific selection was made on an option:

window.addEventListener('option:changed', function(e) {

  // e.detail contains the option reference
  var option = e.detail;

  // print the option to the console
  console.debug('option changed', option);

  // check if the option is the one we want
  if(option.name == 'NAME_HERE'){
      // check if the value is the one we want
      if(option.value == 'VALUE_HERE'){
        // do something
      }
   }

});

options:rendered

Fired every time the options are rendered. This can be used to get a reference to a specific options DOM element for adding customizations. Example code to add a custom value to an input field:

window.addEventListener('options:rendered', function(e) {

    // print the option to the console
    console.debug('options rendered', e.detail);

    var optionEl = document.querySelector('[data-option="NAME_HERE"]');

    if(optionEl){
        console.debug('got optionEl', optionEl);

        // depending on the option type we have to use different selector
        var inputEl = optionEl.querySelector('input');

        if(inputEl){
            console.debug('got option input', inputEl);

            // set custom value
            inputEl.value = 'Hello World';

            // trigger change event for the app to update and re-render
            inputEl.dispatchEvent(new Event('change'));
        }
    }

}, { once: true }); // only runs once to get the element reference

options:price

Fired every time the product price total is calculated. This can be used to display the final price in a custom format or location on the product page.

window.addEventListener('options:price', function(e){

    var priceData = e.detail;

    console.debug('options price updated', priceData);
});