Question

Я создаю корзину для покупок с HTML / CSS и JQuery и застрял с двумя вещами:

Когда я обновляю квантичность, тогда SubTotal, Tax и Total value не обновляются и, во-вторых, нажимая кнопку Buy now, янужно отправить данные в json.

Вот мой код в JSfiddle

var taxRate = 0.2;
//var shippingRate = 15.00; 
var fadeTime = 300;


/* Assign actions */
$('.shoppingBasket-items__qty input').change( function() {
  updateQuantity(this);
  recalculateCart();
});
$('.remove-item').click( function() {
  removeItem(this);
});


/* Recalculate cart */
function recalculateCart() {
  var subtotal = 0;
  
  /* Sum up row totals */
  $('.shoppingBasket-items').each(function () {
    subtotal += parseFloat($(this).children('.shoppingBasket-items__price').text());
  });
  
  /* Calculate Sub-totals */
  var tax = subtotal * taxRate;
  var total = subtotal + tax;

  /* Calculate totals */
  var tax = subtotal * taxRate;
  var total = subtotal + tax;

  /* Update totals display */
  $('.shoppingBasket-total__cost').fadeIn(fadeTime, function() {
    $('#cart-subtotal').html(subtotal.toFixed(2));
    $('#cart-tax').html(tax.toFixed(2));
    //$('#cart-shipping').html(shipping.toFixed(2));
    $('#cart-total').html(total.toFixed(2));
    if(total == 0){
      $('.checkout').fadeOut(fadeTime);
    }else{
      $('.checkout').fadeIn(fadeTime);
    }
    $('.totals-value').fadeIn(fadeTime);
  });
}
recalculateCart();

/* Update quantity */
function updateQuantity(quantityInput)
{
  /* Calculate line price */
  var productRow = $(quantityInput).parent().parent();
  var price = parseFloat(productRow.children('.shoppingBasket-items__cost').text());
  var quantity = $(quantityInput).val();
  var linePrice = price * quantity;
  
  /* Update line price display and recalc cart totals */
  productRow.children('.shoppingBasket-items__cost').each(function () {
    $(this).fadeOut(fadeTime, function() {
      $(this).text(linePrice.toFixed(2));
      recalculateCart();
      $(this).fadeIn(fadeTime);
    });
  });
  recalculateCart();
}

/* Remove item from cart */
function removeItem(removeButton)
{
  /* Remove row from DOM and recalc cart total */
  var productRow = $(removeButton).parent().parent();
  productRow.slideUp(fadeTime, function() {
    productRow.remove();
    recalculateCart();
  });
}

/* ---Shopping header--- */
.shoppingBasket {
    float: left;
    width: 90%;
    padding:0 40px;
    font-size: 14px;
}
.shoppingBasket-labels {
    width: 100%;
    float: left;
    border-bottom: 2px solid #999999;
    padding: 0 15px;
}
.shoppingBasket-labels__productTitle {
    width: 55%;
    float: left;
}
.shoppingBasket-labels__productPrice {
    width: 15%;
    float: left;
}
.shoppingBasket-labels__productQty {
    width: 15%;
    float: left;
}
.shoppingBasket-labels__productCost {
    width: 15%;
    float: left;
    text-align: right;
}

