Добавьте спиннер в кнопки «Добавить в корзину» и «Разместить заказ» в 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

Лучшим решением было бы использовать Обещание , чтобы остановить вертушку в нужный момент.Поскольку я не очень разбираюсь в 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>