I’m working on my first project using Roots. So far I got it ruining , got Grunt watch going on and I’m working in the first custom page template for a full screen slider.
I want to use carousel, but I’ve found a few drawbacks so far, an I couldn’t fin any post that addresses what I’m encountering.
})(jQuery); // Fully reference jQuery after this point.
jQuery(document).ready(function ($) {
console.log('test2');
$(".carousel").carousel();
});
FYI : Grunt show no errors, concole shows no errors, ‘test2’ is being displayed in console.
Even though I defined ‘WP_ENV’ to 'development in the wp-config file, Grunt was adding the hash to script.js, I hard-coded script.js to the conditional statement in lib/scripts.php while I figure out why is this happening.
Because of #1 the JS added to _main.js was begin ignored. Solved temporarily.
I don’t’ see how the BS JS is being added to the project, The only scripts calls in the html are to JQuery, modernizer and script.js. Is there any configuration I’m missing?
This doesn’t seem to be Roots related. However, consider that Grunt adds a hash to JS and CSS assets to circumvent browser caching so hard coding script.js is probably not a great idea.
But from taking a quick look it seems you might be missing a </div> tag before your final endif.
Thank you for your reply, hardcoding script.js is to temporally solve the issue with the hash being added when it shouldn’t, because I’ve set WP_ ENV in wp-config.php
What happens if you change your jQuery line to $(".carousel").remove();?
It sounds like you may have run into some setup issues or an issue caused you to try multiple fixes and it’s difficult to figure out which direction you’ve gone in. If you defined WP_ENV correctly then there is no reason you should be seeing JS or CSS assets with hashes, that is a big indicator of a problem.
Can you set up your site on a staging server and paste a link?
I did add the to the carousel markup, sorry for the typo.
I’m still working on getting the staging server setup.
I I use $(".carousel").remove(); it does disappear from the page, so I guess the issue is that bootstrap is not begin added, yet I don’y see any JS errors in run-time.
Also, I don’t see any css call to Boostrap’s css or js in the source code… I’m really confused ha!
data-ride=“carousel” is already in place.
Thank you for the replies.
-----Update
I re-did grunt and bower install globally and in the theme root folder.
ran nmp install in the theme root. Still no luck
I undid the changes to scripts.php
Tried to run bower install by itself in the theme root, it doesn’t return any confirmation… nada.
I’m really lost, haha. Now I’m sure bower is not fetching the boostrap part, but vendor/modernizer is there, assets/css/main.css is there, jquery is there too.
Just take a deep breath, relax, and start back at the instructions. If you experience errors during the setup process then search. If you can’t find anything on your specific errors then post them here.
went to git bash to run npm install got the following
0 info it worked if it ends with ok
1 verbose cli [ ‘c:\Program Files\nodejs\node.exe’,
1 verbose cli ‘c:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js’,
1 verbose cli ‘install’ ]
2 info using npm@1.4.9
3 info using node@v0.10.28
4 error install Couldn’t read dependencies
5 error Failed to parse json
5 error Unexpected token /
6 error File: c:\Users\davila1\Documents\diana\web\provacareR\wp-content\themes\roots- master\package.json
7 error Failed to parse package.json data.
7 error package.json must be actual JSON, not just JavaScript.
7 error
7 error This is not a bug in npm.
7 error Tell the package author to fix their package.json file. JSON.parse
8 error System Windows_NT 6.1.7601
9 error command “c:\Program Files\nodejs\node.exe” “c:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js” "install"
10 error cwd c:\Users\davila1\Documents\diana\web\provacareR\wp-content\themes\roots-master
11 error node -v v0.10.28
12 error npm -v 1.4.9
13 error file c:\Users\davila1\Documents\diana\web\provacareR\wp-content\themes\roots-master\package.json
14 error code EJSONPARSE
15 verbose exit [ 1, true ]
You will not see Bootstrap filenames anywhere because Bootstrap LESS will be compiled into main.css and JS into scripts.js.
Does your site appear styled?
You could manually search through main.css or main.min.css for evidence of Bootstrap, something like col-xs- should find results if Bootstrap is present.
I did, I can see the reference to my own carousel(using id) along with the carousel definition in scripts.js but no in script.min,js nor in the hash version in the brower.