Question

这是我第一次尝试创建购物车的功能，所以我仍然掌握了这一点。

虽然我可以在购物车中添加商品，但我无法添加另一个商品，因为在选择商品时，购物车上的现有商品已被删除，因此我只需将其替换为另一商品。

如何将商品添加到购物车并更新总价？

我在下方制作了一个jsfiddle，但我也会在这里发布代码：

HTML

<main>
  <section id="is-shopContainer">
<article id="section-shop">
  <h2>Online Shop</h2>
  <p>Articles available.</p>      
  <ol>
    <li>
      <div>
        <h3>FlipFlops</h3>
        <p>Beach shoes.</p>
      </div>
      <footer>
        <p>&euro;5</p>
        <button data-shop-listing='{"name": "FlipFlops", "description": "FlipFlops", "price": 5.00}'>Add to cart</button>
      </footer>
    </li>
    <li>
      <div>
        <h3>Raquet</h3>
        <p>Play it</p>
      </div>
      <footer>
        <p>&euro;12.99</p>
        <button data-shop-listing='{"name": "Raquet", "description": "Play the Raquet", "price": 12.99}'>Add to cart</button>
      </footer>
    </li>
    <li>
      <div>
        <h3>Balls</h3>
        <p>Raquet balls.</p>
      </div>
      <footer>
        <p>&euro;9.99</p>
        <button data-shop-listing='{"name": "Balls", "description": "Balls.", "price": 9.99}'>Add to cart</button>
      </footer>
    </li>
    <li>
      <div>
        <h3>Buoy</h3>
        <p>A buoy</p>
      </div>
      <footer>
        <p>&euro;2.50</p>
        <button data-shop-listing='{"name": "Buoy", "description": "A buoy", "price": 5.50}'>Add to cart</button>
      </footer>
    </li>
  </ol>
</article>
  </section>
<article id="section-shoppingcart">
  <h2>Your shopping cart</h2>
  <p>&hellip;is empty.</p>
  <form id="shoppingcart-form">
    <table>
      <thead>
        <tr>
          <th>Product</th>
          <th>Price</th>
          <th>Quantity</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <h3></h3>
            <p></p>
            <div>
              <button>Remove</button>
            </div>
          </td>
          <td>
            <output></output>
          </td>
          <td>
            <input type="number" min="1" value="1">
            <span>
            <button type="button" aria-label="decrease">
            -
            </button>
            <button type="button" aria-label="step up">
            +
            </button>
            </span>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">
            <ol>
              <li>
                <label>Price before <abbr title="Value Added Tax">VAT</abbr>:</label>
                <output></output>
              </li>
              <li>
                <label><abbr title="Value Added Tax">VAT</abbr> @ <strong>20</strong>%:</label>
                <output></output>
              </li>
              <li>
                <label>Total to be paid:</label>
                <output></output>
              </li>
            </ol>
          </td>
        </tr>
      </tfoot>
    </table>
    <footer>
      <p>            
      </p>
      <a href="#"></a> <button type="submit" form="shoppingcart-form">Proceed to Checkout</button>
    </footer>
  </form>
</article>

和jQuery

$(document).ready(function(){

//add items to cart           
 var itemData = $('#section-shop button').each(function(){
    var productName = $(this).data('shop-listing').name;
    var productDescription = $(this).data('shop-listing').description;
    var productPrice = $(this).data('shop-listing').price; 

$(this).on('click', function(product, description, price){                         
    $('#shoppingcart-form tbody tr td h3').text(productName);
    $('#shoppingcart-form tbody tr td p').text(productDescription);
    $('#shoppingcart-form output').text('€'+ productPrice);

//get input label to increase/decrease number
var inp = $('#shoppingcart-form tbody tr td:last-child input').val();
var inpVal = parseFloat(inp);  

var holdPrice = $('#shoppingcart-form tfoot ol li:first-child output');
var holdVat = $('#shoppingcart-form tfoot ol li:nth-child(2) output');
var holdTotal = $('#shoppingcart-form tfoot ol li:last-child output');

//increase/decrease price
var price = productPrice;

$('#shoppingcart-form table td span button:first-child').on('click', function(){               
var qty = price / inpVal;
holdPrice.text(qty);
});            

$('#shoppingcart-form table td span button:last-child').on('click',function(){
 var qty = price * inpVal;
 holdPrice.text(qty);
});

//print product price
holdPrice.text(price);             

//add and print VAT + product price
var VAT = 20/100 * price;
holdVat.text('€' + VAT.toFixed(2));

//Total Price with VAT
var total = VAT + price;

//print total price
holdTotal.text('€' + total.toFixed(2));    

//new price after item removed
$('#shoppingcart-form table tbody div button').click(function(e) {
    e.preventDefault();
    $('#shoppingcart-form tbody tr td h3').empty();
    $('#shoppingcart-form tbody tr td p').empty();
    $('#shoppingcart-form output').empty();
    total--; 
    });
});
});

//show/hide shopping cart when first item is choosen or is empty
var shoppingCart = $('#section-shoppingcart');

if(shoppingCart.has(itemData).length > 0) {
   $(this).css('opacity', 1);
} else {
   $(this).css('opacity', 0);
}

//Checkout button inactive
$('#shoppingcart-form footer button').on('click', function(e){
    e.preventDefault();
    $(this).attr('disabled', 'disabled').prop('disabled', true).css('opacity', '0.5');
   $(this).text('Sending your order');        
});
});

任何帮助将不胜感激。

Answer 1

//add VAT
var VAT = totalPrice * 20/100;
VAT.appendTo('#shoppingcart-form tfoot ol li:nth-child(2) output');

//Total Price with VAT
var total = VAT;

//print total price
total.appendTo('#shoppingcart-form tfoot ol li:last-child output');

此处VAT和total是数字，没有Number.appendTo方法。也许你的意思相反？

//add VAT
var VAT = totalPrice * 20/100;
$('#shoppingcart-form tfoot ol li:nth-child(2) output').append(VAT);

//Total Price with VAT
var total = VAT;

//print total price
$('#shoppingcart-form tfoot ol li:last-child output').append(total);

使用jQuery将商品添加到购物车

1 个答案: