Add jQuery and Bootstrap To Template

Everything to do with Joomla! 3.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Post Reply
LikeStuff
Joomla! Guru
Joomla! Guru
Posts: 761
Joined: Mon Jul 24, 2006 2:06 am

Add jQuery and Bootstrap To Template

Post by LikeStuff » Tue Sep 11, 2018 11:49 pm

I'm trying to add jquery and bootstrap in my template but it doesn't seem to be working. Is the below the correct way to add it? I'm using the protostar template.

This is what is in the template:

Code: Select all

// Add JavaScript Frameworks
JHtml::_('jquery.framework');
JHtml::_('bootstrap.framework');
$doc->addScriptVersion($this->baseurl . '/templates/' . $this->template . '/js/template.js');
$doc->addScriptVersion($this->baseurl . '/templates/' . $this->template . '/js/main.js');
$doc->addScriptVersion($this->baseurl . '/templates/' . $this->template . '/js/modernizr.js');
$doc->addScriptVersion($this->baseurl . '/templates/' . $this->template . '/media/jui/js/bootstrap.min.js');

Code: Select all

// Add Stylesheets
$doc->addStyleSheetVersion($this->baseurl . '/templates/' . $this->template . '/css/template.css');
$doc->addStyleSheetVersion($this->baseurl . '/templates/' . $this->template . '/media/jui/css/bootstrap.min.css');
I notice some use "$doc->addScript" and some use "$doc->addScriptVersion", which is the correct way?
I notice some use "$doc->addStyleSheet" and some use "$doc->addStyleSheetVersion", which is the correct way.

And do I add this in the script link "text/javascript" or "text/css" as per the example below.
$doc->addScript('/templates/' . $this->template . '/js/main.js', 'text/javascript');

Thank you!

SharkyKZ
Joomla! Ace
Joomla! Ace
Posts: 1120
Joined: Fri Jul 05, 2013 10:35 am
Location: Unknown

Re: Add jQuery and Bootstrap To Template

Post by SharkyKZ » Wed Sep 12, 2018 6:22 am

The modern way of adding resources is with HTMLHelper/JHtml.

To load jQuery and Bootstrap scripts:

Code: Select all

\JHtml::_('jquery.framework');
\JHtml::_('bootstrap.framework');
To override core bootstrap.min.js file, place it in your template's /js/jui/ directory. It will be detected automatically. You may also add bootstrap.js which is used when debug is enabled.

To load custom scripts. Notice you don't need to prefix with js folder, it's looked up automatically.

Code: Select all

\JHtml::_('script', 'template.js', array('version' => 'auto', 'relative' => true));
\JHtml::_('script', 'main.js', array('version' => 'auto', 'relative' => true));
\JHtml::_('script', 'modernizr.js', array('version' => 'auto', 'relative' => true));
The use of Bootstrap CSS is a bit weird. Because Joomla comes with additional custom Bootstrap CSS files and because Protostar's template.css already includes Bootstrap. If you want to load the Bootstrap CSS, use this:

Code: Select all

\JHtml::_('bootstrap.loadCss', true, $this->direction);
This will load bootstrap.css, bootstrap-responsive.css and bootstrap-extended.css (also bootstrap-rtl.css if using RTL language) files from media folder. These can be overriden same way as JS.

To load custom CSS use this, template's css directory will be looked up automatically.

Code: Select all

\JHtml::_('stylesheet', 'template.css', array('version' => 'auto', 'relative' => true));

LikeStuff
Joomla! Guru
Joomla! Guru
Posts: 761
Joined: Mon Jul 24, 2006 2:06 am

Re: Add jQuery and Bootstrap To Template

Post by LikeStuff » Wed Sep 12, 2018 7:14 pm

Wow! Thanks for that.

I noticed that it ignores the bootrap css unless I add the link below in the header. So I can either leave it in the header or if I choose not to later any idea why Joomla is not picking it up?

Code: Select all

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
2) How do I get my template.css to be the dominant CSS. The bootstrap css made a whole lot of changes to the website. I basically only need the grid system but I guess there's no css with just that.

3) I viewed a recent index.asp from Joomla and noticed that there is no "/" in front of the JHtml stuff. Does it matter which way it's added?

This is what I have now:

Code: Select all

// Load jQuery and Bootstrap Scripts
\JHtml::_('jquery.framework');
\JHtml::_('bootstrap.framework');

// Custom Scripts
\JHtml::_('script', 'template.js', array('version' => 'auto', 'relative' => true));
\JHtml::_('script', 'main.js', array('version' => 'auto', 'relative' => true));
\JHtml::_('script', 'modernizr.js', array('version' => 'auto', 'relative' => true));

// Load Bootstrap CSS
\JHtml::_('bootstrap.loadCss', true, $this->direction);

// Custom Stylesheets
\JHtml::_('stylesheet', 'template.css', array('version' => 'auto', 'relative' => true));

// Add html5 shiv
JHtml::_('script', 'jui/html5.js', array('version' => 'auto', 'relative' => true, 'conditional' => 'lt IE 9'));
Thanks again!!

KianWilliam
Joomla! Explorer
Joomla! Explorer
Posts: 251
Joined: Thu Jan 12, 2017 10:13 am

Re: Add jQuery and Bootstrap To Template

Post by KianWilliam » Thu Sep 13, 2018 5:39 am

And What version of bootstrap joomla 3.8.12 is using? if it is not using the last version of bootstrap, can we load it to our template using the above way?
Kian William

LikeStuff
Joomla! Guru
Joomla! Guru
Posts: 761
Joined: Mon Jul 24, 2006 2:06 am

Re: Add jQuery and Bootstrap To Template

Post by LikeStuff » Thu Sep 13, 2018 2:53 pm

2) How do I get my template.css to be the dominant CSS. The bootstrap css made a whole lot of changes to the website. I basically only need the grid system but I guess there's no css with just that.
I add the template.css in the header below the bootstrap CSS and that seems to work. I may have this wrong but it's working so far - I just hope I don't have too much stuff loading on the site.

Code: Select all

<head>
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="/templates/protostar/css/template.css">
</head>


Post Reply

Return to “Templates for Joomla! 3.x”