XF 2.0 Including external library (js and css)

CMTV · Oct 24, 2017

How to include external library (js and css files) in specific template that requires jQuery?

I tried this code in template forum_view:

HTML:

<xf:head option="questionthreads_iconpicker">
    <!-- Iconpicker styles -->
    <link rel="stylesheet" href="{{ base_url('src/addons/QuestionThreads/includes/libs/iconpicker/css/jquery.fonticonpicker.min.css') }}">
    <link rel="stylesheet" href="{{ base_url('src/addons/QuestionThreads/includes/libs/iconpicker/css/jquery.fonticonpicker.grey.min.css') }}">

    <!-- Iconpicker -->
    <script src="{{ base_url('src/addons/QuestionThreads/includes/libs/iconpicker/jquery.fonticonpicker.min.js') }}"></script>
</xf:head>

But I am getting an error: jQuery is not defined.

This happens because jQuery is loaded at page footer (helper_js_global template).

How to load external library files after jQuery?

Chris D · Oct 24, 2017

You can't serve public files from anywhere inside the src directory unfortunately.

You would need to add these files to something like: js/questionthreads/vendor/fonticonpicker/jquery.fonticonpicker.min.js.

You would then use the XF JS loader rather than your current approach. If the file is in the above location it would be as follows:

HTML:

<xf:js src="questionthreads/vendor/fonticonpicker/jquery.fonticonpicker.min.js" />

For the CSS, forget about calling them as files. Copy and paste them into new templates and call as follows:

HTML:

<xf:css src="questionthreads_fonticonpicker.css" />
<xf:css src="questionthreads_fonticonpicker_grey.css" />

Jake B. · Oct 24, 2017

You can include the files in src/AddOn/Id/_files/js/questionthreads/vendor/jquery.fonticonpicker.min.js and load it with the xf:js tag using the addon="AddOn/Id" tag, and then include that file in your build.json to keep your add-on (for the most part) contained within a single directory for develompent

CMTV · Oct 24, 2017

@Jake B.
I have added jquery.fonticonpicker.min.js to src/QuestionThreads/_files/js/questionthreads/vendor/ and trying to load it:

HTML:

<xf:js src="questionthreads/vendor/jquery.fonticonpicker.min.js" addon="QuestionThreads" />

But xF can't find this file (404). And it is trying to find it in root js directory: http://questionthreads.addon/js/questionthreads/vendor/jquery.fonticonpicker.min.js

Obviously, my file is not there...

CMTV · Oct 24, 2017

Chris D said:
You would need to add these files to something like: js/questionthreads/vendor/fonticonpicker/jquery.fonticonpicker.min.js.

Are you talking about xF root js directory? If so do I need to remove library files programmatically when uninstalling addon?

Jake B. · Oct 24, 2017

CMTV said:
@Jake B.
I have added jquery.fonticonpicker.min.js to src/QuestionThreads/_files/js/questionthreads/vendor/ and trying to load it:

PHP:

<xf:js src="questionthreads/vendor/jquery.fonticonpicker.min.js" addon="QuestionThreads" />

But xF can't find this file (404). And it is trying to find it in root js directory: http://questionthreads.addon/js/questionthreads/vendor/jquery.fonticonpicker.min.js

Obviously, my file is not there...

Do you have xf debug and development mode enabled, I think you'll also need to add $config['development']['fullJs'] = true;

Jumuro · Oct 24, 2017

CMTV said:
If so do I need to remove library files programmatically when uninstalling addon?

If you delete the addon from the admin panel files in any case are not deleted physically.
So, You need to remove them manually always.

CMTV · Oct 25, 2017

@Jake B.
Yes the problem was in missing fullJs property in config.

By the way. I placed my .js file in this path: src/addons/ADDON_ID/_files/js/.
So I can now load it with this simple code:

HTML:

<xf:js src="vendor/jquery.fonticonpicker.min.js" addon="QuestionThreads" />
<xf:js src="test.js" addon="QuestionThreads" />

I this case you can keep all your dev resources in one directory.

The last question. Will this approach with placing lilbrary files within src work in production? Those forums might not have fullJs enabled in config...

Arty · Oct 25, 2017

You shouldn't place any public files in "src", put it in "js"

CMTV · Oct 25, 2017

Arty said:
You shouldn't place any public files in "src", put it in "js"

Why shouldn't? I think it is be better to keep all files related to addon within addon directory. Otherwise we will have a lot of files spread all over xF directories which will create some difficulties with managing files. Moreover it is harder to remove such addons.

Mike · Oct 25, 2017

The src directory is not directly web accessible (this may require some web server config, but the default will block access in Apache).
Putting JS files anywhere outside the js directory means that they won't respect CDN options.
Similarly, it prevents people setting different options for the js directory in the web server, including far future expires and automated compression.

Since you're using _files, our add-on build tools will handle putting the JS in the correct location when the add-on zip is built.

CMTV · Oct 25, 2017

@Mike I understand now. Thank you for detailed explanations.

Jake B. · Oct 25, 2017

Arty said:
You shouldn't place any public files in "src", put it in "js"

I assume it’s a dev environmental, XF has tools specifically to support this

robdog · Oct 26, 2017

Do you have to put CSS files for plugins into templates? I would rather do the less processing on my own within my Sublime Text environment and just include the compiles CSS into a tag without the CSS having to be a template.

Is this possible?

Arty · Oct 26, 2017

Sure, you can include it in <head> section, but that would mean including multiple css files. There is no reason to do that when stylesheets can be combined into one compressed stylesheet using XenForo template engine.

Another downside is you can't use style properties in external stylesheets, which means your css might not follow style layout. Wouldn't you rather change your add-on code to match currently used style?

truonglv · Nov 26, 2017

Hi @Mike @Chris D . How to attach JS while build releases? I have run

Code:

xf-addon:build-release

But some custom JS not included yet.

CMTV · Nov 26, 2017

truonglv said:
Hi @Mike @Chris D . How to attach JS while build releases? I have run

Code:

xf-addon:build-release

But some custom JS not included yet.

Yes I am intersted in it too. For now I just copy js and fonts folders in compressed zip. But it would be really cool to automatically copy all new files and directories with build-release command.

Chris D · Nov 26, 2017

https://xf2demo.xenforo.com/dev-docs/development-tools/#customizing-the-build-process

truonglv · Nov 26, 2017

Chris D said:
https://xf2demo.xenforo.com/dev-docs/development-tools/#customizing-the-build-process

Aha. Thanks so much. I have read this before but i cannot remember where i have seen :/ Tried to searching somewhere but no luck

SyTry · Oct 27, 2018

Chris D said:
https://xf2demo.xenforo.com/dev-docs/development-tools/#customizing-the-build-process

Hello,

Where should we place the build.json file ? I'm trying to add some JS but nothing to do... Thanks !

Regards, SyTry

XF 2.0 Including external library (js and css)

Well-known member

XenForo developer

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

XenForo developer

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

XenForo developer

Well-known member

Well-known member

Similar threads

We value your privacy