Roots Discourse

Adding Magnific Popup

Hi there,

I try to install magnific popup to sage by bower.

First of all I’m in my wordpress theme direcotory and here launch

bower install --save magnific-popup

After that, a directory magnific-popup is added under bower_components dir. In bower.json file a new line is added: “magnific-popup”: “~1.0.1”.

Here I launch gulp build.

After that, I add $(’.image-link’).magnificPopup({type:‘image’}); in my main.js file. Now I add Open popup in my page to test the script and I reload the page but an error occurred:

TypeError: t(…).magnificPopup is not a function

because the magnific popup doesn’t load.

What I’m wrong?

What does it say in the terminal after you type gulp build?

Got this from somewhere else in discourse…but check the asset-builder output by typing:
node
and:
require('asset-builder')('./assets/manifest.json').globs.js

If not getting loaded, check out these examples for other “weird” libraries:


(Then add your solution for magnific-popup?)

I’ll chime in cause it might help someone that needs this on a newer Sage v9 with webpack/yarn.
Importing external lib goes like this (example for beforementioned Magnific Popup below):

  1. In your theme root:yarn add magnific-popup

  2. In your relevant stylesheet scss below @import "./autoload/**/*";:
    @import "~magnific-popup/dist/magnific-popup.css";

  3. In your relevant script file on top:
    import 'magnific-popup/dist/jquery.magnific-popup.js';