/* ---Shopping items--- */
.shoppingBasket-items {
    width: 100%;
    float: left;
    padding: 8px 15px;
    line-height: 26px;
    position: relative;
}
.shoppingBasket-items:nth-child(odd) {
    background-color:#dddddd;
}
.shoppingBasket-items:nth-child(even) {
    background-color:transparent;
}
.shoppingBasket-items__title {
    width: 55%;
    float: left;
}
.shoppingBasket-items__price {
    width: 15%;
    float: left;
    text-align: center;
}
.shoppingBasket-items__qty {
    width: 15%;
    float: left;
    text-align: center;
}
.shoppingBasket-items__qty > input{
    width: 40px;
    text-align: right;
    min-height: 26px;
}
.shoppingBasket-items__cost {
    width: 15%;
    float: left;
    text-align: right;
}
.remove-item {
    position: absolute;
    right: -40px;
    top: 50%;
    margin-top: -5px;
    cursor: pointer;
}
.remove-item > svg {
    width: 1em;
    height: 1em;
  }
  .quantity {
      display: inline-block;
      vertical-align: middle;
  }
  .quantity > span {
    color: #fff;
    background: #999999;
    display: block;
    padding: 0 4px;
    font-size: 10px;
    cursor: pointer;
    line-height: normal;
}
.quantity > span:hover{
    background: #333333;
}
.quantity > span:first-child{
    margin-bottom: 1px;
}
  .remove-item > svg path{
    fill: #030368;
  }
  
