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'); |
// 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(); |
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(); |
This comment has been minimized.
This comment has been minimized.
So, what's the exact issue? Can you provide any error messages from the console? One issue I'm seeing in
Is there any particular reason why you need |
This comment has been minimized.
This comment has been minimized.
Thanks Ivor, so the main issue is that the scripts don't seem to work. With this particular
I've tried including a basic alert inside the constructor and nothing happens, so I am wondering if my scripts are even being run? |
This comment has been minimized.
This comment has been minimized.
The If you can't install Gulp you can use CodeKit to bundle scripts, auto-refresh, etc. or Ahmad's WPGulp boilerplate. |
This comment has been minimized.
This comment has been minimized.
Hmm... so how do I get the |
This comment has been minimized.
This comment has been minimized.
|
This comment has been minimized.
This comment has been minimized.
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.
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. |
This comment has been minimized.
This comment has been minimized.
Yeah, seems like an issue with the I'm curious though, why you're using |
This comment has been minimized.
This comment has been minimized.
@ivorpad Ok this is weird, I removed the I also removed the 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! |
This comment has been minimized.
This comment has been minimized.
Still trying to work this out :) |
This comment has been minimized.
This comment has been minimized.
CodeKit is a really nice app. Would love to check that course out and maybe I can see what's going on with |
This comment has been minimized.
This comment has been minimized.
Yeah it's great, I didn't mind paying for it at all. I think it's going to be really helpful overall. |
This comment has been minimized.
This comment has been minimized.
I really think part of my problem is that my files are not getting rebundled up after each change into |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
Hi Daniel, I have resolved my issue and this is what i did.
Also check console for any syntax error. It is working now. |
This comment has been minimized.
This comment has been minimized.
In functions.php |
This comment has been minimized.
add_action('wp_enqueue_scripts', 'university_files');
after or before your function declaration?live-search-javascript
handles and they should be unique.