Add external JS and CSS files in an Add On

[abdfahim]

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.

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

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

 

[abdfahim]

For JS, I created a new template "mytest_owl_js" in master style

mytest_owl_js:

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

Then used following 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.

 

[electrogypsy]

I'm interested in learning how to do this as well, if someone wants to chime in on the OP.

 

[Chris D]

Don't use template hooks, they're deprecated and removed from XF2.

Use template modifications.