附加购物车,如何折扣某些商品?

时间:2014-08-14 17:31:30

标签: javascript jquery html

我有一个复选框购物车,我想知道,是否可以使用append()功能折扣某些商品?就像我有一个选项可以将某个项目从基本升级到高级,我不希望折扣适用于该特定项目。

我还有一个额外的问题,在附加的每个项目附带一个数量框,如何排除某些项目没有数量框,而只是一些文本?

小提琴here

function buildCart(checked) {
    // This one just builds the sidebar on demand. Quite useful if cart contents can be
    // updated many ways (eg in another tab).
    $("#cart_items").empty();

    $('#total').html('0 €'); //default price for your cart
    var cart_total = 0; //default (because your cart shows 10)


    //For each checked item, add a sidebar element
    for (var i = 0; i < checked.length; i++) {
        //build cart item as appropriate.
        var newItem = $("<div>");
        var checkbox = $("input[name='" + checked[i] + "']");
        $test1 = checkbox.parent('td').siblings('td').html(); // check this, you'll have the item name. (the first td)
        $test2 = checkbox.attr('data-val'); // this will have the value on the "data-val" attribute on your checkbox


        cart_total += parseInt($test2); //add the data-val to the cart_total
        newItem.append('<table cellspacing="2" cellpadding="0" border="0" width="320"><tr> <td width="170" valign="top" align="left"> <div class="product_name">' + $test1 + '</div> </div> </td> <td width="30" valign="top" align="center"> <input type="text" class="quantity" value="1" maxlength="2" /> </td> <td width="70" valign="top" align="center"> <div class="product_total_cost price" data-val="' + $test2 + '">' + $test2 + ' €</div> </td> <td width="9" valign="top" align="right"> <div class="remove_product">X</div> </td> </tr> </table>');

        /*************************/
        var discount_pct = parseInt($(".discount").data("val"), 25);
        var discount = -(cart_total * discount_pct / 100);

        $('.discounted').text('- ' + -discount + ' €');
        $('#total').html(cart_total + discount + " €"); //show this value as the total


        $("#cart_items").append(newItem); 
    }
}

HTML

<table cellspacing="2" cellpadding="0" border="0" width="307">
    <tr>
        <td width="190" valign="top" align="left">
            <div class="discount" data-val="10">Discount</div>
        </td>
        <td width="70" valign="top" align="center">
            <div class="discounted" data-val="25">- 0 €</div>
        </td>
    </tr>
</table>

1 个答案:

答案 0 :(得分:1)

这是一个数据结构问题。

首先,您需要区分符合折扣条件的产品和不符合折扣条件的产品。您还必须区分可以编辑其数量的产品,而不是那些无法编辑的产品。

目前,您的所有输入都是:

<input type="checkbox" name="gold_package" value="Gold package" data-val="40" />

我首先添加一个data-product-type属性来设置产品是否类型&#34;折扣&#34;或者输入&#34;升级&#34;。

在您的脚本中,您必须将类型discount的值推送到与upgrade类型不同的数组。您还可以将项目类型upgrade设置为没有数量框。

您的购物车总数将为(discount[] *%)+(upgrade[])。我希望它有所帮助。