E-Commerce API
  • 25 Feb 2022
  • 1 Minute to read
  • Contributors
  • Dark
    Light
  • PDF

E-Commerce API

  • Dark
    Light
  • PDF

Overview

A variable eCommerceAPI is available to use during the e-commerce flow. As part of this API, there is a listener that can register (stepChanged) to monitor for changes in steps during the process flow. When a step changes, this listener is called, and is passed 2 variables: the step number the user is coming from and the step number they are going to. Step numbers are 0-index based. For example:

Step Changed Listener

<script>

     eCommerceAPI.stepChanged(  function(fromStep, toStep) { 
          console.log("Changed from step " + fromStep + " to " + toStep);
     }

</script>

Invoice Preview Listeners

There are two new listeners that can be used when calls are made to the InvoicePreview for tax calculation purposes:

  • previewStarted (no parameters)
  • previewEnded (1 boolean parameter - whether a blocking result was returned)

The following example disables the "Next" button while waiting on the InvoicePreview. It is re-enabled unless there was a blocking error in the call:

   ecommerceAPI.previewStarted(  function() { 
            $(".btn-next").attr("disabled",true);
        });
        
        ecommerceAPI.previewEnded(  function(hasBlocker) { 
            if (!hasBlocker) $(".btn-next").attr("disabled",false);
        });

API Set

Below is the full API set of exposed methods that will retrieve various information about the steps and products: .

Methods

getSteps()
getCategories()
getCategoriesByStepNumber(stepNumber) //stepNumber is 0-index based
getSelectedCategories()
getProducts()
getSelectedProducts()
getCartItems()
getCartSubTotal()
getCartTax()
getCartTotal()

Method Calls

Examples of method calls can be found below.

Ecom variables 1.png

Ecom varriables 2.png

Ecom variables 3.png

Ecom variables 4.png

Installing Code

To apply the same analytics code to all e-Commerce pages, it can be pasted in Layouts > Ecommerce > Body Tag Close for the Theme that is being used. There is a sample screenshot below.

analytics.png

To use differing analytics code on a per-page basis, it can be pasted in Templates > All Templates > E-commerce Templates > Edit (on the template of your choosing) > Body Tag Close instead.


Was this article helpful?