Using JavaScript to display calculations in an Instruction option. (number of boxes, total area etc.)

Sometimes you want to display information to your users such as the total area of dimensions or the number of boxes required to purchase.

Although this is not natively supported by Option Price Calculator it is possible with some simple JavaScript and an Instruction Option.

Here’s how it can be done.

1. Add an Instruction Option to your Option Set. Instruction Options allow you to display information or instructions to users. We will use this as a placeholder and with dynamically insert html into this box when a user enters values or selects an option.
   
2. Make sure to give the Instruction Option a Class Name. We need to this reference the element on the page later. You can leave the other fields blank.
   
   

The script that follows will need to be modified for your site, but it will need to be included in the Option Set -> Styles -> Custom JavaScript field that you want this code to run on.

This script has two Event listeners, one on each Dimensions input field (length and width). When the values in these fields change, the setInfo() function runs. The setInfo() function takes the input values from dimensions lookup option and calculates area. It also gets a metadata field in order to calculate the number of boxes required to purchase and cover the area.

In order for you to make this script work in your store, you will need to replace the div element Id’s in the script below with Id’s from your store.

Replace ‘lookup-input1-number-62fbc50d08bf536119d892fc’ with your stores id.
Replace ‘lookup-input2-number-62fbc50d08bf536119d892fc’ with your stores id.

Replace metadata02 with the name of the metadata you want to use.

Replace units with the units you want to display for your area.

Finally, you may want to to modify the calculations in setInfo(). If you want to calculate the same values in this example, you don’t need to change anything. If you want to display different values you will need to modify the calculations accordingly.

/* Get Dimensions input Values*/
var input1 = document.getElementById('lookup-input1-number-62fbc50d08bf536119d892fc');
var input2 = document.getElementById('lookup-input2-number-62fbc50d08bf536119d892fc');

/* get metadata for box size */
const productOPCID = document.querySelector('span.product-id');
const boxsize = productOPCID.getAttribute("metadata02") !== "" ? parseFloat(productOPCID.getAttribute("metadata02")): 0;

/* get product info box */
 const infobox = document.getElementsByClassName("opc-information");

/* set area units */
const units = "cm2";


function setInfo(){

   if (input1.value && input2.value){
	var area = parseInt(input1.value)*parseInt(input2.value);
	var boxes = (parseInt(input1.value)*parseInt(input2.value)) / boxsize;	
	infobox[0].innerHTML = "<strong>Area</strong>: " + area + " " + units + "<br><strong>Boxes Required</strong>: " + Math.round(boxes);
   }	
}

/* add event listener on input1 */
input1.addEventListener('input', function (evt) {
setInfo();
});

/* add event listener on input2 */
input2.addEventListener('input', function (evt) {
setInfo();
});

Here is another more complicated example using a number of other options:

/* Get Dimensions input Values*/
var input1 = document.getElementById('lookup-input1-number-62fbc50d08bf536119d892fc');
var input2 = document.getElementById('lookup-input2-number-62fbc50d08bf536119d892fc');
var areaInput = document.getElementById('number-62fe4206aa0908848b2d3285');
var overage = document.getElementById('62ffd01af0fd4a3d92cfd938-62ffd01af0fd4a3d92cfd93d');


/* get metadata for box size */
const productOPCID = document.querySelector('span.product-id');
const boxSize = productOPCID.getAttribute("metadata02") !== "" ? parseFloat(productOPCID.getAttribute("metadata02")): 0;

var boxPrice = productOPCID.getAttribute("metadata01") !== "" ? parseFloat(productOPCID.getAttribute("metadata01")): 0;

/* get product info box */
 const infobox = document.getElementsByClassName("opc-information");

 /* set area units */
const units = "ft2";

/* add event listener on dimensions input1 */
input1.addEventListener('input', function (evt) {
setInfo();
});

/* add event listener on dimensions input2 */
input2.addEventListener('input', function (evt) {
setInfo();
});

/* add event listener on area input */
areaInput.addEventListener('input', function (evt) {
setInfo();
});

/* add event listener on overage input */
overage.addEventListener('change', function (evt) {
setInfo();
});

var dimensionC = document.getElementById('62fe41e0aa0908848b2d31df-62fe41e0aa0908848b2d31e4');
var areaC = document.getElementById('62fe41e0aa0908848b2d31df-62fe41e0aa0908848b2d31e5');

/* add event listener on calculation type*/
dimensionC.addEventListener('change', function (evt) {
console.log("dimension switch")

areaInput.value = '';
infobox[0].innerHTML = '';
});

/* add event listener on calculation type*/
areaC.addEventListener('change', function (evt) {
console.log("area switch")
input1.value = '';
input2.value = '';
infobox[0].innerHTML = '';
});

function setInfo(){
	var calcType = document.querySelector('input[name="radio-options-62fe41e0aa0908848b2d31df"]:checked').value;

	if ((input1.value && input2.value) || areaInput.value){
	/*Dimensions*/
	if (calcType == "62fe41e0aa0908848b2d31df-62fe41e0aa0908848b2d31e4") {
		var area = parseFloat(input1.value)*parseFloat(input2.value);
		if (area){
			if (overage.checked){
				area = (area*1.05).toFixed(2);
			}
			var boxes = area? (area) / parseFloat(boxSize) : 1;
			
			/* Check size of box */
			var size = boxes / Math.round(boxes);
				size != 1 ? boxes = parseFloat(boxes) + 1 : "";
				
				boxes = boxes < 1 ? 1 : boxes;
			var price = area? (parseFloat(boxPrice)*parseFloat(Math.round(boxes))).toFixed(2) : 0.00;
		}
	}
	/*Area*/
	else{
		var area = parseFloat(areaInput.value);
		if (area){
		
			if (overage.checked){
				area = (area*1.05).toFixed(2);
			}
			var boxes = area? (area) / parseFloat(boxSize) : 1;
		
			/* Check size of box */
			var size = boxes / Math.round(boxes);
				size != 1 ? boxes = parseFloat(boxes) + 1 : "";
			
				boxes = boxes < 1 ? 1 : boxes;
			var price = area? (parseFloat(boxPrice)*parseFloat(Math.round(boxes))).toFixed(2) : 0.00;
		}
	}
		const boxName = boxes > 1 ? "boxes" : "box";
		infobox[0].innerHTML = '<strong><span style="color:#182e49">WE RECOMMEND </span><strong>' + Math.round(boxes)  + " " + boxName + '<br>Covers: ' + area + ' ' + units + '<br><br><strong><span style="color:#182e49;font-size:24px;">SUBTOTAL: </span><strong>' + '<span style="color:#F5AB61;font-size:24px;">$' + price + '</span>';

		
		/* Set Quantity */
		const qty = document.getElementById("quantity");		
			  qty.value =  Math.round(boxes);
	}


}