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



37 replies


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. 






I opened a ticket and waiting for them to sort it out.

 


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 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"



 



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. 


Got this error in browser console.

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

 


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

 



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? 


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

 



Here's what it looks like expanded:









  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>

  



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


What is the exact code you are using for it to work?

Okay, it works for me again. The issue was on FreshDesk's side and their dev team fixed it. So now this works for me. I do have an SSL for my website. 



i was trying to see how i can send you a private message, but it doesn't look like that's supported. 


Will help pay for development if oyu find someone to build it.

 



I'm thinking the same thing.


I'm either going to figure it out or hire someone to do it. 


But, I have also been waiting because the new Woocommerce version is changed their API to use the Wordpress API instead of their own API. Currently this uses the old Woo API (which will still work but I'd love to have it also updated so it'll work for a longer time). 


Would pay someone to get this working.

 



This worked great for me for about a month. I even changed some things to compact the data displayed. But then all of a sudden it stopped working. From the chrome console, it's showing some 404 and 403 errors now. Not sure yet what changed. 


Does not work with https either.

 



 Would love this to work. Any updates?


Hi Freshdesk!


Any updates on this, when this could be fixed?


WBR // Kim


HI,


I'm waiting for this also. I certainly appreciate all you've done to try and make this work for Freshdesk users. I have the plug setup and, of course, get the same oauth message. Any word on a fix for this yet?


Hi

we would be VERY interested by this too !! Any news ??

We are not HTTPS either

And we have one more question : we are currently managing three different domains in our Freshdek. How can we check orders on all 3 sites and match it with the sender e-mail ?

Regards


Thank you

Please keep me in the loop, I have my hope on you 

Kim

Reply