Frozen Units Bookmarklet

Drag this link into your bookmarks bar: Frozen Units.

When you are placing your daily order, click the bookmark and you should be given a freezer unit count for that night's delivery.

The script will also number your columns and highlight the names of your frozen items. It will use  green  for 1 unit items,  yellow  for 2 unit items, and  red  for 3 unit items. The highlighting is in place both to quickly validate that the script is counting correctly and so that when the IMS order form inevitably changes we can easily adjust the script.

Here's the code:


n = document.getElementById("table1");
x = n.getElementsByClassName("w1");
tally = 0;
b = 0;

These are just setting up some arrays and useful variables. "x" will be an array of all HTML elements that have the class name "w1". Every item on the order sheet is contained in a table row, the first cell of which has the tag 'class = "w1"'. So, grabbing every element with a class of w1 gives us an easy way to iterate through all products on the form.


oneUnits = [15,16,17,18,19,20,23,25,27,28,29,33,35,37,40,41,42,43];
twoUnits = [21,22,24,26,31,32,34,36,38,39,44,66,67,68];
fourUnits = [30,50,57,58,59,60,65,71,72,77];

These three arrays define which line items on the order sheet are for frozen products and how many units they will occupy in our freezer. This is the section of code that gets updated ocassionally as new products are launched or SKUs are adjusted, etc. Basically, any time products get shifted around on the order sheet we need to update those arrays with the correct line numbers for each item.


for (let i = 0; i < x.length-1; i++) {
    let parse = 0;

    x[i+1].innerText = b;

This chunk starts a loop which will iterate over every orderable item on the page. The last line adds a number to the start of the rows as we go.


    onOrder = x[i+1].parentNode.cells[4].innerHTML.match(/\d+/g);
    uom = x[i+1].parentNode.cells[8].innerHTML.match(/\d+(?=\<\/sp)/g);

These two lines pull the numbers from the "on order" and "units of measure" categories. As the Units of Measure number is packed into a span, we extract it using an unpretty regex that gets the job done.


let mult = OnOrder / uom;

This line is how we account for zeros and multiples of the same item. "mult" becomes a multiplier in the next chunk of code. So, if you ordered 0 donuts and the unit of measure for donuts was 12, your multiplier would be 0, because 0 / 12 (onOrder / uom) = 0. If you ordered a case of donuts, your on order column would read "12", so your multiplier would be 1, as 12 / 12 is 1. Finally, if you order multiples of the same item, say 3 cases of donuts, your on order column will reflect that as well. So, if you have 36 eaches coming in your multiplier would be 3, as 36/12 = 3.


    if (oneUnits.includes(b)){
        tally += (1 * mult);
        x[i+1].parentNode.cells[2].style.backgroundColor = "palegreen";
    }
    else if (twoUnits.includes(b)){
        tally += (2 * mult);
        x[i+1].parentNode.cells[2].style.backgroundColor = "yellow";
    }
    else if (fourUnits.includes(b)){
        tally += (4 * mult);
        x[i+1].parentNode.cells[2].style.backgroundColor = "lightpink";
    }

These three statements first check if the line we are on is in one of the three arrays we established up top. If it is in the first array for freezer items that occupy 1 unit of space, it adds to the "tally" variable 1 multiplied by the multiplier that was established in the prior step. It then highlights the name of the item in green. If not in the oneUnits array it checks if the line is in the two and four unit arrays and, if it finds the line in there, highlights them their respective colors.

The highlighting is handy to make sure that the items lighting up are the correct items that we would expect. If not, we can presume that the order sheet has changed and can then use the line numbers to update our arrays for the new layout.


    else{x[i+1].parentNode.cells[2].style.backgroundColor = "";}

This might seem superfluous, but the final line of the if statement clears out any background color property that has been applied to the names of lines that aren't in the arrays. While we definitely don't need this each time we run the script it becomes super useful when we are updating the arrays.


    b += 1;
}

alert('Incoming Frozen Units: _ ' + tally + ' _');

We conclude by incrementing our "b" variable that we use for all sorts of indexing throughout the script, and pushing an alert to the user that gives the tally of all incoming freezer units. They can then pass that along to the closing crew to make sure we are delivery ready!