scripts.js files for WordPress Theme

functions.php

function university_files() {
  wp_enqueue_script('googleMap', '//maps.googleapis.com/maps/api/js?key=AIzaSyDB9pjlDrkHQNjOnGZ0kTju-Z0sWG8Kc78',NULL, microtime(), true);
  wp_enqueue_script('live-search-javascript', get_theme_file_uri('/js/modules/Search.js'), array('jquery'), '1.0', true);
  wp_enqueue_script('myNotes-javascript', get_theme_file_uri('/js/modules/MyNotes.js'), array('jquery'), '1.0', true);
  wp_enqueue_script('main-university-javascript', get_theme_file_uri('/js/scripts-bundled.js'), NULL, '1.0', true);
  wp_enqueue_style('custom-google-fonts', '//fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,300,400,400i,700,700i');
  wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
  wp_enqueue_style('university_main_styles', get_stylesheet_uri(), NULL, microtime());
}

add_action('wp_enqueue_scripts', 'university_files');

scripts.js

// 3rd party packages from NPM
import $ from 'jquery';
import slick from 'slick-carousel';

// Our modules / classes
import MobileMenu from './modules/MobileMenu';
import HeroSlider from './modules/HeroSlider';
import GoogleMap from './modules/GoogleMap';
import Search from './modules/Search';
import MyNotes from './modules/MyNotes';

// Instantiate a new object using our modules/classes
var mobileMenu = new MobileMenu();
var heroSlider = new HeroSlider();
var googleMap = new GoogleMap();
// var search =  new Search();
var mynotes = new MyNotes();

Search.js

import $ from 'jquery';

class Search {
  // 1. describe and create/initiate our object
  constructor() {
    this.openButton = $(".js-search-trigger");
    this.closeButton = $(".search-overlay__close");
    this.searchOverlay = $(".search-overlay");
    this.events();

  }

  // 2. events
  events() {
    this.openButton.on("click", this.openOverlay.bind(this));
    this.closeButton.on("click", this.closeOverlay.bind(this));
  }


  // 3. methods (function, action...)
  openOverlay() {
    this.searchOverlay.addClass("search-overlay--active");

  }

  closeOverlay() {
    this.searchOverlay.removeClass("search-overlay--active");
  }
}


var liveSearch = new Search();

• Do you have add_action('wp_enqueue_scripts', 'university_files'); after or before your function declaration?

• have updated the code now to show you this

• You have two live-search-javascript handles and they should be unique.

• whoops! Updated that too.

So, what's the exact issue? Can you provide any error messages from the console?

One issue I'm seeing in Search.js is that you should bind this in the constructor instead.

constructor() {
  this.openButton = this.openButton.bind(this);
}

Is there any particular reason why you need openButton to be bound to this on click?
-unsure, just following the course content. Something about the on method in Jquery changing the value of the this keyword

Thanks Ivor, so the main issue is that the scripts don't seem to work. With this particular Search.js file, the Search Button should bring up a Live Search HTML overlay.... but it doesn't.
Here is that overlay HTML which is in my footer.php file.

<div class="search-overlay">
    <div class="search-overlay__top">
      <div class="container">
        <i class="fa fa-search search-overlay__icon" aria-hidden="true"></i>
        <input type="text" class="search-term" placeholder="What are you looking for?" id="search-term">
        <i class="fa fa-window-close search-overlay__close" aria-hidden="true"></i>
      </div>
    </div>
  </div>

I've tried including a basic alert inside the constructor and nothing happens, so I am wondering if my scripts are even being run?
Part of my issue is the instructor of the course I am taking uses Gulp Watch so as to automatically rebundle the main file scripts-bundled.js with every change. I can't get Gulp installed for the life of me, so I thought if I called the scripts manually in functions.php that should work right? But so far it doesn't do anything, I can't even get a basic alert to trigger.
I understand that WordPress uses scripts-bundled.js but I am not sure if my other scripts are being loaded so I am just a bit confused.

The constructor function runs when the Search object is instantiated via the new operator, so the alert should run. Check the console for errors, I'm pretty sure Search.js isn't being added to your scripts bundle.

If you can't install Gulp you can use CodeKit to bundle scripts, auto-refresh, etc. or Ahmad's WPGulp boilerplate.

