Below is the actual code I'm using. I only changed formatting and added a couple details from the API. This still uses the Woocommerce REST API instead of the new Wordpress Woo API. It should still work but in the future when Woo drops support for their API, this will have to be updated to work with the new API.
Also, don't forget to update the URL, Key, and Secret towards the bottom, here is a snippet to see it:
The Key and Secret are created and retrieved by you on the Woocommerce site.
<script type="text/javascript">
var woocombundle = {
domain:'https://<your domain goes here>.com', //Edit the URL as per the customer's account
ssl_enabled: true,
auth_type : "Basic",
username: 'ck_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', //WooCommerce Consumer_key
password: 'cs_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' //WooCommerce Consumer_secret
};
Full Code Here:
<div class="woo_commerce_plug" id="woocommerce">
<div class="error">
</div>
<div class="content custom_info">
</div>
<div class="customer_orders">
</div>
</div>
<style>
#woocommerce {
padding: 5px;
}
span.order_info {
display: block;
font-size: 14px;
padding: 5px;
}
.newbutton {
text-align: center;
}
.cfield {
font-size: 14px;
padding: 5px;
}
.customer_orders {
padding-top: 15px;
}
.order_list {
border-bottom: 1px solid #dadada;
padding: 0px 0px 5px 0px;
margin-bottom: 5px;
}
.order_list:last-child {
border-bottom: 0px solid #dadada;
padding: 0px 0px 5px 0px;
margin-bottom: 0px;
}
.trouble {
font-size: 14px;
padding: 5px;
text-align: center;
}
a#fullinfo {
cursor: pointer;
}
.item_list {
display:inline-block;
padding-bottom:10px;
}
.item_qty {
text-align:right;
}
.item_info {
float:right;
width:85%;
}
</style>
<script id="errorTemplate" type="text/x-jQuery-tmpl">
<div class="error_message">
<div class="trouble"> ${message}/No WooCommerce Data </div>
</div>
</script>
<script id="userTemplate" type="text/x-jQuery-tmpl">
<div id="first_name" class="cfield"><b>${first_name ? first_name : 'N/A'} ${last_name ? last_name : 'N/A'}</b><br>${shipping_address.company ? shipping_address.company : 'N/A'}</div>
<div id="wc_address" class="cfield"><b>Shipping Address:</b>
<br>${shipping_address.address_1 ? shipping_address.address_1 : 'N/A'} ${shipping_address.address_2 ? shipping_address.address_2 : 'N/A'}
<br>${shipping_address.city ? shipping_address.city : 'N/A'}, ${shipping_address.state ? shipping_address.state : 'N/A'} ${shipping_address.postcode ? shipping_address.postcode : 'N/A'} </div>
<div id="wc_email" class="cfield">${email ? email : 'N/A'} </div>
<div id="wc_phone" class="cfield">phone: ${billing_address.phone ? billing_address.phone : 'N/A'} </div>
<div id="wc_order" class="cfield">Order Count : ${orders_count ? orders_count : 'N/A'}
<br>Total Spent: $${total_spent ? total_spent : 'N/A'}
<br>Last Order: ${last_order_id ? last_order_id : 'N/A'}</div>
</script>
<script id="orderTemplate" type="text/x-jQuery-tmpl">
<div class="order_list">
<span class="order_info"><b>Order Number :</b> <a class="orderURL" href="${woocombundle.domain}/wp-admin/post.php?post=${order_number}&action=edit" target="_blank" id="order_URL">${order_number}</a> (${status})</span>
<span class="order_info"><b>Total :</b> $${total} </br><b>Date Created:</b> ${created_at.substring(0, 10)} </span>
<span class="order_info full_data-${id}"><b><a class="items" id="fullinfo" onclick="getitems(${id});">Item Details</a> :</b> ${total_line_items_quantity} items</span>
</div>
</script>
<script id="itemTemplate" type="text/x-jQuery-tmpl">
<div class="fullen">
<div class="item_list">
<div class="item_info">
<a href="${woocombundle.domain}/wp-admin/post.php?post=${product_id}&action=edit "target="_blank">${sku}</a></b>
<br>${name}
</div>
<div class="item_qty"><b>${quantity}</b> x </div>
</div>
</div>
</script>
<script type="text/javascript">
var woocombundle = {
domain:'https://<your domain goes here>.com', //Edit the URL as per the customer's account
ssl_enabled: true,
auth_type : "Basic",
username: 'ck_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', //WooCommerce Consumer_key
password: 'cs_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' //WooCommerce Consumer_secret
};
var getuserinfo = {
method:"get",
body:"",
rest_url:"wc-api/v2/customers/email/{{requester.email}}",
on_success: function(data) {
passData(data.responseJSON);
passUserID(data.responseJSON.customer.id);
},
on_failure: function(data) {
failData(data.responseJSON);
}
};
function passUserID(id){
var getorderinfo = {
method:"get",
body:"",
rest_url:"wc-api/v2/customers/"+id+"/orders",
on_success: function(data) {
passOrderData(data.responseJSON);
},
on_failure: function(data) {
failData(data.responseJSON);
}
}
var proxy = new Freshdesk.Widget(woocombundle);
proxy.request(getorderinfo);
}
function passData(data){
jQuery('#userTemplate').tmpl(data.customer).appendTo(jQuery('.custom_info'));
}
function failData(data) {
console.log(data);
jQuery('#errorTemplate').tmpl(data.errors).appendTo(jQuery('.error'));
}
function passOrderData(data) {
if (data.orders.length > 0) {
jQuery('<div class="newbutton"><a class="toggle_btn btn" id="Toggle_self">Orders</a></div>').insertBefore(jQuery('.customer_orders'));
jQuery('#orderTemplate').tmpl(data.orders.reverse().splice(0,5)).appendTo(jQuery('.customer_orders'));
jQuery("#Toggle_self").on('click',function () {
jQuery(".customer_orders").slideToggle("slow");
});
}
else {
console.log('Orders empty');
}
jQuery('.customer_orders').attr('style','display: none;');
}
function getitems(id) {
console.log(id);
var getiteminfo = {
method:"get",
body:"",
rest_url:"wc-api/v2/orders/"+id+"?fields=id,status,line_items",
on_success: function(data) {
passItemData(data.responseJSON,id);
},
on_failure: function(data) {
failData(data.responseJSON);
}
}
var proxy = new Freshdesk.Widget(woocombundle);
proxy.request(getiteminfo);
}
function passItemData(data,id) {
items = data;
jQuery('#itemTemplate').tmpl(items.order.line_items).insertAfter(jQuery('.full_data-'+id));
}
jQuery(document).on('ticket_view_loaded',function() {
jQuery('#woocommerce').parent().parent().insertAfter(jQuery('#requester_info')).addClass('inactive');
//jQuery('<h3>Customers Orders</h3>').insertBefore('#woocommerce_integration_v2_204841 .content:eq(0)');
jQuery('<h3>Customers Orders</h3>').insertBefore(jQuery('#woocommerce').parent().parent().find('.content:eq(0)'));
var proxy = new Freshdesk.Widget(woocombundle);
proxy.request(getuserinfo);
jQuery('#Toggle_self').livequery('click',function() {
jQuery("#fullinfo").on('click',function() {
jQuery(this).attr('onclick','');
});
});
});
jQuery(document).ready(function () {
if(window.location.href.indexOf("contacts/") > -1) {
var proxy = new Freshdesk.Widget(woocombundle);
proxy.request(getuserinfo);
}
else {
console.log('ignore');
}
});
</script>
SSL in use as well, so I would love to try it a live and see if works now...!