210 подписчиков
Блокировка кнопки Отправить по всплывающем окне плагина Art WooCommerce Order One Click
Проблема: при нажатии на кнопку Отправить в форме Contact Form 7, данные отправляются довольно долго и пользователи могу нажать на кнопку 100500 раз, соответственно и функция отправки будет срабатывать столько же раз, и писем столько же будет приходить. Это плохо.
Решение: ничего кроме костылька блокировать кнопку через js не придумал. Вот такое решение
// disable button after clicking on submit button
<?php add_action('wp_footer', 'mycustom_wp_footer');
function mycustom_wp_footer()
{
?>
<script type="text/javascript">
jQuery('.wpcf7-form').submit(function() {
jQuery(this).find(':input[type=submit]').prop('disabled', true);
var wpcf7Elm = document.querySelector('.wpcf7');
wpcf7Elm.addEventListener('wpcf7submit', function(event) {
jQuery('.wpcf7-submit').prop("disabled", false);
}, false);
wpcf7Elm.addEventListener('wpcf7invalid', function() {
jQuery('.wpcf7-submit').prop("disabled", false);
}, false);
});
</script>
<?php
}?>
В целом, на формах выведенных просто шорткодом это будет работать. Но вот с плагином Art WooCommerce Order One Click это не сработает, так как форма вызывается через ajax и скрипт блокировки надо инициализировать после того как сработало всплывающее оно. В итоге получается вот такой костыль:
/**
* Блокировка кнопки отправить при отправке формы CF7
*
* @author Artem Abramovich
* @testedwith WC 8.4
* @testedwith AWOOC 3.0
*/
add_action( 'wp_footer', function () {
?>
<script>
jQuery( document ).ready( function ( $ ) {
$( document.body ).on( 'awooc_popup_ajax_trigger', function ( event, data ) {
$( '.awooc-form-custom-order div.wpcf7 > form' ).on( 'submit', function ( e ) {
$( e.target ).find( ':input[type=submit]' ).prop( 'disabled', true );
var wpcf7Elm = document.querySelector( '.wpcf7' );
wpcf7Elm.addEventListener( 'wpcf7submit', function ( event ) {
jQuery( '.wpcf7-submit' ).prop( "disabled", false );
}, false );
wpcf7Elm.addEventListener( 'wpcf7invalid', function () {
jQuery( '.wpcf7-submit' ).prop( "disabled", false );
}, false );
} );
} );
} );
</script>
<?php
}, 1000 );
#snippet #woocommerce #awooc
1 минута
27 января 2024