Исчезающие сообщения об ошибках на странице «Оформление заказа»

В этом уроке хочу поделиться с вами сниппетом кода, который показался мне интересным – он делает обычные сообщения об ошибках на странице оформления заказа плавно исчезающими.

Кстати, у меня на сайте есть видеокурс по созданию темы WooCommerce на основе готовой HTML-вёрстки, там же есть отдельный урок про страницу оформления заказа.

Вот так это выглядит:

Казалось бы какая-то приятная мелочь, но на самом деле тут вы также научитесь паре интересных вещей.

Сначала готовый код:

add_action( 'wp_enqueue_scripts', 'true_checkout_error_fade_out', 25 );
 
function true_checkout_error_fade_out() {
 
	// если находимся не на странице оформления заказа, то ничего не делаем
	if( ! is_checkout() ) {
		return;
	}
 
	// по желанию можете проверять страницу оплаты заказа из личного кабинета
	// if( is_wc_endpoint_url( 'order-pay' ) ) {
	// 	return;
	// }
 
	wc_enqueue_js( "
		$( document.body ).on( 'checkout_error', function(){
			setTimeout( function(){
				$('.woocommerce-error').fadeOut( 300 );
			}, 2000);
		})
	" );
 
}

• Прежде всего, если вы не знаете, куда вставлять код, то почитайте это.
• Мы используем условный тег is_checkout(), чтобы добавлять этот JavaScript только на странице оформления заказа. Но надо учитывать также, что функция is_checkout() будет возвращать true и на некоторых других страницах, например на странице оплаты заказа, поэтому вам может пригодиться условный тег is_wc_endpoint_url().
• Очень классная функция WooCommerce wc_enqueue_js(), которая вставляет JavaScript код в футер вашего сайта уже внутрь jQuery конструкции jQuery( function( $ ) { ... } );
• Теперь по поводу таймингов, на строчке 18 цифра 300 – это то, как быстро будет срабатывать анимация исчезновения, чем ниже цифра, тем быстрее будет исчезать. 2000 на 19-й строке – это как долго ошибки будут отображаться перед тем, как начнут исчезать, время в миллисекундах, то есть 2000 – это 2 секунды.
• Ну и в целом вы теперь знакомы с событием checkout_error на странице оформления заказа в WooCommerce.

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.