.shoppingBasket-subtotal,
.shoppingBasket-vat,
.shoppingBasket-total,
.shoppingBasket-checkout {
    width: 100%;
    float: left;
    padding: 0 15px;
}
.shoppingBasket-subtotal__label,
.shoppingBasket-vat__label,
.shoppingBasket-total__label {
    width: 85%;
    float: left;
}
.shoppingBasket-subtotal__cost,
.shoppingBasket-vat__cost,
.shoppingBasket-total__cost {
    width: 15%;
    float: left;
    text-align: right;
}
.shoppingBasket-checkout .btn-checkout {
    float: right;
    background: #000066;
    border: 0;
    padding: 8px 12px;
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;
    border-radius: 6px;
    box-shadow: 1px 2px 6px 1px rgba(0,0,0,0.45);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="shoppingBasket">
            <div class="shoppingBasket-labels">
                <div class="shoppingBasket-labels__productTitle">Product</div>
                <div class="shoppingBasket-labels__productPrice text-center">Price</div>
                <div class="shoppingBasket-labels__productQty text-center">Qty</div>
                <div class="shoppingBasket-labels__productCost text-center">Cost</div>
            </div>
            <div class="shoppingBasket-items">
                <div class="shoppingBasket-items__title">Cotton T-Shirt, Medium</div>
                <div class="shoppingBasket-items__price">1.99</div>
                <div class="shoppingBasket-items__qty">
                    <input type="text" value="1">
                    <div class="quantity">
                        <span class="quantity-increse">+</span>
                        <span class="quantity-decrease">-</span>
                    </div>
                </div>
                <div class="shoppingBasket-items__cost">
                    1.99 
                </div>
                <span class="remove-item">
                        <svg viewBox="0 0 20 20">
                                <path fill="none" d="M7.083,8.25H5.917v7h1.167V8.25z M18.75,3h-5.834V1.25c0-0.323-0.262-0.583-0.582-0.583H7.667
                                    c-0.322,0-0.583,0.261-0.583,0.583V3H1.25C0.928,3,0.667,3.261,0.667,3.583c0,0.323,0.261,0.583,0.583,0.583h1.167v14
                                    c0,0.644,0.522,1.166,1.167,1.166h12.833c0.645,0,1.168-0.522,1.168-1.166v-14h1.166c0.322,0,0.584-0.261,0.584-0.583
                                    C19.334,3.261,19.072,3,18.75,3z M8.25,1.833h3.5V3h-3.5V1.833z M16.416,17.584c0,0.322-0.262,0.583-0.582,0.583H4.167
                                    c-0.322,0-0.583-0.261-0.583-0.583V4.167h12.833V17.584z M14.084,8.25h-1.168v7h1.168V8.25z M10.583,7.083H9.417v8.167h1.167V7.083
                                    z"></path>
                        </svg>
                </span>
            </div>
            <div class="shoppingBasket-items">
                <div class="shoppingBasket-items__title">Baseball Cap, One Size</div>
                <div class="shoppingBasket-items__price">2.99</div>
                <div class="shoppingBasket-items__qty">
                    <input type="text" value="1">
                    <div class="quantity">
                        <span class="quantity-increse">+</span>
                        <span class="quantity-decrease">-</span>
                    </div>
                </div>
                <div class="shoppingBasket-items__cost">
                    2.99 
                </div>
                <span class="remove-item">
                        <svg viewBox="0 0 20 20">
                                <path fill="none" d="M7.083,8.25H5.917v7h1.167V8.25z M18.75,3h-5.834V1.25c0-0.323-0.262-0.583-0.582-0.583H7.667
                                    c-0.322,0-0.583,0.261-0.583,0.583V3H1.25C0.928,3,0.667,3.261,0.667,3.583c0,0.323,0.261,0.583,0.583,0.583h1.167v14
                                    c0,0.644,0.522,1.166,1.167,1.166h12.833c0.645,0,1.168-0.522,1.168-1.166v-14h1.166c0.322,0,0.584-0.261,0.584-0.583
                                    C19.334,3.261,19.072,3,18.75,3z M8.25,1.833h3.5V3h-3.5V1.833z M16.416,17.584c0,0.322-0.262,0.583-0.582,0.583H4.167
                                    c-0.322,0-0.583-0.261-0.583-0.583V4.167h12.833V17.584z M14.084,8.25h-1.168v7h1.168V8.25z M10.583,7.083H9.417v8.167h1.167V7.083
                                    z"></path>
                        </svg>
                </span>
            </div>
            <div class="shoppingBasket-items">
                <div class="shoppingBasket-items__title">Cotton T-Shirt, Medium</div>
                <div class="shoppingBasket-items__price">3.99</div>
                <div class="shoppingBasket-items__qty">
                    <input type="text" value="1">
                    <div class="quantity">
                        <span class="quantity-increse">+</span>
                        <span class="quantity-decrease">-</span>
                    </div>
                </div>
                <div class="shoppingBasket-items__cost">
                    3.99 
                </div>
                <span class="remove-item">
                        <svg viewBox="0 0 20 20">
                                <path fill="none" d="M7.083,8.25H5.917v7h1.167V8.25z M18.75,3h-5.834V1.25c0-0.323-0.262-0.583-0.582-0.583H7.667
                                    c-0.322,0-0.583,0.261-0.583,0.583V3H1.25C0.928,3,0.667,3.261,0.667,3.583c0,0.323,0.261,0.583,0.583,0.583h1.167v14
                                    c0,0.644,0.522,1.166,1.167,1.166h12.833c0.645,0,1.168-0.522,1.168-1.166v-14h1.166c0.322,0,0.584-0.261,0.584-0.583
                                    C19.334,3.261,19.072,3,18.75,3z M8.25,1.833h3.5V3h-3.5V1.833z M16.416,17.584c0,0.322-0.262,0.583-0.582,0.583H4.167
                                    c-0.322,0-0.583-0.261-0.583-0.583V4.167h12.833V17.584z M14.084,8.25h-1.168v7h1.168V8.25z M10.583,7.083H9.417v8.167h1.167V7.083
                                    z"></path>
                        </svg>
                </span>
            </div>
            <div class="shoppingBasket-subtotal grey mar-top-40">
                <div class="shoppingBasket-subtotal__label">Subtotal</div>
                <div class="shoppingBasket-subtotal__cost" id="cart-subtotal"></div>
            </div>
            <div class="shoppingBasket-vat grey mar-bot-40">
                <div class="shoppingBasket-vat__label">VAT @ 20%</div>
                <div class="shoppingBasket-vat__cost" id="cart-tax"></div>
            </div>
            <div class="shoppingBasket-total mar-bot-40">
                <div class="shoppingBasket-total__label"><strong> Total Cost</strong></div>
                <div class="shoppingBasket-total__cost" id="cart-total"></div>
            </div>
            <div class="shoppingBasket-checkout">
                <button class="btn-checkout">Buy Now >></button>
            </div>
        </div>

Santu Roy · Answer 1 · 25 октября 2018

В функции recalculateCart () вам нужно умножить цену на количество.Вот решение:

var taxRate = 0.2;
//var shippingRate = 15.00; 
var fadeTime = 300;


/* Assign actions */
$('.shoppingBasket-items__qty input').change( function() {
  updateQuantity(this);
  recalculateCart();
});
$('.remove-item').click( function() {
  removeItem(this);
});


/* Recalculate cart */
function recalculateCart() {
  var subtotal = 0;
  
  /* Sum up row totals */
  $('.shoppingBasket-items').each(function () {
    subtotal += (parseFloat($(this).children('.shoppingBasket-items__price').text()) * $(this).children('.shoppingBasket-items__qty').find('[type="text"]').val());
  });
  
  /* Calculate Sub-totals */
  var tax = subtotal * taxRate;
  var total = subtotal + tax;

  /* Calculate totals */
  var tax = subtotal * taxRate;
  var total = subtotal + tax;

  /* Update totals display */
  $('.shoppingBasket-total__cost').fadeIn(fadeTime, function() {
    $('#cart-subtotal').html(subtotal.toFixed(2));
    $('#cart-tax').html(tax.toFixed(2));
    //$('#cart-shipping').html(shipping.toFixed(2));
    $('#cart-total').html(total.toFixed(2));
    if(total == 0){
      $('.checkout').fadeOut(fadeTime);
    }else{
      $('.checkout').fadeIn(fadeTime);
    }
    $('.totals-value').fadeIn(fadeTime);
  });
}
recalculateCart();

/* Update quantity */
function updateQuantity(quantityInput)
{
  /* Calculate line price */
  var productRow = $(quantityInput).parent().parent();
  var price = parseFloat(productRow.children('.shoppingBasket-items__cost').text());
  var quantity = $(quantityInput).val();
  var linePrice = price * quantity;
  
  /* Update line price display and recalc cart totals */
  productRow.children('.shoppingBasket-items__cost').each(function () {
    $(this).fadeOut(fadeTime, function() {
      $(this).text(linePrice.toFixed(2));
      recalculateCart();
      $(this).fadeIn(fadeTime);
    });
  });
  recalculateCart();
}

/* Remove item from cart */
function removeItem(removeButton)
{
  /* Remove row from DOM and recalc cart total */
  var productRow = $(removeButton).parent().parent();
  productRow.slideUp(fadeTime, function() {
    productRow.remove();
    recalculateCart();
  });
}

/* ---Shopping header--- */
.shoppingBasket {
    float: left;
    width: 90%;
    padding:0 40px;
    font-size: 14px;
}
.shoppingBasket-labels {
    width: 100%;
    float: left;
    border-bottom: 2px solid #999999;
    padding: 0 15px;
}
.shoppingBasket-labels__productTitle {
    width: 55%;
    float: left;
}
.shoppingBasket-labels__productPrice {
    width: 15%;
    float: left;
}
.shoppingBasket-labels__productQty {
    width: 15%;
    float: left;
}
.shoppingBasket-labels__productCost {
    width: 15%;
    float: left;
    text-align: right;
}

/* ---Shopping items--- */
.shoppingBasket-items {
    width: 100%;
    float: left;
    padding: 8px 15px;
    line-height: 26px;
    position: relative;
}
.shoppingBasket-items:nth-child(odd) {
    background-color:#dddddd;
}
.shoppingBasket-items:nth-child(even) {
    background-color:transparent;
}
.shoppingBasket-items__title {
    width: 55%;
    float: left;
}
.shoppingBasket-items__price {
    width: 15%;
    float: left;
    text-align: center;
}
.shoppingBasket-items__qty {
    width: 15%;
    float: left;
    text-align: center;
}
.shoppingBasket-items__qty > input{
    width: 40px;
    text-align: right;
    min-height: 26px;
}
.shoppingBasket-items__cost {
    width: 15%;
    float: left;
    text-align: right;
}
.remove-item {
    position: absolute;
    right: -40px;
    top: 50%;
    margin-top: -5px;
    cursor: pointer;
}
.remove-item > svg {
    width: 1em;
    height: 1em;
  }
  .quantity {
      display: inline-block;
      vertical-align: middle;
  }
  .quantity > span {
    color: #fff;
    background: #999999;
    display: block;
    padding: 0 4px;
    font-size: 10px;
    cursor: pointer;
    line-height: normal;
}
.quantity > span:hover{
    background: #333333;
}
.quantity > span:first-child{
    margin-bottom: 1px;
}
  .remove-item > svg path{
    fill: #030368;
  }
  
.shoppingBasket-subtotal,
.shoppingBasket-vat,
.shoppingBasket-total,
.shoppingBasket-checkout {
    width: 100%;
    float: left;
    padding: 0 15px;
}
.shoppingBasket-subtotal__label,
.shoppingBasket-vat__label,
.shoppingBasket-total__label {
    width: 85%;
    float: left;
}
.shoppingBasket-subtotal__cost,
.shoppingBasket-vat__cost,
.shoppingBasket-total__cost {
    width: 15%;
    float: left;
    text-align: right;
}
.shoppingBasket-checkout .btn-checkout {
    float: right;
    background: #000066;
    border: 0;
    padding: 8px 12px;
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;
    border-radius: 6px;
    box-shadow: 1px 2px 6px 1px rgba(0,0,0,0.45);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="shoppingBasket">
            <div class="shoppingBasket-labels">
                <div class="shoppingBasket-labels__productTitle">Product</div>
                <div class="shoppingBasket-labels__productPrice text-center">Price</div>
                <div class="shoppingBasket-labels__productQty text-center">Qty</div>
                <div class="shoppingBasket-labels__productCost text-center">Cost</div>
            </div>
            <div class="shoppingBasket-items">
                <div class="shoppingBasket-items__title">Cotton T-Shirt, Medium</div>
                <div class="shoppingBasket-items__price">1.99</div>
                <div class="shoppingBasket-items__qty">
                    <input type="text" value="1">
                    <div class="quantity">
                        <span class="quantity-increse">+</span>
                        <span class="quantity-decrease">-</span>
                    </div>
                </div>
                <div class="shoppingBasket-items__cost">
                    1.99 
                </div>
                <span class="remove-item">
                        <svg viewBox="0 0 20 20">
                                <path fill="none" d="M7.083,8.25H5.917v7h1.167V8.25z M18.75,3h-5.834V1.25c0-0.323-0.262-0.583-0.582-0.583H7.667
                                    c-0.322,0-0.583,0.261-0.583,0.583V3H1.25C0.928,3,0.667,3.261,0.667,3.583c0,0.323,0.261,0.583,0.583,0.583h1.167v14
                                    c0,0.644,0.522,1.166,1.167,1.166h12.833c0.645,0,1.168-0.522,1.168-1.166v-14h1.166c0.322,0,0.584-0.261,0.584-0.583
                                    C19.334,3.261,19.072,3,18.75,3z M8.25,1.833h3.5V3h-3.5V1.833z M16.416,17.584c0,0.322-0.262,0.583-0.582,0.583H4.167
                                    c-0.322,0-0.583-0.261-0.583-0.583V4.167h12.833V17.584z M14.084,8.25h-1.168v7h1.168V8.25z M10.583,7.083H9.417v8.167h1.167V7.083
                                    z"></path>
                        </svg>
                </span>
            </div>
            <div class="shoppingBasket-items">
                <div class="shoppingBasket-items__title">Baseball Cap, One Size</div>
                <div class="shoppingBasket-items__price">2.99</div>
                <div class="shoppingBasket-items__qty">
                    <input type="text" value="1">
                    <div class="quantity">
                        <span class="quantity-increse">+</span>
                        <span class="quantity-decrease">-</span>
                    </div>
                </div>
                <div class="shoppingBasket-items__cost">
                    2.99 
                </div>
                <span class="remove-item">
                        <svg viewBox="0 0 20 20">
                                <path fill="none" d="M7.083,8.25H5.917v7h1.167V8.25z M18.75,3h-5.834V1.25c0-0.323-0.262-0.583-0.582-0.583H7.667
                                    c-0.322,0-0.583,0.261-0.583,0.583V3H1.25C0.928,3,0.667,3.261,0.667,3.583c0,0.323,0.261,0.583,0.583,0.583h1.167v14
                                    c0,0.644,0.522,1.166,1.167,1.166h12.833c0.645,0,1.168-0.522,1.168-1.166v-14h1.166c0.322,0,0.584-0.261,0.584-0.583
                                    C19.334,3.261,19.072,3,18.75,3z M8.25,1.833h3.5V3h-3.5V1.833z M16.416,17.584c0,0.322-0.262,0.583-0.582,0.583H4.167
                                    c-0.322,0-0.583-0.261-0.583-0.583V4.167h12.833V17.584z M14.084,8.25h-1.168v7h1.168V8.25z M10.583,7.083H9.417v8.167h1.167V7.083
                                    z"></path>
                        </svg>
                </span>
            </div>
            <div class="shoppingBasket-items">
                <div class="shoppingBasket-items__title">Cotton T-Shirt, Medium</div>
                <div class="shoppingBasket-items__price">3.99</div>
                <div class="shoppingBasket-items__qty">
                    <input type="text" value="1">
                    <div class="quantity">
                        <span class="quantity-increse">+</span>
                        <span class="quantity-decrease">-</span>
                    </div>
                </div>
                <div class="shoppingBasket-items__cost">
                    3.99 
                </div>
                <span class="remove-item">
                        <svg viewBox="0 0 20 20">
                                <path fill="none" d="M7.083,8.25H5.917v7h1.167V8.25z M18.75,3h-5.834V1.25c0-0.323-0.262-0.583-0.582-0.583H7.667
                                    c-0.322,0-0.583,0.261-0.583,0.583V3H1.25C0.928,3,0.667,3.261,0.667,3.583c0,0.323,0.261,0.583,0.583,0.583h1.167v14
                                    c0,0.644,0.522,1.166,1.167,1.166h12.833c0.645,0,1.168-0.522,1.168-1.166v-14h1.166c0.322,0,0.584-0.261,0.584-0.583
                                    C19.334,3.261,19.072,3,18.75,3z M8.25,1.833h3.5V3h-3.5V1.833z M16.416,17.584c0,0.322-0.262,0.583-0.582,0.583H4.167
                                    c-0.322,0-0.583-0.261-0.583-0.583V4.167h12.833V17.584z M14.084,8.25h-1.168v7h1.168V8.25z M10.583,7.083H9.417v8.167h1.167V7.083
                                    z"></path>
                        </svg>
                </span>
            </div>
            <div class="shoppingBasket-subtotal grey mar-top-40">
                <div class="shoppingBasket-subtotal__label">Subtotal</div>
                <div class="shoppingBasket-subtotal__cost" id="cart-subtotal"></div>
            </div>
            <div class="shoppingBasket-vat grey mar-bot-40">
                <div class="shoppingBasket-vat__label">VAT @ 20%</div>
                <div class="shoppingBasket-vat__cost" id="cart-tax"></div>
            </div>
            <div class="shoppingBasket-total mar-bot-40">
                <div class="shoppingBasket-total__label"><strong> Total Cost</strong></div>
                <div class="shoppingBasket-total__cost" id="cart-total"></div>
            </div>
            <div class="shoppingBasket-checkout">
                <button class="btn-checkout">Buy Now >></button>
            </div>
        </div>

Расчет корзины покупок с помощью JQuery

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Расчет корзины покупок с помощью JQuery

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы