How to access order data on Big Commerce on confirmation screen

Question

I need to add some JavaScript to the order confirmation page that includes details about the order. Although I can access the order id through a BigCommerce global variable, I cannot work out how to get the rest of the order details into my JavaScript.

For instance, I can access the BigCommerce order_id global %%GLOBAL_OrderId%% and use that in a JavaScript alert, but I also need to access the following:

1. order total
2. order tax
3. order shipping
4. order postcode

And foreach product in the order

1. product_id
2. unit_price
3. quantity

There these global items but when I try to access them they are blank, I presume that I need to loop through the cart contents.

1. %%GLOBAL_ProductModel%%
2. %%GLOBAL_ProductPrice%%
3. %%GLOBAL_ProductQty%%

I have read all the docs I can find. Can anyone give me an idea of how to achieve this. I need the values so I can pass them to a third party JS function for their use. All of that is waiting and ready but I cannot get the data out of Big Commerce templating system. The data is there, on the order.html template page, as the social sharing panel reads it, but again I cannot see how the social sharing snippet is accessing it.

Answer 1

I created a hacky script just for you that pulls the product data (as well as some order details).

It parses the data from the %%GLOBAL_ConversionCode%% template variable, and as such this script should be inserted in order.html immediately after the %%GLOBAL_ConversionCode%% variable.

Specifically, %%GLOBAL_ConversionCode%% outputs to:

<!-- Include the conversion tracking code for all analytics packages -->
<!-- Start conversion code for analytics_googleanalytics -->
<script type="text/javascript">
  if(typeof(pageTracker) != 'undefined') {
    pageTracker._addTrans(
      '196',
      'store-name',
      '0.00',
      '2.12',
      '1.92',
      'Austin',
      'Texas',
      'United States'
    );

    pageTracker._addItem(
      '196',
      '2004',
      'TAKE YOUR TIME: Sweet Body Butter',
      '',
      '24.96',
      '1'
    );

    pageTracker._trackTrans();
  }
</script>

---

Solution:

<script>
    //-------------- Main --------------//

    //** Create the order data array from analytics script **//
    var data = parseAnalyticsData(getAnalyticsScript());
    //console.log(data);

    /**
     * Retrieve the order details as an object, properties are:
     * id          - The order ID.
     * shipping    - The order shipping cost. 
     * tax         - The order tax cost. 
     * shippingTax - The order shipping tax cost.
     * city        - The order shipping city.
     * state       - The order shipping state. 
     * country     - The order shipping country.
     */
    var orderDetails = getOrderDetails(data);

    console.log("Order ID = %d", orderDetails.id);
    console.log("Order shipping city = %s", orderDetails.city);
    console.log("Order subtotal = %f", orderDetails.subtotal);

    /**
     * Retrieve the order product details, as an array of product objects. 
     * Properties are:
     * id          - The product ID. 
     * description - The product description.
     * tax         - The product tax cost.
     * price       - The product price per product. 
     * qty         - The product quantity purchased. 
     */
    var products = getOrderProducts(data);

    //** Loop through the products array to access each product **//
    console.log("Total number of products = %d", products.length);
    for (x=0; x<products.length; x++) {
      console.log("--------");
      console.log("Item # ", x+1);
      console.log("Product ID = %f", products[x].id);
      console.log("Product QTY = %f", products[x].qty);
      console.log("Product Price = %f", products[x].price);
      console.log("--------");
    }



    //-------------- Functions --------------//

    /**
     * Parses the DOM to retrieve the order data analytics script.
     */
    function getAnalyticsScript() {
      var scripts = document.getElementsByTagName('script');
      var thisScriptTag = scripts[scripts.length - 2];
      var data = thisScriptTag.textContent || thisScriptTag.innerText;
      return data;
    }

    /**
     * Parses the raw analytics script element to remove all script
     * text, and parse just the order related data into an array.
     * @param script <String> - The raw order analytics script.
     * @return <mixed> - Array containing the order data. 
     */
    function parseAnalyticsData(data) {
      String.prototype.replaceAll = function(search, replacement) {
        var target = this;
        return target.split(search).join(replacement);
      };
      // This is hacky, and probably inefficient, but it removes all
      // script related text, so the end result is just a comma separated
      // array of the order and product data. 
      data = data.replace("if(typeof(pageTracker) != 'undefined') {", '');
      data = data.replaceAll( 'pageTracker._addTrans(', '');
      data = data.replaceAll( ' pageTracker._trackTrans();', '');
      data = data.replaceAll( 'pageTracker._addItem(', '');
      data = data.replaceAll(');', '');
      data = data.replace('}', '');
      data = data.replace( /\n/g, ",").replaceAll( ",,",",");
      data = data.replace(/\s/g,'');
      data = data.split(',');
      data = cleanArray(data); // Remove all empty values from array. 
      return data;
    }

    /**
     * Removes all empty data from array.
     * @param array <mixed> - The array to clean. 
     */
    function cleanArray(array) {
      var newArray = new Array();
      for (var i = 0; i < array.length; i++) {
        if (array[i]) {
          newArray.push(array[i]);
        }
      }
      return newArray;
    }

    /**
     * Parse Analytics Data for Order Details
     * @param data <mixed> - The order analytics data.
     * @return <mixed>     - Object containing the order details. 
     */
    function getOrderDetails(data) {
      String.prototype.replaceAll = function(search, replacement) {
        var target = this;
        return target.split(search).join(replacement);
      };
      return {
        id          : parseFloat(data[0].replaceAll("'",'')),
        subtotal    : ( parseFloat(data[2].replaceAll("'",'')) - (parseFloat(data[3].replaceAll("'",'')) + parseFloat(data[4].replaceAll("'",'')) ) ),
        total       : parseFloat(data[2].replaceAll("'",'')),
        tax         : parseFloat(data[3].replaceAll("'",'')),
        shipping    : parseFloat(data[4].replaceAll("'",'')),
        city        : data[5].replaceAll("'",''),
        state       : data[6].replaceAll("'",''),
        country     : data[7].replaceAll("'",'')
      }
    }

    /**
     * Parse Analytics Data for All Order Product Details.
     * @param data <mixed> - The order analytics data.
     * @return <mixed>     - Array containing individual product details.
     */
    function getOrderProducts(data) {
      String.prototype.replaceAll = function(search, replacement) {
        var target = this;
        return target.split(search).join(replacement);
      };
      var counter = -1;        // Keep index of details per product.
      var productsArray = []; // Init empty array to hold all products. 
      var product = {};       // Init empty object to hold single product data. 
      //** Product data starts at index 8 **//
      for (x=8; x<data.length; x++) {
        counter++;
        switch (counter) {
          case 1:
            product.id = parseFloat(data[x].replaceAll("'",''));
            break;
          case 2:
            product.description = data[x].replaceAll("'",'');
            break;
          case 3:
            product.tax = parseFloat(data[x].replaceAll("'",''));
            break;
          case 4:
            product.price = parseFloat(data[x].replaceAll("'",''));
            break;
          case 5:
            product.qty = parseFloat(data[x].replaceAll("'",''));
            counter = -1;                 // reset counter
            productsArray.push(product); // push product to products array
            product = {};
            break;
        }
      }
      return productsArray;
    }

 </script>