The Banana Stand javascript API allows you to customize the behavior of Banana Stand in the frontend. Make sure that you’ve included thebananastand.js file on pages that you want to use the javascript API on.

Why we push methods to an array

In order to not be dependent on the timing of when the bananastand.js file is loaded,rather than running methods directly on the banana stand JS file, we push the method name with it’s data parameters to a global array variable. This global variable is assigned to the window as __bsio

When the Banana Stand.App class initializes it goes through the stack of methods pushed into the global window.__bsio and runs the methods. Afterwards, it replaces the __bsio.pushmethod by assigning __bsio to Banana Stand.App.

Javascript API Methods Available

To run one of these API methods simply push it to the __bsio stack like this:

__bsio = __bsio || []; // Run this in-case Banana Stand JS has not yet loaded.
__bsio.push({ action: 'pushEvent', data: { event_type: 'add_to_cart' }}); // Push your API method on the stack to get called ASAP.

Set Current Customer

This method lets you set the ID of the currently logged in or identified customer in your system.

This customer ID you are setting is the ID of the customer in your system.Unless your primary means of looking up a customer is their email address, it’s not recommended to use their email address as their identifier (although it is allowed).

Example

__bsio = __bsio || [];
__bsio.push({ action: 'setCustomerId', customer_id: '123-im-a-customer-id'});

Note: If no customer ID is set then the system will just treat the current person like a visitor
and assign the visitor a UUID that will follow them via their cookies.

Set Current Product

To tell Banana Stand what current product is being watched or acted upon you can use the setProductId method.

Example of Settings Current Product

__bsio = __bsio || [];
__bsio.push({ action: 'setProductId', product_id: '123-im-a-product-id'});

The product_id value can be really anything you want but if you’re using a standard eCommerce system it should be
the ID of your product not the sku.

Start Viewing a Product Page

To tell Banana Stand that the current customer is looking at the current product, run this code:

__bsio = __bsio || [];
__bsio.push({ action: "startProductPageViewing" });

Pushing an Event

Pushing an event is the most common use case of the Banana Stand javascript API. Pushing events is asynchronous and extremely fast –
typically under 80ms.

Pushing an event takes the following parameters as the data object:

Parameter Required? Data Type Description
event_code yes string What type of event are you pushing? See here for a reference of all the different types of event codes you can pass.
customer_id optional string What is the ID of the customer on your system? If not specified Banana Stand will just use the customer ID specified by the setCustomerIdmethod above.If no customer is specified then Banana Stand will use a cookie-stored visitor ID that it generated upon first request.
product_id optional string What is the ID of the product on your system? If not specified Banana Stand will just use the product ID specified by the setProductId method above.
async optional boolean Should he event be processed by the server immediately? If so requests can take longer but you can use the callback to do things after the event is pushed.(default: false)

In the following 3 examples since we aren’t specifying a customer ID or a product ID it uses the info that was previously set by the setCustomerId and setProductId methods described above. This is the most common case.

Example #1: Simple Product View Event Push

__bsio = __bsio || [];
__bsio.push({ action: 'pushEvent', data: { event_type: 'view'} });

Example #2: Simple Product Order Event Push

__bsio = __bsio || [];
__bsio.push({ action: 'pushEvent', data: { event_type: 'order'} });

Example #3: Simple Product Add to Cart Event Push

__bsio = __bsio || [];
__bsio.push({ action: 'pushEvent', data: { event_type: 'add_to_cart'} });

Example #4: More Specific Add To Cart Event Push

Let’s say you didn’t want Banana Stand to use the customer ID it stored in the browser and you you have multiple products that
are on the page, so you want to push an “Add to Cart” event for a particular product on click. Here’s how you would do it:

__bsio = __bsio || [];
__bsio.push({ action: 'pushEvent', data: {
  event_type: 'add_to_cart',
  product_id: '213-id-of-product-added-to-cart'
} });