How can I handle fractional quantities in an e-store shopping cart?

Question

I am building an e-store and I need to have the ability to add fractional quantities to the shopping cart.

Admin would set a denominator per product (e.g. 8 would mean that the minimum purchase is 1/8 of a case)

I currently use a jQuery slider and display the quantity in the asp:Label which works just fine on product pages, however it gets out of hand with multiple sliders in the cart (I need to allow the customer to adjust quantities in the cart).

I really want to stay away from ugly dropdown lists.

Any ideas?

EDIT:

Fixed denominator is out of the question ... 4/8 have to show as 1/2 ...

EDIT2:

Usability is important too, + 1/denominator increment per click won't work too well when a customer wants to go from 1/16th of a case to 3 cases

EDIT3:

@RichB: adding a SKU for a fraction of a case goes back to fixed denominator problem. if i add a SKU for 1/16th of a case, and a user wants 1/2 of a case, they would have to order 8x1/16th's [not cool]. If you want to add a SKU for every possible fraction (15 SKUs in this example - this will make my Product page and the CART way to cluttered.

Answer 1

I ended up linking a product page to quantities in cart, so users can update the fractions with the slider on the product page.

Answer 2

One way would be for you to have your quantity textbox followed by a " / [denominator]" string that would allow them to say something like [4] / 8 to designate half a case of 8.

Your only problem there is you're going to having a simple method to keep track of what those denominators are.

Answer 3

Another possible solution (since you are against having a fixed denominator), is to use a series of Up/Down arrows/buttons/whatever and you can use the up and down to increment or decrement the amount of product (and on each increment/decrement correctly update the fractional value in the label).

Edit: This could be further refined by adding in a separate increment/decrement button to modify the quantity by a whole case instead of by a single fractional amount.

Answer 4

I would have a single field, which can be edited to a quantity like 3 6/4. However, when the field looses focus, this will be converted to simplest mixed fraction (4 1/2 for my example).

This allows flexibility of input as well as nice number formatting.

Answer 5

Update: OP says "that's EXACTLY what i'm using right now, however when i get to CART [and have 10 items in the cart] managing multiple sliders becomes problematic. that's why i'm looking for an alternative solution"

Would something like the following work?

See it working here. (edit it here)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<link rel="stylesheet" href="http://jquery-ui.googlecode.com/svn/tags/1.7/themes/base/ui.all.css" type="text/css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.min.js"></script> 

<div class="demo"> 
    <p> 
        <label for="amount">amount :</label> 
        <input type="text" id="amount" /> 
    </p>     
 <div id="slider"></div> 
</div>

var maxDenominator = 16;
var maxWholeCases = 50;

function toFraction(sliderValue){
  var amount = sliderValue / maxDenominator;

  var whole = Math.floor(amount);
  var fractional = "";

  if (amount - whole)
     fractional =  fractApprox(amount - whole, maxDenominator);

  return whole + " " + fractional + " cases";
}

$(function() {
    $("#slider").slider({
        value:10 * maxDenominator,
        min: 0,
        max: maxWholeCases * maxDenominator,
        slide: function(event, ui) {
            $("#amount").val(toFraction(ui.value));
        }
    });
    $("#amount").val(toFraction($("#slider").slider("value")));
});


// from http://www.geneffects.com/briarskin/programming/newJSMathFuncs.html#fractApprox
function fractApprox(x,maxDenominator) {
    // Created 1997 by Brian Risk.  http://brianrisk.com
    maxDenominator = parseInt(maxDenominator);
    var approx = 0;
    var error = 0;
    var best = 0;
    var besterror = 0;
    for (var i=1; i <= maxDenominator; i++) {
        approx = Math.round(x/(1/i));
        error = (x - (approx/i))
        if (i==1) {best = i; besterror = error;}
        if (Math.abs(error) < Math.abs(besterror)) 
            {best = i; besterror = error;}
    }
    return (Math.round(x/(1/best)) + "/" + best);
}

Answer 6

I'd stay away from using fractional units. Instead try something like this.

[ _ _ _ ] cases [ _ _ _ ] individual units

Use 2 SKUs, 1 for a case, and 1 for an individual unit.

Or define a split as a fraction of a case, with product.quantity_per_case.

When I ran restaurants, I'd order like this all of the time. It requires almost no thinking, as you're not dealing with fractions, but whole numbers of cases and whole numbers of units.

Most people will need either cases or splits, but not both.