Overview
This guide is designed to help you integrate your X instance autonomously once it has been fully instrumented.
...
| Code Block |
|---|
|
<script async defer src="https://assets.empathybroker.com/empathyx/{INSTANCE}/app.js"></script> |
The async and The defer attributes attribute help to keep it blazing fast by loading the resource asynchronously and without blocking the page load. Once the script is ready, X will automatically call the global initEmpathyX function (see the Initializing X section).
...
| Code Block |
|---|
| language | js |
|---|
| theme | Eclipse |
|---|
| title | Add2Cart example |
|---|
|
// HTML approach
<button class="add2Cart" onclick="EmpathyX.addToCartOnProductPageClicked()"/>
// JS addEventListener approach
<script>
document.querySelector('{ADD_TO_CART_SELECTOR}').addEventListener('click', function() {
EmpathyX.addToCartOnProductPageClicked();
});
</script> |
| Info |
|---|
|
 Notice that add2cart event has to be fired as many times as product is added to cart and related with the quantity of products added to cart. (i.e if quantity == 2, the event has to be fired twice)
|
| Anchor |
|---|
| integrating-checkout |
|---|
| integrating-checkout |
|---|
|
Integrating checkout
| Code Block |
|---|
| language | js |
|---|
| theme | Eclipse |
|---|
| title | Checkout example |
|---|
|
<script>
document.querySelector('<checkout>').addEventListener('click', function() {
// Get the product ids from your basket/checkout in any manner (your custom implementation)
var productsIds = getCheckoutProductsIds();
EmpathyX.checkout(productsIds);
});
</script> |
| Info |
|---|
|
Notice that product's quantity has to be considered when creating the productsIds array (i.e if quantity == 2, the productId has to be added twice to the productsIds array) |
| Anchor |
|---|
| polyfills-and-browser-support |
|---|
| polyfills-and-browser-support |
|---|
|
Polyfills and browser support
...
- The main scrollable element is
html instead of body: X is mounted in the body element and uses a special class called ebx-empathy-x--opened to disable its scroll while opened. This will not work if the scrollable element is html. - The default scroll behavior is overriden with JavaScript and interfering with X.