Update Price as Ordering Options are Selected

Forum Forums Tutorials Update Price as Ordering Options are Selected

This topic contains 0 replies, has 1 voice, and was last updated by  Anonymous 9 years, 1 month ago.

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #48802

    Anonymous
    Participant

    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.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.