在 WooCommerce 中添加微调器以添加到购物篮和下订单按钮

Question

我正在对产品使用上传选项，并希望在最终结帐页面的“添加到购物车”按钮和“下订单”按钮上都显示一个微调器。 下面的代码是一个微调器，但我不确定要使用哪个类或如何触发它（PHP 或 jQuery）

这是示例主题：

https://demo.themeisle.com/hestia/product/mens-classic-regular-fit-jean/

/* 
* Custom AJAX spinner on WooCommerce checkout 
* The class used to load the overlay is .blockUI .blockOverlay
* The class used to load the spinner is .woocommerce .loader:before
*
*/
.woocommerce .blockUI.blockOverlay:before,.woocommerce .loader:before {
  height: 3em;
  width: 3em;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -.5em;
  margin-top: -.5em;
  display: block;
  content: "";
  -webkit-animation: none;
  -moz-animation: none;
  animation: none;
  background: url('https://loading.io/spinners/spin/lg.ajax-spinner-gif.gif') center center;
  background-size: cover;
  line-height: 1;
  text-align: center;
  font-size: 2em;
}

这是按钮的 HTML 代码

/* Checkout Button */
<button type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="Place order" data-value="Place order">Place order</button>

/* Add to basket Button */
<button type="submit" name="add-to-cart" value="15" class="single_add_to_cart_button button alt">Add to basket</button>

或者甚至使用 Font Awesome，而不是托管的 gif？小问题是它需要在实际添加到购物车时触发，而不是在单击时触发，并且可能未填写选项。

Answer 1

最好的解决方案是使用Promise 在正确的时刻停止微调器。由于我对 WooCommerce 不是很有经验，也许以下解决方案可以帮助您：

$('.button').on('click', () => {
$('.loading').show();
setTimeout(() => {
	$('.loading').hide();
}, 1000); // Stop the spinner after 1 second
})

.loading {
  height: 3em;
  width: 3em;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -.5em;
  margin-top: -.5em;
  display: none;
  content: "";
  -webkit-animation: none;
  -moz-animation: none;
  animation: none;
  background: url('https://loading.io/spinners/spin/lg.ajax-spinner-gif.gif') center center;
  background-size: cover;
  line-height: 1;
  text-align: center;
  font-size: 2em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
/* Checkout Button */
<button type="submit" class="button alt test" name="woocommerce_checkout_place_order" id="place_order" value="Place order" data-value="Place order">Place order</button>

/* Add to basket Button */
<button type="submit" name="add-to-cart" value="15" class="single_add_to_cart_button button alt">Add to basket</button>

<div class="loading"></div>