Using Bootstrap5 components in T4

hammyzone

How do you use Bootstrap 5's UI components in T4? eg accordion, modal etc

It seems the appropriate JS files are not enabled. But any time I try enabling them va the 'add-ons" feature in the template setting, it won't work.

I am using

T4 on Joomla 4.1
T4 Bs5 template

saguaros

Hi hammyzone

T4 template has 2 versions: T4 Blank + T4 BS5 Blank, make sure that the page you're using bootstrap 5 ui components is also using T4 Bs5 template.

If it still has issue, you can share the URL + super admin account of your site and the part that you're having issue with, I will check for you.

hammyzone

Hi,

I only have instances of the T4 BS5 Blank template on my site.

I notice that the budle.js file is actually BS4, not BS5.

So, when I added the bundle file to the "addons" parameter and used BS4 HTML, the components work.

If I replace the bundle file with BS5's bootstrap.budle.js and use BS5 HTML code, the components work but the off-canvas is completely broken.

Are these issues that the team are aware of?

Thanks again!

saguaros

hammyzone I need a closer look of how you use this, kindly share the details of login info and how you want to achieve so I can check directly for you.

hammyzone

saguaros

Okay I will set up a clone of the site and get back to you with credentials.

One other issue I have is (on my other server) if I clone a style, changes will not save when I try up amend it. So, I create a new style, duplicate the .json file so it has its own unique layout....T4 is not updating the json file with my changes. If I manually go in and amend the json file, I see the changes in T4. This problem happens on one server but not the other. One is a dedicated host and the other is a shared IONOS host. I see from forums that this is quite a common problem.

hammyzone

I have added you as a super admin, hopefully you get the email notification.

You can see that the version of bootstrap.bundle.js is for v4, not v5.

I have added a BS4 accordion to the url /test and you can see that it works. A v5 accordion will not work. Nor will any BS5 component, obviously.

If I upgrade the bundle.js file to BS5, the off-canvas breaks completely.

saguaros

hammyzone

You can edit Fields in your first post and share login info there so only Moderators can see:

coucoux

Hello,

I had a problem using a simple modal. The popup image didn't show.

When I was under Astroid Template, I simply added JHtml::_('bootstrap.modal'); to the index.php file of the template and the modal worked.

But with T4, it didn't work. I tried to insert it in global Settings > custom code. It didn't work.

Then I created a mod_custom of T4 (In System > Site Template) and opened the default.php which is stored in /templates/t4_bs5_blank/html/mod_custom/default.php

I inserted JHtml::_('bootstrap.modal'); before the closing ?> and it worked.

...
if ($params->get('backgroundimage'))
{
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
$wa = Factory::getApplication()->getDocument()->getWebAssetManager();
$wa->addInlineStyle('
#' . $modId . '{background-image: url("' . Uri::root(true) . '/' . HTMLHelper::_('cleanImageURL', $params->get('backgroundimage'))->url . '");}
', ['name' => $modId]);
}

JHtml::_('bootstrap.modal');

The modal now opens normally.

My questions are :

Is it safe/proper to do so ?
Should I insert this code in another file ?

Thank you