Nachricht anzeigen, während Woo eine Bestellung verarbeitet

				
					/**
 * Zeigt eine Nachricht an, während WooCommerce die Bestellung verarbeitet.
 *
 * Die Nachricht erscheint nur, wenn das Formular gültig ist.
 *
 * Kompatibel mit:
 * - Blockbasierter WooCommerce-Checkout
 * - Klassischer WooCommerce-Checkout
 */

add_action( 'wp_footer', function () {

	// Nur auf der Checkout-Seite laden.
	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>
				<!-- Sie können diesen Titel ändern -->
				Bitte warten Sie, während wir Ihre Bestellung bearbeiten
			</h3>

			<p>
				<!-- Sie können diese Nachricht ändern -->
				Laden Sie diese Seite nicht neu und schließen Sie sie nicht.
			</p>

		</div>
	</div>

	<style>

		/* Ebene, die den gesamten Bildschirm abdeckt */
		#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;
		}

		/* Nachrichtenfeld */
		.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;
		}

		/* Ladeanzeige */
		.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;

		/**
		 * Prüft, ob WooCommerce einen Fehler gefunden hat.
		 */
		function checkoutHasErrors() {

			return Boolean(
				document.querySelector(
					/*
					 * Erforderliche oder ungültige HTML-Felder.
					 * Schließt das Kontrollkästchen für die Bedingungen ein.
					 */
					'.wc-block-checkout :invalid,' +
					'form.checkout :invalid,' +

					/*
					 * Als ungültig markierte Felder
					 * über Barrierefreiheitsattribute.
					 */
					'.wc-block-checkout [aria-invalid="true"],' +
					'form.checkout [aria-invalid="true"],' +

					/*
					 * Fehler des blockbasierten Checkouts.
					 */
					'.wc-block-components-validation-error,' +
					'.wc-block-components-notice-banner.is-error,' +
					'.wc-block-store-notice.is-error,' +

					/*
					 * Fehler des klassischen Checkouts.
					 */
					'.woocommerce-error'
				)
			);
		}

		/**
		 * Hinweis anzeigen.
		 */
		function showProcessingMessage() {

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

			/*
			 * Sicherheitsmaßnahme:
			 * wenn WooCommerce nicht antwortet, wird der Hinweis
			 * nach 60 Sekunden automatisch geschlossen.
			 */
			clearTimeout(safetyTimer);

			safetyTimer = setTimeout(
				hideProcessingMessage,
				60000
			);
		}

		/**
		 * Hinweis ausblenden.
		 */
		function hideProcessingMessage() {

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

			clearTimeout(safetyTimer);
		}

		/**
		 * Schaltfläche zum Absenden der Bestellung erkennen.
		 */
		document.addEventListener(
			'click',
			function (event) {

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

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

				/*
				 * Warten, bis WooCommerce die Felder validiert hat.
				 *
				 * Wenn die Bedingungen fehlen oder ein Feld
				 * ungültig ist, zeigt WooCommerce den Fehler
				 * während dieses Zeitraums an.
				 */
				setTimeout(function () {

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

					showProcessingMessage();

				}, 400);

			},
			true
		);

		/**
		 * Wenn WooCommerce später einen Fehler anzeigt,
		 * den Hinweis sofort ausblenden.
		 */
		const observer = new MutationObserver(function () {

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

		});

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

		/**
		 * Hinweis beim Zurückkehren über die
		 * Zurück-Schaltfläche des Browsers ausblenden.
		 */
		window.addEventListener(
			'pageshow',
			hideProcessingMessage
		);

	})();
	</script>

	<?php
}, 100 );