How to access order data on Big Commerce on confirmation screen - bigcommerce

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:
order total
order tax
order shipping
order postcode
And foreach product in the order
product_id
unit_price
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.
%%GLOBAL_ProductModel%%
%%GLOBAL_ProductPrice%%
%%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>