OPA Option Price Auto-update
This extension will show total price of current product, including all selected options and entered values on the fly, while customers click and select, check or uncheck options.
An info box will appear under quantity field when all required fields are filled, this box will be showing total price and price per unit in case of more than one unit.
Ajax driven, it’s fast and transparent for the customer and the admin.

Important notice
You will find this extension included in CFO, under “downloads” tab when you visit our CFO extension page in OpenCart.
OPA & CFO versions must be compatible, please take care of downloading proper versions as we maintain old legacy versions (for example OPA 1.8 will not work with CFO 3.8)
OPA is designed to work with default theme, if you are using a custom one you may need to modify the “entry point”, some clues are described below.
OPA is designed to work with products that are using CFO Custom Formulas.
Price will be shown when all required fields are filled.

You can see OPA working in our Demo Store

CSS Styling
As you can see in last demo link, we are showing OPA styled by default.

If you take a look at OPA extension file.xml, you will find a link to a css file, called “_OPABasicStyling.css”, which is stored in our server.
We reccomend you to download this file, edit it as you need, and then save it in your own server.
After that, edit OPA extension file.xml, changing line to link with your server.

At the right side you will find the basic HTML/CSS markup used to style OPA.

_OPABasicStyling.css file
And this is the default css sheet used in our default style.

#esponi_OPA_Container {

}

#esponi_OPA {
	margin-top: 10px;
	padding: 4px 4px 4px 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #ebf7f9;
	font-size: 120%;
	line-height: 160%;
	margin-bottom: -10px;
}

#esponi_OPA_Loader {
    background: url("http://opencartcfo.com/_OPAWaiting.gif") no-repeat;
    float: right;
    width: 24px;
    height: 24px;
}

#esponi_OPA_UnitText {
	font-weight: bold;
}
#esponi_OPA_Unit {

}

#esponi_OPA_TotalText {
	font-weight: bold;
}
#esponi_OPA_Total {

}

#esponi_OPA_UnitExTax {
	color: #8da1ad;
}
#esponi_OPA_TotalExTax {
	color: #8da1ad;
}

Tips & Tricks for OPA: Hiding “ExTax Prices”
Take in consideration that this method is only functional if you set a default value for every required option.
In xml file of OPA extension find near line 120:

var showExTaxPrices = true;

And change to:

var showExTaxPrices = false;

Tips & Tricks for OPA: Auto-update price just when the customer enters in the product
In xml file of OPA extension find near line 153:

$("#product a.dd-option").bind("click", function(){ esponi_OPA($(this)); });

And add below:

$("#product a.dd-option").bind("click", function(){ esponi_OPA($(this)); });
esponi_OPA(null);

Tips & Tricks for OPA: Showing price box in other position
In xml file of OPA extension, near line 142, you will find a javascript/jQuery code which performs the injection of OPA container into DOM, you can modify as you want, to inject code into other object.

$(esponi_OPA_ContainerHTML).insertAfter($('#input-quantity'));