Add external JS and CSS files in an Add On

abdfahim

Well-known member
Hi,

I want to add external JS and CSS file in my addon.

1. For JS file, I tried using template hook "page_container_js_body" in the following way, but it fails.

Code:
if($hookName == 'page_container_js_body')
{
            $contents = "<xen:require js=\"js/MyTest/owl.carousel.min.js\" />.$contents;
}

However, I can add inline JS with the same command without an issue. Also, I can add the JS file with simple template modification just by adding following line in page_container_js_body template
Code:
<xen:require js="js/MyTest/owl.carousel.min.js" />

2. How to add external CSS files in an add on. Should I just create a new template copying that CSS file?
 
For JS, I created a new template "mytest_owl_js" in master style

mytest_owl_js:
Code:
<xen:require js="js/MyTest/owl.carousel.min.js" />

Then used following code,
Code:
public static function templateHook($hookName, &$contents, array $hookParams, XenForo_Template_Abstract $template)
    {
        if($hookName == 'page_container_js_body')
        {
            $contents .= $template->create('mytest_owl_js');
        }
    }

Hope I am doing it right.

Also, still not sure how to add the external CSS.
 
Don't use template hooks, they're deprecated and removed from XF2.

Use template modifications.
 
Top Bottom