我知道这些例子有所不同,但那是因为js正在混淆但是如果在两个例子中都显示了桶并且显示了我遇到的问题....
第一个示例vat很好,但是第二个你看到它显示为0.20并且我认为当超过1000时没有正常工作....任何人都知道为什么超过1000时不能正确计算20%?
$(document).ready(function() {
// Hide initial values that need updating
$("#estimated-shipping em, .cart-finalTotal span, .cart-vat span").hide();
// get current delivery rate
$("#get_rate").trigger('click');
// set a timeout and get total and shipping that was generated and add together for nnew total
setTimeout(function() {
// get cart sub-total
var a = $(".cart-total span").text().replace(/\$|£/gi, "");
// get estimated shipping cost
var b = $("#estimated-shipping em").text().replace(/\$|£/, '');
if (b == "FREE") {
b = "0.00"
var isFree = "true";
} else {
b = $("#estimated-shipping em").text().replace(/\$|£/, '');
}
// add together sub-total and estimated shipping to new total
var total = a + b;
total = parseFloat(total.replace(/,/g, ''));
//add the currency with £ (not sure why it was setting $ before)
if (isFree == "true") {
$("#estimated-shipping em").html("FREE");
} else {
$("#estimated-shipping em").html("£" + b);
}
// update with new total with sub-total and added shipping
$('.cart-finalTotal span').html("£" + total.toFixed(2).replace(/(^\d{1,3}|\d{3})(?=(?:\d{3})+(?:$|\.))/g, '$1,'));
// show new values
$("#estimated-shipping em, .cart-finalTotal span, .cart-vat span").show();
}, 2000);
$(".item-quantity input").on("change", function() {
// let initially disable the input to avoid problems
$(".item-quantity input").prop("disabled", true);
// gets auto get rates based on a UK address
$("#get_rate").trigger('click');
$("#estimated-shipping em, .cart-finalTotal span, .cart-vat span").hide();
setTimeout(function() {
var a = $(".cart-total span").text().replace(/\$|£/gi, "");
// get estimated shipping cost
var b = $("#estimated-shipping em").text().replace(/\$|£/, '');
if (b == "FREE") {
b = "0.00"
var isFree = "true";
} else {
b = $("#estimated-shipping em").text().replace(/\$|£/, '');
}
// add together sub-total and estimated shipping to new total
var total = a + b;
total = parseFloat(total.replace(/,/g, ''));
//add the currency with £ (not sure why it was setting $ before)
if (isFree == "true") {
$("#estimated-shipping em").html("FREE");
} else {
$("#estimated-shipping em").html("£" + b);
}
// update with new total with sub-total and added shipping
$('.cart-finalTotal span').html("£" + total.toFixed(2).replace(/(^\d{1,3}|\d{3})(?=(?:\d{3})+(?:$|\.))/g, '$1,'));
// update VAT when input changed
var oldVAT = $(".cart-total span").text().replace(/\$|£/gi, "");
var newVAT = (parseFloat(oldVAT.replace(/(^\d{1,3}|\d{3})(?=(?:\d{3})+(?:$|\.))/g, '$1,')) * 20) / 100;
$(".cart-vat span").html("£" + newVAT.toFixed(2));
// show all new value updates
$("#estimated-shipping em, .cart-finalTotal span, .cart-vat span").show();
// lets enable the quantity input a gain
$(".item-quantity input").prop("disabled", false);
}, 2000);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>under 1000</h1>
<form action="/cart" method="POST">
<div class="cart-left">
<table class="cart-items">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>Sub-total</th>
<th></th>
</tr>
</thead>
<tbody>
<tr data-variant-id="16285032007">
<td class="item-details">
<a href="/products/avatar-aubergine-dream-1?variant=16285032007" class="item-thumbnail">
<img src="//cdn.shopify.com/s/files/1/1174/5686/products/Avatar-aubergine-dream_011b6ba4-8681-4969-aad2-fcfc7c83121a_small.jpeg?v=1456749751" alt="Avatar - Aubergine Dream - Cover + Bean Filling (UK only)">
</a>
<div class="item-info">
<p class="item-brand" style="width:30px;"></p>
<div class="product-brand" itemprop="brand">
<a href="/collections/vendors?q=Avatar%20Indoor">
<img src="//cdn.shopify.com/s/files/1/0911/4528/t/5/assets/logo-Avatar.jpg" style="width:100px!important">
</a>
</div>
<p></p>
<p class="item-title"><a href="/products/avatar-aubergine-dream-1?variant=16285032007">Aubergine Dream</a>
</p>
<p class="item-variant">Cover + Bean Filling (UK only)</p>
</div>
</td>
<td class="item-price">
<span class="show-mobile"> PRICE :</span>
<span class="money">£199.00</span>
</td>
<td class="item-quantity">
<input type="number" pattern="[0-9]*" maxlength="4" value="7" data-variant-id="16285032007">
</td>
<td class="item-line-price">
<span class="show-mobile">SUB-TOTAL :</span>
<span class="money" data-currency="GBP">£398.00</span>
</td>
<td class="item-remove">
<a href="/cart/change/16285032007?quantity=0"><i class="icon-cross"></i></a>
</td>
</tr>
</tbody>
</table>
<a href="/" class="cart-continue button button-primary">Continue Shopping</a>
<div class="cart-instructions">
<p>
<label for="cart-note">Add a note to your order</label>
<textarea id="cart-note" rows="4" name="note"></textarea>
</p>
</div>
</div>
<div class="cart-right">
<p class="cart-total">Sub-Total<span class="money" data-currency="GBP">£398.00</span>
</p>
<p class="cart-vat">VAT 20% (included)<span class="money" style="display: block;">£79.60</span>
</p>
<p class="cart-delivery">Delivery (estimated)<span class="money" id="estimated-shipping">+ <em style="display: inline;">£9.00</em></span>
</p>
<p class="cart-finalTotal">Total<span class="money" style="display: block;">£398.01</span>
</p>
<div class="cart-checkout">
<button class="button button-primary button-add-to-cart button-pay-now" type="submit" name="checkout"><span class="icom-lock"></span>Pay Now</button>
<br>
<br>
<div class="additional-checkout-buttons">
<p>Or checkout with</p>
<img id="applePayButton" style="display: none" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" onload="typeof createApplyPayButton === 'function' ? createApplyPayButton(this) : window.addEventListener('applePayReady', (function(){createApplyPayButton(this)}).bind(this))">
<input type="image" name="goto_pp" value="paypal_express" src="https://www.paypalobjects.com/en_US/i/btn/btn_xpressCheckout.gif">
</div>
</div>
</div>
</form>
<h1>over 1000</h1>
<form action="/cart" method="POST">
<div class="cart-left">
<table class="cart-items">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>Sub-total</th>
<th></th>
</tr>
</thead>
<tbody>
<tr data-variant-id="16285032007">
<td class="item-details">
<a href="/products/avatar-aubergine-dream-1?variant=16285032007" class="item-thumbnail">
<img src="//cdn.shopify.com/s/files/1/1174/5686/products/Avatar-aubergine-dream_011b6ba4-8681-4969-aad2-fcfc7c83121a_small.jpeg?v=1456749751" alt="Avatar - Aubergine Dream - Cover + Bean Filling (UK only)">
</a>
<div class="item-info">
<p class="item-brand" style="width:30px;"></p>
<div class="product-brand" itemprop="brand">
<a href="/collections/vendors?q=Avatar%20Indoor">
<img src="//cdn.shopify.com/s/files/1/0911/4528/t/5/assets/logo-Avatar.jpg" style="width:100px!important">
</a>
</div>
<p></p>
<p class="item-title"><a href="/products/avatar-aubergine-dream-1?variant=16285032007">Aubergine Dream</a>
</p>
<p class="item-variant">Cover + Bean Filling (UK only)</p>
</div>
</td>
<td class="item-price">
<span class="show-mobile"> PRICE :</span>
<span class="money">£199.00</span>
</td>
<td class="item-quantity">
<input type="number" pattern="[0-9]*" maxlength="4" value="7" data-variant-id="16285032007">
</td>
<td class="item-line-price">
<span class="show-mobile">SUB-TOTAL :</span>
<span class="money" data-currency="GBP">£1,194.00</span>
</td>
<td class="item-remove">
<a href="/cart/change/16285032007?quantity=0"><i class="icon-cross"></i></a>
</td>
</tr>
</tbody>
</table>
<a href="/" class="cart-continue button button-primary">Continue Shopping</a>
<div class="cart-instructions">
<p>
<label for="cart-note">Add a note to your order</label>
<textarea id="cart-note" rows="4" name="note"></textarea>
</p>
</div>
</div>
<div class="cart-right">
<p class="cart-total">Sub-Total<span class="money" data-currency="GBP">£1,194.00</span>
</p>
<p class="cart-vat">VAT 20% (included)<span class="money" style="display: block;">£0.20</span>
</p>
<p class="cart-delivery">Delivery (estimated)<span class="money" id="estimated-shipping">+ <em style="display: inline;">FREE</em></span>
</p>
<p class="cart-finalTotal">Total<span class="money" style="display: block;">£1,194.00</span>
</p>
<div class="cart-checkout">
<button class="button button-primary button-add-to-cart button-pay-now" type="submit" name="checkout"><span class="icom-lock"></span>Pay Now</button>
<br>
<br>
<div class="additional-checkout-buttons">
<p>Or checkout with</p>
<img id="applePayButton" style="display: none" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" onload="typeof createApplyPayButton === 'function' ? createApplyPayButton(this) : window.addEventListener('applePayReady', (function(){createApplyPayButton(this)}).bind(this))">
<input type="image" name="goto_pp" value="paypal_express" src="https://www.paypalobjects.com/en_US/i/btn/btn_xpressCheckout.gif">
</div>
</div>
</div>
</form>