Adding Magnific Popup

sage
1

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?

2

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

3

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?)

4

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';