使用Jquery调整多个购物车价格

时间:2012-10-16 19:54:14

标签: php javascript jquery html shopping-cart

我正在尝试根据用户选择的数量动态更改购物车价格。我已经有代码来更改产品价格总数,但我很难更改产品插件的总数。谁能帮我?

另外,我忘了添加一个事实,即我要更改插件价格,但它正在改变购物车中的每个插件价格。我想真正的问题是如何单独更改每个添加的价格并与其他添加分开?

这是HTML

<table id="carttable">

<tr>
    <th>Item</th>
    <th>Price</th>
    <th>Quantity</th>
    <th>Total</th>
    <th></th>
</tr>

<tr>
    <td class="cartField">12 inch sub</td>
    <td class="cartField productPrice" id="price_448" data-price="5.99">$5.99</td>
    <td class="cartField">
        <select class="quantityDrop" name="quantity[448]">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3" selected="selected">3</option>
        </select>
    </td>
    <td class="cartField totalProdPrice" id="item_448">$20</td>
</tr>
<tr class="addon_field">
    <td class="cartField addon_name">Turkey</td>
    <td class="addPrice" id="addon_448" data-addon="addon_448_41" data-price="2.00">$2.00</td>
    <td class="cartField totalAddPrice" data-addon-total="addon_448_41" id="totalAddOn_448">$6.00</td>
</tr>
<tr class="addon_field">
    <td class="cartField addon_name">Grilled Onions via Jim</td>
    <td class="addPrice" id="addon_448" data-addon="addon_448_68" data-price="0.50">$0.50</td>
    <td class="cartField totalAddPrice" data-addon-total="addon_448_68" id="totalAddOn_448">$1.50</td>
</tr>
<tr>
    <td class="cartField" style="width: 359px;">12 inch sub</td>
    <td class="cartField productPrice" id="price_453" data-price="5.99">$5.99</td>
    <td align="center" class="cartField">
        <select class="quantityDrop" name="quantity[453]">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </td>
    <td class="cartField totalProdPrice" id="item_453">$35.94</td>
</tr>
<tr class="addon_field">
    <td class="cartField addon_name">Turkey</td>
    <td class="addPrice" id="addon_453" data-addon="addon_453_41" data-price="2.00">$2.00</td>
    <td class="cartField totalAddPrice" data-addon-total="addon_453_41" id="totalAddOn_453">$12.00</td>
</tr>
<tr class="addon_field">
    <td class="cartField addon_name">Grilled Onions via Jim</td>
    <td class="addPrice" id="addon_453" data-addon="addon_453_68" data-price="0.50">$0.50</td>
    <td class="cartField totalAddPrice" data-addon-total="addon_453_68" id="totalAddOn_453">$3.00</td>
</tr>

<tr>
    <td><b>Subtotal:</b></td>
    <td class="subtotal">$67.89</td></tr>
<tr>
    <td><b>Taxes:</b></td>
    <td>$<span class="tax">4.75</span> (<span class="taxAmt">0.07000</span>)</td>
</tr>
<tr>
    <td><b>Grand Total:</b></td>
    <td class="grandTotal">$72.64</td>
</tr>

和Jquery代码

    $(".quantityDrop").change(function() {
    var qty         = $(this).val();

    var price       = $(this).closest("tr")
                           .find("td[id^=price_]")
                           .html().split("$")[1];

    var addOnPrice  = $(this).closest("tbody")
                            .find("tr.addon_field")
                            .find("td[data-addon^=addon_]")
                            .html().split("$")[1];


    var prodAddtotal = parseFloat(price) + parseFloat(addOnPrice);
    var addOnTotal  = parseInt(qty) * parseFloat(addOnPrice);
    var total       = parseInt(qty) * parseFloat(price);

    $(this).closest("tbody").find("tr.addon_field").find("td[data-addon-total^=addon_]").html("$" + addOnTotal.toFixed(2));
    $(this).closest("tr").find("td[id^=item_]").html("$" + total.toFixed(2));


    var subTotal = 0;
    $("td[id^=item_]").each(function() {
        subTotal += parseFloat($(this).html().split("$")[1]);
    });
    $(".subtotal").html("$" + subTotal.toFixed(2));
    var taxAmount        = $('.taxAmt').html();
    var tax               = (subTotal * taxAmount);
    $('.tax').html(tax.toFixed(2));
    var subtotalTax       = parseFloat(tax.toFixed(2),10);
    var grandTotal       = (subTotal + subtotalTax);
    $('.grandTotal').html("$" + grandTotal.toFixed(2));

});

如果有人可以提供帮助,我们将不胜感激。提前谢谢。

0 个答案:

没有答案