Joomla Template and Foundation 5 Framework

Question

I have created a basic template for Joomla using Foundation 5 Framework but the call to include Foundation and jQuery and the call to fire Foundation needs to be the last part that is loaded.

<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/bower_components/foundation/js/foundation.min.js"></script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/bower_components/jquery/jquery.js"></script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/app.js"></script>

So I have added them into the template and they can be navigated to when I load the template up but for some reason foundation does not exist according to firebug and won't load.

Answer 1

If Firebug is saying that the file does not exist then you have used the incorrect path. As for the importing of jQuery, I would recommend you use the Joomla standards for this which will also import the file that comes package use noConflict() mode like so >> JHtml::_('jquery.framework');

Also try using the addScript() method for importing your other scripts, however please ensure that the paths are correct. So your full code will look like this:

<?php
    JHtml::_('jquery.framework');
    JHtml::_('script',  JUri::root() . 'templates/template_name/bower_components/foundation/js/foundation.min.js');
    JHtml::_('script',  JUri::root() . 'templates/template_name/js/app.js');
?>

Currently, your .js files are within the template folder, however are within different sub-folders, thus I would recommend sticking to 1 main folder for all javascript files.

Update:

I have just tested Foundations and it works fine for me. First of all, you need to ensure that jQuery is loaded first. Add the following code before the ending ` tag in your template index.php file:

<script src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/bower_components/jquery/jquery.js"></script>
<script src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/bower_components/foundation/js/foundation.min.js"></script>
<script> $(document).foundation(); </script>

Hope this helps