Bower install bootstrap-offcanvas

sage
1

Sorry but read the book how to properly inject with bower and read the forum but can’t find proper guide.

I am trying to install bootstrap-offcanvas using bower.

  1. bower install bootstrap-offcanvas --save
  • it’s saved in my bower.json
    "bootstrap": "git://github.com/twbs/bootstrap.git#v4.0.0-alpha.4",
    "bootstrap-offcanvas": "^2.4.0"

  1. added into manifest.json
    "bootstrap.offcanvas.min.js": { "files": [ "bower_components/bootstrap-offcanvas/dist/js/bootstrap.offcanvas.min.js" ] },

  2. added in setup.php

    function assets() {
    wp_enqueue_style(‘sage/css’, Assets\asset_path(‘styles/main.css’), false, null);
    if (is_single() && comments_open() && get_option(‘thread_comments’)) {
    wp_enqueue_script(‘comment-reply’);
    }
    wp_enqueue_script(‘sage/js’, Assets\asset_path(‘scripts/main.js’), [‘jquery’], null, true);
    wp_enqueue_script(‘offcanvas’, Assets\asset_path(‘bower_components/bootstrap- offcanvas/dist/js/bootstrap.offcanvas.min.js’), [‘jquery’], null, true);
    }
    add_action(‘wp_enqueue_scripts’, NAMESPACE . ‘\assets’, 100);

After i ran gulp and gulp watch

Still getting wrong path of the bootstrap-offcanvas.js file. What I am doing wrong? Thanks

2

There’s no need to do anything with your manifest.json or to enqueue anything in setup.php- asset builder will pull the js and css in automatically and minify and compile it when you run gulp.

All you have to do is -

  1. bower install --save bootstrap-offcanvas
  2. Stop gulp watch if it’s running, then run gulp again.
  3. Setup your markup the way you need it.
  • note, this isn’t always the case as some packages do not have their bower.json files set up correctly, but in this case the main files are defined, so asset builder will grab them for you.
1 Like
3

thanks. but i dont see the bootstrap-offcanvas.js loaded in my console. this is all minified in main.js?

4

Yep :sunglasses:

Asset builder pulls the assets in for you, then compiles and minifies in main.js

Try editing the unminified off canvas js file in bower packages - just add a console.log() to the top, run gulp again, then check your console.

5

Also take a look at Pushy. I found it WAY easier to use than offcanvas.

3 Likes
6

after adding console.log() in the top of unminified js file I am getting error after

VM128:2 GET http://localhost:3000/browser-sync/socket.io/?EIO=3&transport=polling&t=LeVS3ew net::ERR_CONNECTION_REFUSED

and after running gulp watch

Uncaught TypeError: console.log(…) is not a function
at bootstrap.offcanvas.js:1

7

Make sure it’s inside the opening function call - ie:

(function() {

  console.log('Yo, check me out!');

  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

  (function($, window) {...

Screen Shot 2017-02-08 at 3.47.13 PM.png815×482 28 KB

:sunglasses:

8

so now when I want to remove offcanvas and replace with Pushy I need to remove offcanvas folder in bower folder and remove the line in bower.json or do it with comman? thx

1 Like
9

No problem, happy it helped!

10

Just remove the line from bower.json and re-run gulp and you should be all set.

1 Like