Как запустить wpcf7mailsent только внутри попапа с определенным id?
На advanced custom fields и CF7 я пытаюсь сделать так, чтобы одна и та же форма после заполнения полей и успешной отправки формы перенаправляла бы на открытие различных пдф файлов.
<?php if ( have_rows( 'm_skachat_fajl' ) ) : ?> <?php while ( have_rows( 'm_skachat_fajl' ) ) : the_row(); ?> <div id="pamyatka-popap-<?php echo get_row_index(); ?>" class="pamyatka-popap" style="display: none; width: 460px;"> <?php echo do_shortcode( '[contact-form-7 id="19124" title="Скачать памятку"]' ); ?> <?php $m_dobavit_knopku = get_sub_field( 'm_dobavit_knopku' ); ?> <?php if ( $m_dobavit_knopku ) : ?> <script> jQuery(document).ready(function(){ document.addEventListener( 'wpcf7mailsent', function( event ) { var id = event.detail.contactFormId; if ( id == 19124 ) { window.open("<?php echo esc_url( $m_dobavit_knopku['url'] ); ?>", '_blank'); } }, false ); }); </script> </div> <?php endif; ?> <?php endwhile; ?> <?php endif; ?> |
<?php if ( have_rows( 'm_skachat_fajl' ) ) : ?> <?php while ( have_rows( 'm_skachat_fajl' ) ) : the_row(); ?> <div id="pamyatka-popap-<?php echo get_row_index(); ?>" class="pamyatka-popap" style="display: none; width: 460px;"> <?php echo do_shortcode( '[contact-form-7 id="19124" title="Скачать памятку"]' ); ?> <?php $m_dobavit_knopku = get_sub_field( 'm_dobavit_knopku' ); ?> <?php if ( $m_dobavit_knopku ) : ?> <script> jQuery(document).ready(function(){ document.addEventListener( 'wpcf7mailsent', function( event ) { var id = event.detail.contactFormId; if ( id == 19124 ) { window.open("<?php echo esc_url( $m_dobavit_knopku['url'] ); ?>", '_blank'); } }, false ); }); </script> </div> <?php endif; ?> <?php endwhile; ?> <?php endif; ?>
Проблема в том, что так как скрипт Jquery для перенаправления дублируется, то само собой естественно запускается первый встречный, а не тот, который хотелось бы.
Подскажите, пожалуйста, можно ли как-то исправить ситуацию, не дублируя контактные формы?
Может быть какое-то условие, типа если мы находимся внутри fancybox с id="pamyatka-popap-<?php echo get_row_index(); ?>" - то скрипт внутри этого попапа запускается, а остальные игнорируются?
Или, может, есть какие-то другие решения данного вопроса?
Дополнительно:
то само собой естественно запускается первый встречный, а не тот, который хотелось бы.
Так не дублируй скрипт, а определи, в каком именно попапе должен он быть.
Далее.
Скрипт на странице должен быть один.
К кнопке, как понимаю, привязаны конкретные url.
При заполнении формы, тебе нужно в форму передать id памятки и уже при событии найти памятку, получить url и открыть окно. id памятки не обязательно передавать в какой-то инпут. Можно передать в аттрибуте, тут всё зависит от структуры и понимания задачи.
Я, например, не знаю, как у вас вызывается событие wpcf7mailsent.
jQuery(document).ready(function($) { document.addEventListener('wpcf7mailsent', function(event) { var id = event.detail.contactFormId; var popupId = 'pamyatka-popap-<?php echo get_row_index(); ?>'; // Проверяем, находимся ли мы внутри попапа с определенным ID if ($(event.target).closest('#' + popupId).length) { if (id == 19124) { window.open("<?php echo esc_url($m_dobavit_knopku['url']); ?>", '_blank'); } } }, false); }); |
jQuery(document).ready(function($) { document.addEventListener('wpcf7mailsent', function(event) { var id = event.detail.contactFormId; var popupId = 'pamyatka-popap-<?php echo get_row_index(); ?>'; // Проверяем, находимся ли мы внутри попапа с определенным ID if ($(event.target).closest('#' + popupId).length) { if (id == 19124) { window.open("<?php echo esc_url($m_dobavit_knopku['url']); ?>", '_blank'); } } }, false); });
- Шикарно, спасибо большое))
- Dimtri, нз
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Событие
wpcf7mailsentсрабатывает для всех форм Contact Form 7 на странице. Если нужно выполнять код только внутри конкретного попапа, проверяйте либо ID формы, либо ближайший контейнер попапа.Самый надёжный вариант — проверять ID формы:
document.addEventListener('wpcf7mailsent', function (event) { if (Number(event.detail.contactFormId) !== 123) { return; } // Код только для нужной формы const popup = document.querySelector('#my-popup'); if (popup) { popup.classList.add('is-success'); } });document.addEventListener('wpcf7mailsent', function (event) { if (Number(event.detail.contactFormId) !== 123) { return; } // Код только для нужной формы const popup = document.querySelector('#my-popup'); if (popup) { popup.classList.add('is-success'); } });
Если одна и та же форма используется в разных местах, тогда проверяйте контейнер:
document.addEventListener('wpcf7mailsent', function (event) { const form = event.target; const popup = form.closest('#my-popup'); if (!popup) { return; } popup.classList.add('is-success'); });document.addEventListener('wpcf7mailsent', function (event) { const form = event.target; const popup = form.closest('#my-popup'); if (!popup) { return; } popup.classList.add('is-success'); });
Не привязывайтесь к тексту ответа формы или к порядку форм на странице. После правки дизайна или перевода такой код быстро ломается. ID формы и контейнер попапа — нормальные устойчивые признаки.