Grow your CSS skills. Land your dream job.

Order.js on Custom Order Form

  • # August 3, 2010 at 7:41 am

    Hi,

    Thanks for helping.

    I am using the Custom Order Form and all is OK, but when I use prices with decimals, like 165.2, the product subtotal and total+shipping doesnt show decimals. It’s possible to fix this?

    Many thanks again

    Enrique

    # August 4, 2010 at 3:46 pm

    the file I need to modify is this one. The subtotal and total doesn’t include decimals, and I want them to have decimals. Any help?

    // UTILITY FUNCTIONS

    function IsNumeric(n) {
    return !isNaN(n);
    }

    function CleanNumber(value) {

    // Assumes string input, removes all commas, dollar signs, and spaces
    newValue = value.replace(",","");
    newValue = newValue.replace("$","");
    newValue = newValue.replace(/ /g,”);
    return newValue;

    }

    function CommaFormatted(amount) {

    var delimiter = ",";
    var i = parseInt(amount);

    if(isNaN(i)) { return ”; }

    i = Math.abs(i);

    var minus = ”;
    if (i < 0) { minus = ‘-‘; }

    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);

    amount = "$" + minus + n;

    return amount;

    }

    // ORDER FORM UTILITY FUNCTIONS

    function applyName(klass, numPallets) {

    var toAdd = $("td." + klass).text();

    var actualClass = $("td." + klass).attr("rel");

    $("input." + actualClass).attr("value", numPallets + " pallets");

    }

    function removeName(klass) {

    var actualClass = $("td." + klass).attr("rel");

    $("input." + actualClass).attr("value", "");

    }

    function calcTotalPallets() {

    var totalPallets = 0;

    $(".num-pallets-input").each(function() {

    var thisValue = parseInt($(this).val());

    if ( (IsNumeric(thisValue)) && (thisValue != ”) ) {
    totalPallets += parseInt(thisValue);
    };

    });

    $("#total-pallets-input").val(totalPallets);

    }

    function calcProdSubTotal() {

    var prodSubTotal = 0;

    $(".row-total-input").each(function() {

    var valString = $(this).val() || 0;

    prodSubTotal += parseInt(valString);

    });

    $("#product-subtotal").val(CommaFormatted(prodSubTotal));

    }

    function calcShippingTotal() {

    var totalPallets = $("#total-pallets-input").val() || 0;
    var shippingRate = $("#shipping-rate").text() || 0;
    var shippingTotal = totalPallets * shippingRate;

    $("#shipping-subtotal").val(CommaFormatted(shippingTotal));

    }

    function calcOrderTotal() {

    var orderTotal = 0;

    var productSubtotal = $("#product-subtotal").val() || 0;
    var shippingSubtotal = $("#shipping-subtotal").val() || 0;
    var underTotal = $("#under-box").val() || 0;

    var orderTotal = parseInt(CleanNumber(productSubtotal)) + parseInt(CleanNumber(shippingSubtotal));

    $("#order-total").val(CommaFormatted(orderTotal));

    $("#fc-price").attr("value", orderTotal);

    }

    // DOM READY
    $(function() {

    var inc = 1;

    $(".product-title").each(function() {

    $(this).addClass("prod-" + inc).attr("rel", "prod-" + inc);

    var prodTitle = $(this).text();

    $("#foxycart-order-form").append("<input type=’hidden’ name=’" + prodTitle + "’ value=” class=’prod-" + inc + "’ />");

    inc++;

    });

    // Reset form on page load, optional
    $("#order-table input[type=text]:not(‘#product-subtotal’)").val("");
    $("#product-subtotal").val("$0.00");
    $("#shipping-subtotal").val("$0");
    $("#fc-price").val("$0");
    $("#order-total").val("$0");
    $("#total-pallets-input").val("0");

    // "The Math" is performed pretty much whenever anything happens in the quanity inputs
    $(‘.num-pallets-input’).bind("focus blur change keyup", function(){

    // Caching the selector for efficiency
    var $el = $(this);

    // Grab the new quantity the user entered
    var numPallets = CleanNumber($el.val());

    // Find the pricing
    var multiplier = $el
    .parent().parent()
    .find("td.price-per-pallet span")
    .text();

    // If the quantity is empty, reset everything back to empty
    if ( (numPallets == ”) || (numPallets == 0) ) {

    $el
    .removeClass("warning")
    .parent().parent()
    .find("td.row-total input")
    .val("");

    var titleClass = $el.parent().parent().find("td.product-title").attr("rel");

    removeName(titleClass);

    // If the quantity is valid, calculate the row total
    } else if ( (IsNumeric(numPallets)) && (numPallets != ”) ) {

    var rowTotal = numPallets * multiplier;

    $el
    .removeClass("warning")
    .parent().parent()
    .find("td.row-total input")
    .val(rowTotal);

    var titleClass = $el.parent().parent().find("td.product-title").attr("rel");

    applyName(titleClass, numPallets);

    // If the quantity is invalid, let the user know with UI change
    } else {

    $el
    .addClass("warning")
    .parent().parent()
    .find("td.row-total input")
    .val("");

    var titleClass = $el.parent().parent().find("td.product-title").attr("rel");

    removeName(titleClass);

    };

    // Calcuate the overal totals
    calcProdSubTotal();
    calcTotalPallets();
    calcShippingTotal();
    calcOrderTotal();

    });

    });

    # August 5, 2010 at 5:50 pm

    In case anyone is interested, solved the problem doing this:

    // UTILITY FUNCTIONS

    function IsNumeric(n) {
    return !isNaN(n);
    }

    function CleanNumber(value) {

    // Assumes string input, removes all commas, dollar signs, and spaces
    newValue = value.replace(",","");
    newValue = newValue.replace("$","");
    newValue = newValue.replace(/ /g,”);
    return newValue;

    }

    function CommaFormatted(amount) {

    var delimiter = ",";
    var i = parseInt(amount);

    if(isNaN(i)) { return ”; }

    i = Math.abs(i);

    var minus = ”;
    if (i < 0) { minus = ‘-‘; }

    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);

    amount = "$" + minus + n;

    return amount;

    }

    /THIS IS WRONG, SHOULD BE:
    function CurrencyFormatted(amount) {
    var i = parseFloat(amount);
    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’; }
    amount = minus + s;
    return amount;
    }

    /

    // ORDER FORM UTILITY FUNCTIONS

    function applyName(klass, numPallets) {

    var toAdd = $("td." + klass).text();

    var actualClass = $("td." + klass).attr("rel");

    $("input." + actualClass).attr("value", numPallets + " pallets");

    }

    function removeName(klass) {

    var actualClass = $("td." + klass).attr("rel");

    $("input." + actualClass).attr("value", "");

    }

    function calcTotalPallets() {

    var totalPallets = 0;

    $(".num-pallets-input").each(function() {

    var thisValue = parseInt($(this).val());

    if ( (IsNumeric(thisValue)) && (thisValue != ”) ) {
    totalPallets += parseInt(thisValue);
    };

    });

    $("#total-pallets-input").val(totalPallets);

    }

    function calcProdSubTotal() {

    var prodSubTotal = 0;

    $(".row-total-input").each(function() {

    var valString = $(this).val() || 0;

    prodSubTotal += parseInt(valString);/THIS IS WRONG, SHOULD BE parseFloat/

    });

    $("#product-subtotal").val(CommaFormatted(prodSubTotal));

    }

    function calcShippingTotal() {

    var totalPallets = $("#total-pallets-input").val() || 0;
    var shippingRate = $("#shipping-rate").text() || 0;
    var shippingTotal = totalPallets * shippingRate;

    $("#shipping-subtotal").val(CommaFormatted(shippingTotal));

    }

    function calcOrderTotal() {

    var orderTotal = 0;

    var productSubtotal = $("#product-subtotal").val() || 0;
    var shippingSubtotal = $("#shipping-subtotal").val() || 0;
    var underTotal = $("#under-box").val() || 0;

    var orderTotal = parseInt(CleanNumber(productSubtotal)) + parseInt(CleanNumber(shippingSubtotal)); /THIS IS WRONG, SHOULD BE parseFloat/

    $("#order-total").val(CommaFormatted(orderTotal));

    $("#fc-price").attr("value", orderTotal);

    }

    // DOM READY
    $(function() {

    var inc = 1;

    $(".product-title").each(function() {

    $(this).addClass("prod-" + inc).attr("rel", "prod-" + inc);

    var prodTitle = $(this).text();

    $("#foxycart-order-form").append("<input type=’hidden’ name=’" + prodTitle + "’ value=” class=’prod-" + inc + "’ />");

    inc++;

    });

    // Reset form on page load, optional
    $("#order-table input[type=text]:not(‘#product-subtotal’)").val("");
    $("#product-subtotal").val("$0.00");
    $("#shipping-subtotal").val("$0");
    $("#fc-price").val("$0");
    $("#order-total").val("$0");
    $("#total-pallets-input").val("0");

    // "The Math" is performed pretty much whenever anything happens in the quanity inputs
    $(‘.num-pallets-input’).bind("focus blur change keyup", function(){

    // Caching the selector for efficiency
    var $el = $(this);

    // Grab the new quantity the user entered
    var numPallets = CleanNumber($el.val());

    // Find the pricing
    var multiplier = $el
    .parent().parent()
    .find("td.price-per-pallet span")
    .text();

    // If the quantity is empty, reset everything back to empty
    if ( (numPallets == ”) || (numPallets == 0) ) {

    $el
    .removeClass("warning")
    .parent().parent()
    .find("td.row-total input")
    .val("");

    var titleClass = $el.parent().parent().find("td.product-title").attr("rel");

    removeName(titleClass);

    // If the quantity is valid, calculate the row total
    } else if ( (IsNumeric(numPallets)) && (numPallets != ”) ) {

    var rowTotal = numPallets * multiplier;

    $el
    .removeClass("warning")
    .parent().parent()
    .find("td.row-total input")
    .val(rowTotal);

    var titleClass = $el.parent().parent().find("td.product-title").attr("rel");

    applyName(titleClass, numPallets);

    // If the quantity is invalid, let the user know with UI change
    } else {

    $el
    .addClass("warning")
    .parent().parent()
    .find("td.row-total input")
    .val("");

    var titleClass = $el.parent().parent().find("td.product-title").attr("rel");

    removeName(titleClass);

    };

    // Calcuate the overal totals
    calcProdSubTotal();
    calcTotalPallets();
    calcShippingTotal();
    calcOrderTotal();

    });

    });

    # August 11, 2010 at 12:57 pm

    thanks for sharing,

    # September 19, 2012 at 6:35 pm

    THANKS THANKS THANKS !!! A lot ! perfect ! thanks for sharing !

    # September 29, 2014 at 1:46 pm

    I couldn’t get this to work. I also noticed that there are some ” that should be ”. I don’t know what could be happening.

    This is the link.

    http://goo.gl/9FH4Fw

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".