How can I add a plugin jquery in bower?

sage
1

Hello, I have sage 8.2.1. I executed the following command:
bower install jquery -backstretch --save

my bower.json

ticket2015-09-26.png689×643 67.5 KB

I’ve read in various parts that I have to edit a file / some files manually to make it work, but i don’t know which ones.

Thanks in advance for any advice on how to solve my issue.

2

The gulp file works off the main declaration in each bower.json. The default for backstretch is simple:

So unless you need any more files from that package, you should be good. If not, you set up overrides in the Sage themes bower.json

3

Thanks for your response. Sadly it didn’t help.

There is already a jquery-backstretch folder in bower_components folder that contains the file you mentioned.
The problem I’m having is that the loading of the plugin fails when I’m opening the website in the browser.

Error: Uncaught TypeError: Cannot read property ‘backstretch’ of undefined

Any ideas?

4

Sorry, but I have to ask, you ran gulp after installing with Bower, correct?

5

yes, i execute gulp and gulp --production in assets folder

6

And are there any errors when you do that? What’s the output of those commands?

7

The problem was that $ is not declared, so use jQuery and had no difficulty. ¿Is there any way to use $?

Thanks a lot for the help

8

Use the provided main.js file in the assets/scripts/ directory

https://github.com/roots/sage/blob/master/assets/scripts/main.js

9

Thanks for your help, but I’m not sure how what you sent me can help with my issue.

10

This didn’t answer my question about if there were any errors when running gulp.

11

Excuse me, I had no mistakes when occupying jQuery instead of $.
gulp, I get no errors

12

In that case, what Ben said is correct. jQuery is loaded in no conflict mode, and should be standard in basically every theme to have to use a jQuery no conflict wrapper: wp_enqueue_script() | Function | WordPress Developer Resources

And that’s exactly what the main.js file in Sage does, along with allowing you to use JavaScript on particular pages: https://github.com/roots/sage/blob/master/assets/scripts/main.js#L77

13

Thank you very much for the explanation. I just understand how it works.