AOV Progress Bar Javascript API

You can use Javascript API to alter behavior for AOV Progress Bar. This is required if you are embedding AOV Progress Bar on non-supported ecommerce platforms and need to dynamically configure cart amount.

Initialize OnVoard object

Specify the following snippet once before you add any javascript API code so that OnVoard object is initialized.

<script>
(function() {
  window.OnVoard = window.OnVoard || function() {
  (window.OnVoard.q = window.OnVoard.q || []).push(arguments);
  };
})();
</script>

Set Cart Amount
Use this to set cart amount. 

OnVoard('aov_progress_bar', 'setCartAmount', 50);

On Cart Updated Event
Execute a callback function when cart updates. You can use this callback to modify outputted text for widget. For example, if you need to translate language for outputted text, use this callback.

const yourCallback = () => {
 console.log("Widget is ready");
};

OnVoard('aov_progress_bar', 'onCartUpdated', yourCallback);

On Ready Event
Execute a callback function when widget is loaded and ready.

const yourCallback = () => {
 console.log("Widget is ready");
};

OnVoard('aov_progress_bar', 'onReady', yourCallback);

Reload Widget
This will reload the widget. Handy if scripts are inserted dynamically and you need to display widget after scripts are added.

OnVoard('aov_progress_bar', 'reload');

Format Amount Display
Pass a function to format amount display instead of using our default's amount display formatter.

const yourFormatAmountDisplay = (amt) => {
 return amt.toLocaleString();
};

OnVoard('aov_progress_bar', 'formatAmountDisplay', yourFormatAmountDisplay);