Highlighting urgent jobs in the order queue - xmpie-users/uStore-js GitHub Wiki

Many printers with uStore want to offer their customers the ability to set a "pickup date" or "requested date" on their order. This is fairly easy to do by adding a product property and setting the property on the required products. But, now the orders are coming in with a required pickup date. How can you prioritize the work in the orders queue?

The solution is fairly simple with these steps. Further details are explained afterwards in more information:

1. Create the product property (preferably a global property so you don't have to define it multiple times)
2. Assign the product property to your products
3. Order one of your products and set the pickup date
4. Add the pickup date to your orders list
5. Add row highlighting via JavaScript if desired

1. Create the product property. In the example below a date picker is used to set pickup by default at 3 days from the order date, although allowing the customer to change the pickup date up to 1 day from the order date.

2. Add the new property to any products or product profiles that you want customers to select the pickup date on.

3. Create a test order of one of the products so that you have a new order in your orders list that includes the pickup date.

4. On the uStore admin orders page, add the pickup date to the order queue table by clicking the "Edit order list columns" link on the orders page. Of course you can now click on the column heading to sort by the pickup date, or drag the column header up to the group area. But we can do more...

5. Identify which column of the order table the pickup date is displayed in. (The first column, that contains the checkbox, will be number 0.)

6. On the uStore server, edit this file:

   installDrive:\XMPie\uStore\App\AdminApp\PageLayout\Admin.Master

   Copy the following script into the file near the bottom. Paste it in before the </body> tag:

<script type="text/javascript">
$(document).ready(function () {
  if (document.getElementById("divTitle").innerText.includes("Orders List")) //check that we're in Orders List
  {
     $(".rgRow,.rgAltRow").find("TD:eq(6)").each(function(td, elem){
       if ((new Date($(elem).text()).getTime() - new Date().getTime()) > 180000000) // more than 3 days
         $(elem).parent().css ("background-color", "green");
       else if ((new Date($(elem).text()).getTime() - new Date().getTime()) > 100000000) // more than 2 days
         $(elem).parent().css ("background-color", "yellow");
       else if ((new Date($(elem).text()).getTime() - new Date().getTime()) > 0)       // less than 2 days
         $(elem).parent().css("background-color", "red"); 
     });
  }
});
</script>

7. Check the 5th line of the script. Where you see "eq(6)". Change the number to be the relevant column number in your table that you identified in step 5.

8. Save the changes to the master page. Login to uStore admin and check your orders that have the pickup date. Your orders list will now highlight to show which jobs are urgent:

9. Of course you can modify the script to use different colors, more or less steps, or different time periods.

10. Note that upgrades to uStore may update the master page which will remove your JavaScript therefore, you should keep note of your changes for future reference.