Update Price as Ordering Options are Selected

[AnonymousParticipant]

If you are using custom pricing rules for your ordering options, you may want the product price on the MoreInfo page to update as a customer selects various options to reflect the actual price of the product.

An example of this functionality can be found on the following demo page:

http://shopsite-demo.lexiconn.com/product_options_change_price.html

This can be accomplished very easily using some javascript on your MoreInfo page:

1. Set or Add the name=”add_to_cart” attribute to your Add to Cart form element:

<form name="add_to_cart" action="[path-to-your-shopping-cart]/order.cgi" method="post">

2. Insert a hidden input field into the body of your MoreInfo page template that has an id of “base_price” and a value of your product’s base price:

<input type="hidden" id="base_price" name="base_price" value="[-- PRODUCT.Price --]" />

3. Wrap the ShopSite PRODUCT.Price template tag with a span element with an id of “product_price”:

<span id="product_price">[-- PRODUCT.Price --]</span>

4. Add the following javascript to the body of your MoreInfo page, preferably near the closing body tag:

<script type="text/javascript">

window.onload = function(){

basePrice = parseFloat(document.getElementById("base_price").value.substr(1).replace(',',''))
modifiedPrice = null
productID = document.add_to_cart.itemnum.value
priceAdjustment = new Array()
var optionCount = 0

var option_regex = /.*:finopt:.*/
var value_regex = /.*;[+*-][0-9]{0,4}.[0-9]{1,2}||.*;[+*-][0-9]{0,4}/
var modifiedPrice_regex = /.*;.*/

var commaFormat = function(amount){
var delimiter = ","; // replace comma if desired
var a = amount.split('.',2)
var d = a[1]
var i = parseInt(a[0])
if(isNaN(i)) { return ''; }
var minus = ''
if(i < 0) { minus = '-'; }
i = Math.abs(i)
var n = new String(i)
var a = []
while(n.length > 3){
var nn = n.substr(n.length-3)
a.unshift(nn)
n = n.substr(0,n.length-3)
}
if(n.length > 0) { a.unshift(n); }
n = a.join(delimiter)
if(d.length < 1) { amount = n; }
else { amount = n + '.' + d; }
amount = minus + amount
return amount
}

var currencyFormat = function(price) {
var i = parseFloat(price)
if(isNaN(i)) { i = 0.00; }
var minus = ''
if(i < 0) { minus = '-'; }
i = Math.abs(i)
i = parseInt((i + .005) * 100)
i = i / 100
s = new String(i)
if(s.indexOf('.') < 0) { s += '.00'; }
if(s.indexOf('.') == (s.length - 2)) { s += '0'; }
s = minus + s
var c_format = commaFormat(s)
return c_format
}

adjustPrice = function(currentPrice, optionValue){
var optionSplit = optionValue.split(";")
var operator = optionSplit[1].charAt(0)
var increment = parseFloat(optionSplit[1].substr(1))

switch(operator){

case '+':
return increment
break

case '-':
return (0 - increment)
break

case '*':
increment = currentPrice * increment
return increment
break

case '/':
currentPrice = currentPrice / increment
return currentPrice
break

default:
return 0
break

}
}


calculateModifiedPrice = function(){
modifiedPrice = basePrice
for(n=0; n<optionCount; n++){
var inc = adjustPrice(basePrice, priceAdjustment["'"+productID+":finopt:"+n+"'"])
modifiedPrice = modifiedPrice + inc
}
}

var s_option = document.getElementsByTagName("select")

//cycle through all <select> elements on page
for(x=0; x<s_option.length; x++){
//If this select matches an ordering option by name (/.*:finopt:.*/)
if(s_option[x].name){
if(option_regex.test(s_option[x].name)){
//increment count of ordering options
optionCount++
//Get current value of this ordering option (on page load)
var s_option_value = s_option[x].options[s_option[x].selectedIndex].value

//If this option has any incremented value
if(modifiedPrice_regex.test(s_option_value) && s_option_value!=';n'){
priceAdjustment["'"+s_option[x].name+"'"] = s_option_value

} else if(s_option_value!=';n') {
priceAdjustment["'"+s_option[x].name+"'"] = 'n;+0'
} else {
priceAdjustment["'"+s_option[x].name+"'"] = 'n;+0'
}

for(n=0; n<s_option[x].length; n++){

s_option[x].onchange=function(){

var s_option_value = this.options[this.selectedIndex].value

//If this option has any incremented value
if(modifiedPrice_regex.test(s_option_value) && s_option_value!=';n'){
priceAdjustment["'"+this.name+"'"] = s_option_value

} else if(s_option_value!=';n') {
priceAdjustment["'"+this.name+"'"] = 'n;+0'
} else {
priceAdjustment["'"+this.name+"'"] = 'n;+0'
}
calculateModifiedPrice()
var e_price = "$"+currencyFormat(modifiedPrice)
document.getElementById("product_price").innerHTML = e_price
}
}

} else{
//Do nothing
}
}
}

calculateModifiedPrice()
var e_price = "$"+currencyFormat(modifiedPrice)
document.getElementById("product_price").innerHTML = e_price
}
</script>

Now all that you will need to do is regenerate your site and the prices of your products will update on the moreinfo page as the customer chooses options that raise/lower the price.

• This topic was modified 10 years, 5 months ago by  admin.
• This topic was modified 10 years, 5 months ago by  admin.
• This topic was modified 2 years, 3 months ago by  lexiconn.

[Author]

Posts