How to add a third-party JS plugin correctly

I’ve got to the point in my project where I need to install a third-party Javascript plugin for extra functionality; in this case, I’m using Bootstrap Touch Carousel to enable gestures for mobile devices on bootstrap carousels.

Many good plugins support installation using Bower (including this Bootstrap Touch Carousel plugin), which I can only assume is a neat fit with Sage. I have installed BTC using: $ bower install bootstrap-touch-carousel which has of course installed the plugin files to the bower_components folder in my theme directory.

I feel I am close with the steps I’ve taken to implement this plugin, however I’ve not yet had success seeing the .js or .css files loaded in the theme.

I have updated my bower.json file to include BTC:

{
  "name": "sage",
  "homepage": "https://roots.io/sage/",
  "authors": [
    "Ben Word <ben@benword.com>"
  ],
  "license": "MIT",
  "private": true,
  "dependencies": {
    "modernizr": "2.8.2",
    "jquery": "1.11.2",
    "bootstrap": "3.3.2",
    "bootstrap-touch-carousel": "0.8.0"
  },
  "overrides": {
    "modernizr": {
      "main": "./modernizr.js"
    },
    "bootstrap": {
      "main": [
        "./less/bootstrap.less",
        "./js/alert.js",
        "./js/button.js",
        "./js/carousel.js",
        "./js/collapse.js",
        "./js/dropdown.js",
        "./js/modal.js",
        "./js/tooltip.js",
        "./js/popover.js",
        "./js/scrollspy.js",
        "./js/tab.js",
        "./js/affix.js",
        "./fonts/glyphicons-halflings-regular.eot",
        "./fonts/glyphicons-halflings-regular.svg",
        "./fonts/glyphicons-halflings-regular.ttf",
        "./fonts/glyphicons-halflings-regular.woff",
        "./fonts/glyphicons-halflings-regular.woff2"
      ]
    },
    "bootstrap-sass-official": {
      "main": [
        "./assets/stylesheets/_bootstrap.scss",
        "./assets/javascripts/bootstrap/transition.js",
        "./assets/javascripts/bootstrap/alert.js",
        "./assets/javascripts/bootstrap/button.js",
        "./assets/javascripts/bootstrap/carousel.js",
        "./assets/javascripts/bootstrap/collapse.js",
        "./assets/javascripts/bootstrap/dropdown.js",
        "./assets/javascripts/bootstrap/modal.js",
        "./assets/javascripts/bootstrap/tooltip.js",
        "./assets/javascripts/bootstrap/popover.js",
        "./assets/javascripts/bootstrap/scrollspy.js",
        "./assets/javascripts/bootstrap/tab.js",
        "./assets/javascripts/bootstrap/affix.js",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.eot",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.svg",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.ttf",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.woff",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.woff2"
      ]
    },
    "bootstrap-touch-carousel": {
	  "main": [
		 "/dist/css/bootstrap-touch-carousel.css",		    
		 "/dist/js/bootstrap-touch-carousel.js"
	  ]
    }
  }
}

And my manifest.json file:

{
  "dependencies": {
    "main.js": {
      "files": [
        "scripts/main.js"
      ],
      "main": true
    },
    "main.css": {
      "files": [
        "styles/main.less"
      ],
      "main": true
    },
    "editor-style.css": {
      "files": [
        "styles/editor-style.less"
      ]
    },
    "jquery.js": {
      "bower": ["jquery"]
    },
    "modernizr.js": {
      "bower": ["modernizr"]
    },
    "bootstrap-touch-carousel": {
	  "bower": ["bootstrap-touch-carousel"]
    }
  },
  "config": {
    "devUrl": "theagsc.dev"
  }
}

And I am assuming once the above has been ‘built’ (am I correct in thinking that this is done by running $ gulp in the theme directory?), I am to include something like the following in my /lib/assets.php:

function assets() {
  wp_enqueue_style('sage_css', asset_path('styles/main.css'), false, null);
  
  if( is_frontpage() ) {
    wp_enqueue_script('touch_carousel', asset_path('scripts/bootstrap-touch-carousel.js'), false, null);
    wp_enqueue_style('touch_carousel', asset_path('styles/bootstrap-touch-carousel.css'), false, null);
  }
}

As I’m sure you can tell, a lot of this is guesswork. I’m enjoying that Sage is helping me learn so much about code, and any help you can give me would be so valuable. Please ask for clarification if any of this is unclear.

Thanks guys.

UPDATE: Also, it might be worth noting that bower_components/bootstrap-touch-carousel/ contains a Gruntfile.js NOT a gulpfile.js. I’m not sure if this impacts compatibility with gulp?

2 Likes

bower.json in the plugin you linked already includes the assets you want in the main property. That means, you don’t need the overrides you added to your bower.json

You also do not need to touch anything in lib/assets.php. The CSS and JS from the Bower package get automatically added to your theme CSS and JS.

This doesn’t matter.

PS. All of these things are covered in my screencast :wink:

1 Like

Just bought it. About to watch now! Thanks once again Ben. This is practically live support! So impressive.

Should have watched the screencast from the start. It makes sense now. I am now successfully using touch gestures to swipe through blog posts using Bootstrap carousel. Thanks @ben.

3 Likes

Hi,
I would like to add flickity plugin to my sage theme.
here are the steps :

bower install --save flickity
gulp

However, when I add var flky = new Flickity( '.gallery', {}); to my main.js file, I have this error > Flickity is not defined
did I forget something?
Thanks

Did this the other day!

So make sure you have "flickity": "1.0.0" in your list of bower dependencies…

I was able to get Flickity working by adding this to my list of overrides in the bower.json file…

"overrides": {
  "modernizr": {
    "main": "./modernizr.js"
  },
  "bootstrap": {
    "main": [
      ...bootstrap js files here
    ]
  },
  "flickity": {
    "main": [
      "./dist/flickity.pkgd.js",
      "./dist/flickity.min.css"
    ]
  }
}
5 Likes

you rock, thanks man !

1 Like

This topic was automatically closed after 12 hours. New replies are no longer allowed.