Freshplug to display customer orders in WooCommerce store

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. 

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. 

  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> 

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

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). 

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. 

 Would love this to work. Any updates?