Question

我正在建立一个电子商店，我需要能够将小数量添加到购物车。

管理员会为每件产品设定一个分母（例如，8表示最低购买量为1/8）

我目前使用jQuery slider并显示asp:Label中的数量，该数量在产品页面上运行得很好，但是购物车中有多个滑块会让它失控（我需要允许客户）调整购物车中的数量。）

我真的想远离丑陋的下拉列表。

有什么想法吗？

编辑：

固定分母是不可能的...... 4/8必须显示为1/2 ......

EDIT2：

可用性也很重要，当客户想要从案例的1/16到3个案例时，每次点击+ 1 /分母增量不会太好用

EDIT3：

@RichB：为案例的一小部分添加SKU可以追溯到固定分母问题。如果我为一个案例的1/16添加一个SKU，而一个用户想要一个案例的1/2，他们将不得不订购8x1 / 16th [不酷]。如果您想为每个可能的分数添加SKU（在此示例中为15个SKU - 这将使我的产品页面和CART混乱。

Answer 1

一种方法是让你的数量文本框后跟一个“/ [分母]”字符串，这样就可以让他们说出[4] / 8之类的东西来指定8个案例的半个案例。

你唯一的问题是，你将有一个简单的方法来跟踪这些分母是什么。

Answer 2

另一个可能的解决方案（因为你反对有一个固定的分母），是使用一系列向上/向下箭头/按钮/任何你可以使用向上和向下增加或减少产品的数量（和每个递增/递减都会正确更新标签中的小数值。

编辑：可以通过添加单独的递增/递减按钮来进一步细化，以按整个案例而不是单个小数量修改数量。

Answer 3

我会有一个字段，可以编辑为3 6/4这样的数量。但是，当该字段失去焦点时，这将转换为最简单的混合分数（4 1/2为我的例子）。

这允许输入的灵活性以及良好的数字格式。

Answer 4

更新：OP说“这正是我现在正在使用的，但是当我到达CART [并且购物车中有10件物品]时，管理多个滑块会出现问题。这就是我的原因我正在寻找替代解决方案“

以下是否会有以下工作？

看到它正常工作here。（编辑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 5

我最终将产品页面链接到购物车中的数量，因此用户可以使用产品页面上的滑块更新分数。

Answer 6

我不会使用小数单位。而是尝试这样的事情。

[_ _ _]个案[_ _ _]个别单位

使用2个SKU，1个用于案例，1个用于单个单元。

或者使用product.quantity_per_case将分割定义为案例的一小部分。

当我经营餐馆时，我会一直这样订购。它几乎不需要思考，因为你不处理分数，而是整数个案例和整数个单位。

大多数人都需要案件或分裂，但不是两者都需要。

如何处理电子商店购物车中的小数量？

编辑：

EDIT2：

EDIT3：

6 个答案: