views:

299

answers:

6

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.

A: 

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.

TheTXI
4/8 should be 1/2 ... I don't want to create any confuction
roman m
A: 

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.

TheTXI
thought about this one too ... what if i want to go from 1/16th of a case to 3 cases ... lots of clicks there
roman m
RM: I actually had that exact same thought after I posted and editted the original question to answer.
TheTXI
i think 2 "incrementors" will confuse the customer even more than fixed denominator :)
roman m
RM: I think it would depend upon the layout. If you think of it in written out as a mixed fraction, the incrementor for the whole case could be on the left of the case number (and larger) while the incrementor for the fractions would be on the right of the numerator and a smaller size.
TheTXI
you could show it as "0 whole cases and 1/8 of a case" and have inc/dec controls by each value. Make "0 whole cases" grey and when they increment from 7/8 have the "1 whole cases" black and the "and 0/8 of a case" grey so it's obvious when fractional and whole parts are in play.
Sam Hasler
SamHasler: That way would definitely be a good layout in terms of a single line (very useful when talking about a full cart listing and not just a single product page).
TheTXI
A: 

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.

Nick
This may end up being the simplest method in terms of design, but it is making a big assumption that the users are going to be able to correctly put in the fraction they want. I would recommend this only slightly above having the user type in a decimal number.
TheTXI
This would surely end in disaster.
Geoffrey Chetwood
A: 

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"&gt;&lt;/script&gt; 
<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"&gt;&lt;/script&gt; 

<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);
}
Sam Hasler
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
roman m
A: 

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

roman m
A: 

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.

Erik