Hmm... so how do I get the Search.js file added to my scripts bundle?
I'm going to have a look at CodeKit - ta :)

1. You're importing Search.js with import Search from './modules/Search'; make sure this file exists in the /modules directory — happens all the time 😁

2. Delete or comment all the code from Search.js and do a console.log('whatever') to see if it prints whatever in the console (CMD + Option + i), if it does then we can move forward and see what's wrong with the code (maybe a typo?), if it doesn't then the script isn't being bundled and we can debug elsewhere.

Wow, that worked. I actually got the whatever in console! Baby steps... haha. I have definitely triple checked the locations and directory so it is working, we can kind of say yes to that part now as I got the console log message.
So I put my code back and got rid of the console log message, and tried to run it again but I see this error in console log now:

JQMIGRATE: Migrate is installed, version 1.4.1
jquery-migrate.min.js:2:542
SyntaxError: import declarations may only appear at top level of a module
Search.js:1
SyntaxError: import declarations may only appear at top level of a module
MyNotes.js:1

If you look at my Search.js file above, you can see I am trying to import JQuery which seems to be the error but I am not sure.

@Daniel-Michael

Yeah, seems like an issue with the import declarations. Remove import $ from 'jquery' from Search, MyNotes, etc and see if the error is gone. What browser are you using?

I'm curious though, why you're using import instead of enqueuing files via wp_enqueue_script()? You can add jQuery to your theme like so: wp_enqueue_script('jquery');

@ivorpad Ok this is weird, I removed the import declaration, ran it again and pulled up the console (was in Firefox, have switched back to Chrome now for better dev tools) and it is show an unexpected identifier error - showing up as the import line still there but I have removed it, so it seems that, that file Search.js is not being 'refreshed' maybe? I don't know, sorry about these n00b questions mate, really appreciate your help.

I also removed the import jquery declaration from those files and added it via the functions.php file and used enqueue scripts... I was only doing it that way due to the course I am following and having very little idea! The instructor prompted that include due to the use of jquery on that specific file... anyway, I removed it and enqueued it as per WP method and it still isn't working as expected.

I'm trying out CodeKit which shows multiple errors when I added the root folder as a project and hit Buil, I just cant fathom everything it says at the moment, but it refreshes every time I change a file in that project folder so I am coming to grips with it slowly, I think it could really help so big ups for that tip man!

Still trying to work this out :)
So I went back over the course content and it seems I got this a bit mixed up because of my issues with Gulp. The instructor is recommending using a 'bundled' approach to managing Scripts which is why he used that import declaration method, whereas I can't get Gulp Watch to work (just got a license for CodeKit though, that app is GREAT) so I need not use that import method... instead, and I did do this, I just tell the enqueue_scripts that jquery is a dependency:
wp_enqueue_script('myNotes-javascript', get_theme_file_uri('/js/modules/MyNotes.js'), array('jquery'), '1.0', true);
Anyway I have removed that now and am relying on the enqueue method, but I still can't get my Search.js file to fire up..going back over the course section. Stay tuned haha!

CodeKit is a really nice app. Would love to check that course out and maybe I can see what's going on with Search.js. Is an online course?

Yeah it's great, I didn't mind paying for it at all. I think it's going to be really helpful overall.
Yup, sure, but it is a paid Udemy course: https://www.udemy.com/become-a-wordpress-developer-php-javascript/learn/v4/overview
I'm still reviewing the thinking behind enqueuing my scripts files and I still can't get the basic on click triggers to work...

I really think part of my problem is that my files are not getting rebundled up after each change into scripts-bundled.js
Even though I am attempting to enqueue them individually in functions.php, I don't believe they are making it into my dev environment. Does that make sense Ivor?

HI Daniel, in my search for solution for the same issue, mine has to do with the MyNotes.js in the same course, I can't seems to get the alert to work in the MyNote.js. I have updated the script.js and run gulp scripts and gulp watch but it seems not to be bundling the files. Please update me if you have solution to this issue. I have been stuck because of this issue.

Hi Daniel, I have resolved my issue and this is what i did.

1. I replaced the package.json file with the resource one in the lecture.
2. I deleted the node_modules file
3. i ran npm install so that to get a fresh node_modules in the same directory i deleted it from.

Also check console for any syntax error.

It is working now.

In functions.php