Поддержка Проблемы и решения Не могу подключить JS

  • Здравствуйте! Работаю с 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' );
    

    Подскажите, пожалуйста, где я допустил ошибку. Спасибо большое!

    • Тема изменена 2 недели, 5 дней назад пользователем Yui. Причина: please use CODE button for code formatting
Просмотр 8 ответов — с 1 по 8 (всего 8)
  • где я допустил ошибку

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

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

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

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

    • Ответ изменён 2 недели, 5 дней назад пользователем yalaby.
    • Ответ изменён 2 недели, 5 дней назад пользователем yalaby.

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

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

    Модератор Sergey Biryukov

    (@sergeybiryukov)

    Live and Learn

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

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

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

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

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

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

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

    @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. Расписал это всё как я делал для того, чтобы если кто то столкнётся с такой же проблемой он быстрее решил её. Благодарю всех причастных!)

    • Ответ изменён 2 недели, 4 дня назад пользователем yalaby.
    • Ответ изменён 2 недели, 4 дня назад пользователем yalaby.
    • Ответ изменён 2 недели, 4 дня назад пользователем yalaby.
    Модератор Юрий

    (@yube)

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

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

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

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