在 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>