Как мне обновить итоговую цену и сохранить новое количество после обновления? - PullRequest
Новая
       18

Как мне обновить итоговую цену и сохранить новое количество после обновления?

5 голосов
/ 26 апреля 2019

Я создаю корзину покупок и хочу, чтобы общая цена обновлялась при нажатии на кнопку обновления.Кроме того, я хочу, чтобы новое количество и общая цена не изменились после обновления страницы.

Я использую сервер wamp.

Код дисплея: 

var products = JSON.parse(localStorage.getItem('products'));
var shoppingCart = JSON.parse(localStorage.getItem('shoppingCart'));
var itemQuantity;

function showItem(){
    var total=0;
    for(var i in shoppingCart) {
        var id = shoppingCart[i]; 
        var itemImage = products[id].image;
        var itemPrice = products[id].price;
        var itemDescription = products[id].description;
        itemQuantity=1;
        var totalPrice = parseInt(itemPrice*itemQuantity);

        var index = "<tr><td><img 
               src='img/"+itemImage+"'width='100px'/></td> 
               <td>"+itemDescription + "</td><td>" + itemPrice</td>
               <td><input id="+id+" type=number min=1 max=100 
               value="+itemQuantity+" /></td>
               <td>"+totalPrice+"</td>
               <td>"+ "<button 
               onclick='removeItem("+i+")'>Remove</button></td></tr>";

        $('#product_list').append(index);
        total += (totalPrice);
    } 
    document.getElementById('total').innerHTML = total;
    document.querySelector('.badge').innerHTML = shoppingCart.length;
}
showItem();

Обновление общей цены: 

function saveCart() {
    localStorage.setItem('saveCart', JSON.stringify(shoppingCart));
};

function saveInput() { 
    localStorage.setItem('product', JSON.stringify(products));
};

$(document).ready(function(){
    $(".btn-update").click(function(){
        for(var i in shoppingCart) {
            var id= shoppingCart[i];
            itemQuantity = $("#"+id+"").val();
        }
        $("#product_list").empty();
        saveInput();
        showItem();
    });
});

HTML 

        <table id="cart" border="0">
            <thead>
                <tr><th>Product</th><th>Description</th><th>UnitPrice</th> 
                <th>Quantity</th><th>Total Price</th></tr>

            </thead>
            <tbody id="product_list">

            </tbody>
            <tfoot id="cartFooter">
                <tr>
                    <th>TOTAL</th>
                    <th></th>
                    <th></th>
                    <th id="total" align="right">0</th>
                </tr>
            </tfoot>
        </table>

Я ожидал, что общая цена будет обновлена ​​после того, как я нажму кнопку обновления, и новое количество и новая общая ценаоставайся прежним после обновления.

...