Freshplug to display customer orders in WooCommerce store


Hi!


Has anyone seen or done already integration to Wordpress WooCommerce where the customer orders are displayed with Freshplug for agent when handling the ticket?


This could be quite similar with Pipedrive integration "look a like" where customers data (orders in this case) are retrieved as a table with Freshplug.


I tried to google this without any succeed. Existing WooCommerce Freshdesk integration does not seems to be able to do this kind feature - it's acting like more vice versa as it is now and providers like Zapier only add's private or public notes to the ticket when some trigger's happens. 


WBR Kim Hiekkanen



This topic has been closed for comments

37 replies


Hi, 




I'm interested also. Please, share some code 😉 SSL in use as well, so I would love to try it a live and see if works now...!




Thank you so much! 




WBR 


Kim Hiekkanen



  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&nbsp</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>

  



Here's what it looks like expanded:








Did not work for me at all.  Same empty square.

 



are you trying in Chrome? If so have you looked at the console in the dev view to see what errors are showing up? the quickest way to do this is to press ctrl+shift+i on the ticket page (ticket you are trying to see orders), then select "Console" to see if there are any errors on the page. 




If nothing is showing up most likely there is an error. Maybe what freshdesk fixed for me was unique to me and it might have to be fixed for others too? 


I can not even get title to appear.   I will open a  ticket with them.

 


Got this error in browser console.

 "NetworkError: 404 Not Found - https://tickets.wpfixit.com/http_request_proxy/fetch"

 



the "Customer Orders" doesn't even show up? That's odd.




When I was receiving the error, the "Customer Orders" would show up but when you click on it to expand it, it would just be blank. The error on the page would occur at page load and stopped this freshplug from working at all. 


I got the title to show but still have the error below.  I opened a ticket.

"NetworkError: 404 Not Found - https://tickets.wpfixit.com/http_request_proxy/fetch"



 


Thats the same error I was getting. So I guess that means the fix they did for me must need to be done to all users. That's not good. I'm going to see if they'll give me more info.
I opened a ticket and waiting for them to sort it out.

 



Any update on this? This freshplug code seems to be the only way way to add Woocommerce order info to Freshdesk tickets, but I tried it out today, and the Customers Orders section is empty.