Come mostrare un messaggio mentre WooCommerce elabora un ordine

				
					/**
 * Mostra un messaggio mentre WooCommerce elabora l’ordine.
 *
 * Il messaggio appare solo quando il modulo è valido.
 *
 * Compatibile con:
 * - Checkout a blocchi di WooCommerce
 * - Checkout classico di WooCommerce
 */

add_action( 'wp_footer', function () {

	// Carica solo nella pagina di checkout.
	if (
		! function_exists( 'is_checkout' ) ||
		! is_checkout() ||
		is_order_received_page()
	) {
		return;
	}
	?>

	<div
		id="order-processing-message"
		aria-hidden="true"
	>
		<div class="order-processing-box">

			<div class="order-processing-spinner"></div>

			<h3>
				<!-- Puoi modificare questo titolo -->
				Attendi mentre elaboriamo il tuo ordine
			</h3>

			<p>
				<!-- Puoi modificare questo messaggio -->
				Non ricaricare né chiudere questa pagina.
			</p>

		</div>
	</div>

	<style>

		/* Livello che copre l’intero schermo */
		#order-processing-message {
			position: fixed;
			inset: 0;
			z-index: 999999;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20px;
			background: rgba(0, 0, 0, 0.45);
			opacity: 0;
			visibility: hidden;
			pointer-events: none;
			transition:
				opacity 0.2s ease,
				visibility 0.2s ease;
		}

		#order-processing-message.show {
			opacity: 1;
			visibility: visible;
			pointer-events: auto;
		}

		/* Riquadro del messaggio */
		.order-processing-box {
			width: 100%;
			max-width: 440px;
			padding: 32px 24px;
			border-radius: 10px;
			background: #ffffff;
			color: #222222;
			text-align: center;
			box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
		}

		.order-processing-box h3 {
			margin: 0 0 10px;
			font-size: 20px;
			font-weight: 600;
			line-height: 1.4;
		}

		.order-processing-box p {
			margin: 0;
			color: #666666;
			font-size: 15px;
			line-height: 1.5;
		}

		/* Indicatore di caricamento */
		.order-processing-spinner {
			width: 36px;
			height: 36px;
			margin: 0 auto 20px;
			border: 4px solid #dddddd;
			border-top-color: #555555;
			border-radius: 50%;
			animation: order-processing-spin 0.8s linear infinite;
		}

		@keyframes order-processing-spin {
			to {
				transform: rotate(360deg);
			}
		}

	</style>

	<script>
	(function () {

		const overlay = document.getElementById(
			'order-processing-message'
		);

		if (!overlay) {
			return;
		}

		let safetyTimer;

		/**
		 * Controlla se WooCommerce ha rilevato errori.
		 */
		function checkoutHasErrors() {

			return Boolean(
				document.querySelector(
					/*
					 * Campi HTML obbligatori o non validi.
					 * Include la casella dei termini.
					 */
					'.wc-block-checkout :invalid,' +
					'form.checkout :invalid,' +

					/*
					 * Campi contrassegnati come non validi
					 * tramite gli attributi di accessibilità.
					 */
					'.wc-block-checkout [aria-invalid="true"],' +
					'form.checkout [aria-invalid="true"],' +

					/*
					 * Errori del checkout a blocchi.
					 */
					'.wc-block-components-validation-error,' +
					'.wc-block-components-notice-banner.is-error,' +
					'.wc-block-store-notice.is-error,' +

					/*
					 * Errori del checkout classico.
					 */
					'.woocommerce-error'
				)
			);
		}

		/**
		 * Mostra l’avviso.
		 */
		function showProcessingMessage() {

			overlay.classList.add('show');
			overlay.setAttribute('aria-hidden', 'false');

			/*
			 * Misura di sicurezza:
			 * se WooCommerce non risponde, l’avviso si chiuderà
			 * automaticamente dopo 60 secondi.
			 */
			clearTimeout(safetyTimer);

			safetyTimer = setTimeout(
				hideProcessingMessage,
				60000
			);
		}

		/**
		 * Nascondi l’avviso.
		 */
		function hideProcessingMessage() {

			overlay.classList.remove('show');
			overlay.setAttribute('aria-hidden', 'true');

			clearTimeout(safetyTimer);
		}

		/**
		 * Rileva il pulsante per effettuare l’ordine.
		 */
		document.addEventListener(
			'click',
			function (event) {

				const button = event.target.closest(
					'.wc-block-components-checkout-place-order-button, #place_order'
				);

				if (!button || button.disabled) {
					return;
				}

				/*
				 * Attendi che WooCommerce convalidi i campi.
				 *
				 * Se mancano i termini o un campo non è
				 * valido, WooCommerce mostrerà l’errore
				 * durante questo intervallo.
				 */
				setTimeout(function () {

					if (checkoutHasErrors()) {
						hideProcessingMessage();
						return;
					}

					showProcessingMessage();

				}, 400);

			},
			true
		);

		/**
		 * Se WooCommerce mostra successivamente un errore,
		 * nascondi immediatamente l’avviso.
		 */
		const observer = new MutationObserver(function () {

			if (checkoutHasErrors()) {
				hideProcessingMessage();
			}

		});

		observer.observe(
			document.body,
			{
				childList: true,
				subtree: true,
				attributes: true,
				attributeFilter: [
					'aria-invalid',
					'class'
				]
			}
		);

		/**
		 * Nascondi l’avviso tornando con il pulsante
		 * Indietro del browser.
		 */
		window.addEventListener(
			'pageshow',
			hideProcessingMessage
		);

	})();
	</script>

	<?php
}, 100 );