What exactly is the Event Manager for?
The Event Manager is for developing script based Checkout customizations on top of the Ebizio Checkout. We provide a series of data rich events to be utilized while developing out your desired functionality. This allows for advanced functionality to be developed without needing to customize the Checkout code itself.
Do I have to use the Ebizio Checkout?
Yes. The events are provided by the Ebizio Checkout so to utilize them your store must use the Ebizio Checkout.
Can the Events Manager be used with other Ebizio Checkout modules?
Yes. You will be able to use the Events Manager in addition to any other Ebizio Checkout module.
Why do I need the Events Manager?
When customizing the BigCommerce checkout you essentially have two approaches, you can write an entirely custom checkout or you can write a script based solution that lives outside of, but interacts with, the checkout. While both approaches have their own pros and cons, our Events Manager effectively resolves the challenges faced when taking the script based approach.
What events currently exist?
- CHECKOUT_LOADED
- CUSTOMER_SIGNED_IN
- CUSTOMER_SIGNED_OUT
- CUSTOMER_STEP_LOADING
- SHIPPING_STEP_LOADING
- BILLING_STEP_LOADING
- PAYMENT_STEP_LOADING
- SHIPPING_METHOD_SELECTED
- SAVED_SHIPPING_ADDRESS_CHANGED
- USE_NEW_SHIPPING_ADDRESS_SELECTED
- STORE_CREDIT_TOGGLED
- PAYMENT_METHOD_LOADED
- PAYMENT_METHOD_SELECTED
- COUPONS_CHANGED
- GIFT_CERTIFICATES_CHANGED
- CART_SUMMARY_MODAL_OPENED
What does an example script look like?
Please see the below mentioned JavaScript example script. You will want to have your developers load something similar in your Theme's footer, if the scripts load prior to the Checkout itself the events will not be properly listened to.
/**************************************************
* Constants (these should not be changed by developers)
**************************************************/
var EBIZIO_EVENTS = {
CHECKOUT_LOADED: 'CHECKOUT_LOADED',
CUSTOMER_SIGNED_IN: 'CUSTOMER_SIGNED_IN',
CUSTOMER_SIGNED_OUT: 'CUSTOMER_SIGNED_OUT',
CUSTOMER_STEP_LOADING: 'CUSTOMER_STEP_LOADING',
SHIPPING_STEP_LOADING: 'SHIPPING_STEP_LOADING',
BILLING_STEP_LOADING: 'BILLING_STEP_LOADING',
PAYMENT_STEP_LOADING: 'PAYMENT_STEP_LOADING',
SHIPPING_METHOD_SELECTED: 'SHIPPING_METHOD_SELECTED',
SAVED_SHIPPING_ADDRESS_CHANGED: 'SAVED_SHIPPING_ADDRESS_CHANGED',
USE_NEW_SHIPPING_ADDRESS_SELECTED: 'USE_NEW_SHIPPING_ADDRESS_SELECTED',
STORE_CREDIT_TOGGLED: 'STORE_CREDIT_TOGGLED',
PAYMENT_METHOD_LOADED: 'PAYMENT_METHOD_LOADED',
PAYMENT_METHOD_SELECTED: 'PAYMENT_METHOD_SELECTED',
COUPONS_CHANGED: 'COUPONS_CHANGED',
GIFT_CERTIFICATES_CHANGED: 'GIFT_CERTIFICATES_CHANGED',
CART_SUMMARY_MODAL_OPENED: 'CART_SUMMARY_MODAL_OPENED',
};
/**************************************************
* Logic (should be modified by developers)
**************************************************/
// configuration
var ebizioEventConfig = [
{ event: EBIZIO_EVENTS.SHIPPING_STEP_LOADING, handler: handleShippingStepLoading },
{ event: EBIZIO_EVENTS.PAYMENT_STEP_LOADING, handler: handlePaymentStepLoading },
];
// set up listeners for our configuration
var ebizioCheckout = document.getElementById('checkout-app');
ebizioEventConfig.forEach(function (config) {
ebizioCheckout.addEventListener(config.event, config.handler);
});
// do the work
function handleShippingStepLoading(event) {
console.log('-- Handle Shipping Step Loading --');
console.log('event ', event.detail);
}
function handlePaymentStepLoading(event) {
console.log('-- Handle Payment Step Loading --');
console.log('event ', event.detail);
}