Javascript Events API

In order to fully integrate with all third party applications, EasyAccounts offers a Javascript Software Development Kit containing methods to allow you to invoke any custom code of your choice.

Events API

The Events API allows you to listen for actions that occur on your online store that are related to EasyAccounts, and run your own custom javascript every time an event is triggered. The

Wishlist Item Added To Cart

Each time a wishlist item is added to the cart from the account page, the ea-wishlist-item-added event gets triggered.

document.addEventListener("ea-wishlist-item-added", function() {
 
      // Your code here
 
});

Wishlist Updated

Whenever an item is added or removed from the wishlist, the ea-wishlist-updated event is triggered

document.addEventListener("ea-wishlist-updated", function() {
 
      // Your code here
 
});

Account Page Loaded

The ea-account-page-loaded event is triggered whenever a customer account page is fully loaded. EASDK.page functions can be used at this point.

document.addEventListener("ea-account-page-loaded", function() {
 
var page = EASDK.page.get();
console.log("EASDK", page);
// Your code here
 
});

Order List Loaded

The ea-order-list-loaded event is triggered whenever the order list is loaded. EASDK.order.list() can be called at this point to get the current page of orders.

document.addEventListener("ea-order-list-loaded", function() {
 
var orderList = EASDK.order.list();
console.log("EASDK", orderList);
// Your code here
 
});

Order Loaded

The ea-order-loaded event is triggered whenever an order page is loaded. EASDK.order.current() can be called this point to get the order json object.

document.addEventListener("ea-order-loaded", function() {
 
var order = EASDK.order.current();
console.log("EASDK", order);
// Your code here
 
});

Initial Load Before Render

The ea-before-page-render event is triggered the first time the account page loads in a session. EASDK.customer.get(), EASDK.shop.settings(), and EASDK.shop.customPages() can be called this point. This can be useful in order to add show or hide various options before the page fully renders.

document.addEventListener("ea-before-page-render", function() {
 
var customer     = EASDK.customer.get();
var settings    = EASDK.shop.settings();
var customPages = EASDK.shop.customPages();

console.log("EASDK", customer);
console.log("EASDK", settings);
console.log("EASDK", customPages);
// Your code here
 
});

Data API

When EasyAccounts is loaded, a global EASDK object is made available for your use in retreiving data about the current page. This data is only available after a certain event is triggered however, so please review the Events API for examples of when this data becomes available.

The following functions are currently available for your use.

// Get information about the current account page.
EASDK.page.get();

// Get information about the current order. 
EASDK.order.current();

// Get information about the current page of orders
EASDK.order.list();

// Get information about the current logged in customer
EASDK.customer.get();

// Get the current easy accounts settings object
EASDK.shop.settings();

// Get your configured custom pages
EASDK.shop.customPages();

Examples

Add Banner to the Order Page When the Order Contains a Product Type of “Chocolate”

document.addEventListener("ea-order-loaded", function() {
 
      const page = EASDK.page.get();
      
      const pageWrapper = document.getElementsByClassName('Polaris-Page__Content');

      const order = EASDK.order.current();

      const hasChocolate = order.line_items.filter(item => item.product.product_type === "Chocolate").length > 0;

      const bannerHtml = '<div class="Polaris-Banner Polaris-Banner--statusCritical Polaris-Banner--withinPage Polaris-Banner--newDesignLanguage"><div class="Polaris-Banner__ContentWrapper"><div class="Polaris-Banner__Heading"><p class="Polaris-Heading">Warning!</p></div><div class="Polaris-Banner__Content">Please ensure you are available for delivery, so your chocolate does not melt in the sun!</div></div></div><br/>';

      const embedElement = document.createElement("div");

      embedElement.innerHTML = bannerHtml;
      
      if (hasChocolate !== true) return;

      pageWrapper[0].insertBefore(embedElement, pageWrapper[0].childNodes[0]);


});