If you wish to customize the Booqable online checkout, read the following article below to gain a thorough understanding of the Booqable checkout scripts framework.
How it works
1. Methods
Booqable.loadScript(url: string)
Loads an external script from an URL. Also makes sure the script is only loaded once.
Booqable.jQuery(callback: function)
Loads jQuery 3.3.1 from the official CDN. Whenever you want to use jQuery, wrap your code inside the callback of this method. Inside, you can use $ normally.
Booqable.setupGoogleAnalytics(trackingId: string, defaultPageTracking = true, defaultEvents = false)
This sets up Google Analytics with the given tracking ID.
Afterward, you can use gtag() . With the default page tracking, we set triggers for the information, payment & completed steps. With the default events, we set up triggers for information, completed, payment & page-change.
Booqable.setupFacebook(fbId: string, defaultEvents = true)
Sets up Facebook Ads with the given Facebook ad ID. This is also called Facebook Pixel. With the default events, we set up tracking for the InitiateCheckout, AddPaymentInfo & Purchase events.
Booqable.setupIntercm(appId: string)
Sets up the Intercom widget in your checkout & hosted shop.
Booqable.on(event: string, callback: function, context?: object)
Executes the callback when the event is triggered. You can find the events below.
2. Private methods
Booqable._once(func: function)
Executes the given function exactly once, even when the code is executed multiple times.
Booqable._defer(condition: function, method: function, attempt?: integer)
Waits with executing the method parameter until the condition parameter returns true. attempt is a private parameter to keep track of the waiting time. The method keeps trying for 10 seconds in intervals of 50 milliseconds. If the condition is still false after that, it stops without executing the method parameter.
3. Events
page-change Is triggered when the page changes or is first loaded.
information Is triggered when the information step of the checkout is shown.
payment Is triggered when the payment step of the checkout is shown.
completed Is triggered when the success message is shown. The user has completed the checkout. Here is an example:
Booqable.on('completed', function () {
// your code here
});
Simple tracking on (‘completed’):
Booqable.cartData.orderId
Available keys:
cartId, orderId, deposit, couponDiscount, toBePaid, totalDueLater, grandtotal, grandTotalWithTax, tax, coupon, items, currency
4. Properties
Booqable.location: string The relative URL of the page that the store is currently on.
Booqable.origin: string The origin defined in the URL of the checkout. Can be used for tracking, or to modify the branding of the checkout.
You're all set!
If you need assistance with checkout scripts please contact our Support team at [email protected]