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>

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

1 个答案: