Не могу подключить JS

Решено yalaby
(@yalaby)

4 года, 4 месяца назад
Здравствуйте! Работаю с Contact Form 7, на локальном сервере, пытаюсь добавить JS код для перехвата события Sumbit формы.
Смотрел множество с сайтов с примерами, но так и не получилось реализовать.
В директорию с файлом funtions.php добавил js файл с названием customscript.js со следующим кодом:
```
function da_davay_ushze (){
var wpcf7Elm = document.querySelector( '.wpcf7' );
 
wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
  alert( "Fire!" );
}, false );
}
```
в файл Functions вставил следующий код, который не заработал:
```
function my_scripts_method(){
	wp_enqueue_script( 
	'scripscript', 
	get_template_directory_uri() . '/customscript.js',	
	array('jquery')
	);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
```
Пробовал также следующий вариант, который также не заработал:
```
function my_scripts_method(){
        wp_register_script( 'scripscript', 'http://printsurgu/wp-content/themes/storefront/inc/customscript.js');
	wp_enqueue_script('scripscript');
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
```
Подскажите, пожалуйста, где я допустил ошибку. Спасибо большое!
- Тема изменена 4 года, 4 месяца назад пользователем Yui. Причина: please use CODE button for code formatting

Просмотр 8 ответов — с 1 по 8 (всего 8)

zoltsmaster
(@zoltsmaster)

4 года, 4 месяца назад

где я допустил ошибку

Только в этом:

Работаю с Contact Form 7, на локальном сервере

WP и всё, что ему сопутствует правильно работает только там, где должно работать
Автор yalaby
(@yalaby)

4 года, 4 месяца назад
@zoltsmaster Поясните, пожалуйста, а почему именно не должно работать? Плагин скачан с сайта WordPress, поставлен на чистую свежую сборку WordPress, в документации плагина (https://contactform7.com/dom-events/) описано, что такие способы возможны. Если Вы про локальный сервер, почему оно не должно на нём работать?
- Ответ изменён 4 года, 4 месяца назад пользователем yalaby.
- Ответ изменён 4 года, 4 месяца назад пользователем yalaby.
Автор yalaby
(@yalaby)

4 года, 4 месяца назад

@zoltsmaster добавил тот же код на хостинг, разницы нет.

Flector
(@flector)

4 года, 4 месяца назад

этот код рекомендуют прописывать в footer, ибо при загрузке в хидере он не может найти форму CF7 (она еще не загрузилась) и поэтому у вас ничего не работает.

Модератор Sergey Biryukov
(@sergeybiryukov)

Live and Learn

4 года, 4 месяца назад

вставил следующий код, который не заработал

В чём это выражается?

Если скрипт customscript.js не появился в исходном коде страницы — то да, проблема в этом коде.

Если появился, но не привёл к желаемому результату — возможно, скрипт просто загружается раньше, чем выводится форма, как заметили выше.

У wp_enqueue_script() есть параметр $in_footer (пятый по счёту) — попробуйте задействовать его.

Если Вы про локальный сервер, почему оно не должно на нём работать?

Должно, этот вопрос не зависит от сервера. Просто у некоторых участников форума сложилось стойкое предубеждение против работы на локальном сервере и появилось стремление навязать своё мнение всем остальным 🙂 Отчасти потому что в случае проблем сайт на хостинге можно посмотреть, чтобы дать совет, а локальный сайт снаружи недоступен, и остаётся только гадать и задавать уточняющие вопросы.
Автор yalaby
(@yalaby)

4 года, 4 месяца назад
@flector @sergeybiryukov Благодарю Вас за ответы!
попробовал в customscript.js написать следующий код для упрощения и отвязки от отслеживания CF7:
```
function da_davay_ushze (){
  alert( "Fire!" );
}
```
Однако, при загрузке страницы ничего не поменялось, алерт не выходит, а в отладчике своего скрипта не нахожу, соответственно, я неправильно его объявил. Грешу на строчку, но не уверен, потому что пытался прописать абсолютный путь, тоже не помогло
get_template_directory_uri() . '/customscript.js',

_________________________________________
Пока писал сообщение попытался ввести следующий код в файл functions.php, если вы посмотрите на него, увидите, что я все параметры указал, в том числе внёс код в footer (если быть точным, то в файл storefront-functions.php т.к. работаю с темой storefront):
```
function my_scripts_method(){
	wp_enqueue_script( 
	'scripscript', 
	'http://printsurgu.nichost.ru/wp-content/themes/storefront/inc/customscript.js',	
	array('jquery'),
	null,
	true
	);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
```
теперь мой скрипт появился в отладчике, однако Алерта так и нет
кстати, абсолютный путь указан уже не к локальному серверу, потому что я решил решать всё прямо на хостинге
______________________________________________________________
Далее я решил исправить свой JS код

написал в customscript.js просто строку
alert ("fire!");

и это дело заработало.

и тут я понял что объявлял функцию, но не вызывал её. Следующий код полностью заработал
```
function da_davay_ushze (){
    var wpcf7Elm = document.querySelector( '.wpcf7' );
 
wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
  alert( "Fire!" );
}, false );}
da_davay_ushze();
```
После чего я решил попробовать вернуть следующую строку вместо абсолютного имени файла JS:

get_template_directory_uri() . '/customscript.js'

и код перестал работать. В общем, нужно указывать абсолютный путь. Видимо, я не до конца разобрался в синтаксисе get_template_directory_uri().

P.S. Расписал это всё как я делал для того, чтобы если кто то столкнётся с такой же проблемой он быстрее решил её. Благодарю всех причастных!)
- Ответ изменён 4 года, 4 месяца назад пользователем yalaby.
- Ответ изменён 4 года, 4 месяца назад пользователем yalaby.
- Ответ изменён 4 года, 4 месяца назад пользователем yalaby.
Модератор Юрій
(@yube)

4 года, 4 месяца назад

грешу на строчку

get_template_directory_uri() — для родительской
get_stylesheet_directory_uri() — для текущей (активной)

Автор yalaby
(@yalaby)

4 года, 4 месяца назад

@yube Благодарю Вас, теперь точно все вопросы решены!)