我目前正在为客户建立一个网站,他们要求购买至少6件商品。因此,如果客户只有5件商品并单击结帐,则需要警告他们至少必须有6件商品。我目前有一个Java代码alert
来警告它们,但这不允许定制。我一直在寻找添加Bootstrap Modal的方法,但无法解决此问题。
这是到目前为止我得到的代码:
<script>
paypal.minicart.render();
paypal.minicart.cart.on('checkout', function (evt) {
var items = this.items(),
len = items.length,
total = 0,
i;
// Count the number of each item in the cart
for (i = 0; i < len; i++) {
total += items[i].get('quantity');
}
if (total < 6) {
alert('The minimum order quantity is:\n\n3 Cases of Beer\n6 Bottles of Wine\n6 Bottles of Spirits.\n\nPlease add more to your shopping cart before checking out');
evt.preventDefault();
}
});
</script>
最佳答案
http://jsfiddle.net/SeanWessell/4z16m6k4/
您需要为模态添加标记。
HTML:
<!-- Modal -->
<div class="modal fade" id="cartMessage" tabindex="-1" role="dialog" aria-labelledby="cartMessageLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="cartMessageLabel">Minimum Order Requirements Not Met</h4>
</div>
<div class="modal-body">The minimum order quantity is:
<ul>
<li>3 Cases of Beer</li>
<li>6 Bottles of Wine</li>
<li>6 Bottles of Spirits.</li>
</ul>Please add more to your shopping cart before checking out</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
然后,您需要在满足条件时触发模态。
$('#checkout').on('click', function (evt) {
var total = 5
if (total < 6) {
$('#cartMessage').modal()
evt.preventDefault();
}
});