DEV Community

Rune Piper for visuellverstehen

Posted on

Adding external frontend widgets in TYPO3

Sometimes we or our clients want to include external JavaScript widgets from e. g. mobile.de or some real estate platform showing their ratings. This is totally fine, but how to implement those scripts the best way? Well, first of all: There is no perfect way but different ways in TYPO3 that all have their purpose.

Fluid-way

Since TYPO3 8.6 Fluid provides two sections provided by the core to add data to <head> and above the ending </body>. This way is usable both in static content elements known as Fluid styled content (FSC) as well as in action templates which is a great benefit. It also does not require any developer to add the widgets to more pages, if the editor can create and move elements. Take a look at how easy it is:

<f:section name="FooterAssets">
    <script async src="//www.mobile.de/bewertungen/ratingwidget.js?dealerId=1234"></script>
</f:section>
Enter fullscreen mode Exit fullscreen mode

Read more about the feature here.

There is also another way, by utilizing the AssetCollector introduced with TYPO3 10.3 You simply can pass the path to the local source or direct content into the f:asset viewhelper like so:

<f:asset.css identifier="identifier123" href="EXT:my_ext/Resources/Public/Css/foo.css" />
<f:asset.css identifier="identifier123">
   .foo { color: black; }
</f:asset.css>
Enter fullscreen mode Exit fullscreen mode

Read more about the feature here.

TypoScript-way

A more static way to implement external libraries is TypoScript. The following code snippet will inject the library only on pages with the uid 1 and 4. While this works perfectly fine, it needs manual effort to add this script to more pages and also needs a developer if it needs to be removed.

mainPage = PAGE
mainPage { … }

[getTSFE().id in [1,4]]
    mainPage.headerData.250 = TEXT
    mainPage.headerData.250.value = <script async src="//www.mobile.de/bewertungen/ratingwidget.js?dealerId=1234"></script>
[end]
Enter fullscreen mode Exit fullscreen mode

Extbase-way

Just like the Fluid-way, Extbase provides the ability to add data to the <head> and above the </body> by adding items to the parsed TypoScript.

$GLOBALS['TSFE']->additionalFooterData['ratingwidget'] = '<script async src="//www.mobile.de/bewertungen/ratingwidget.js?dealerId=456306"></script>'
Enter fullscreen mode Exit fullscreen mode

This is great, because developers does not have to manually add this data when an editor wants it on other pages, because he*she can create plugins himself*herself. It’s also backend driven meaning we don’t add extra data inside a view or template. This is also negative, because we write HTML in PHP code. Since TYPO3 10.3 there is a solution. Calling the above mentioned AssetCollector directly.

use TYPO3\CMS\Core\Page\AssetCollector;
use TYPO3\CMS\Core\Utility\GeneralUtility;

GeneralUtility::makeInstance(AssetCollector::class)
   ->addJavaScript('my_ext_foo', 'EXT:my_ext/Resources/Public/JavaScript/foo.js', ['data-foo' => 'bar']);
Enter fullscreen mode Exit fullscreen mode

These are several ways we use to include external JS widgets and styles for our and our customers websites. What way(s) do you use the most? I prefer the Fluid-way.

Top comments (2)

Collapse
 
typo3freelancer profile image
Simon Köhler

In most cases I use TypoSript for that, because I do not always want to change themes, upload via FTP etc.

I prefer and recommend this way of loading additional CSS or JS files in TYPO3:

[getTSFE().id in [1,4]]
page{
    includeJsFooter{
        mobile_js = https//www.xamplewebsite.com/demo.php?id=1234
    }
}
[end]
Enter fullscreen mode Exit fullscreen mode
Collapse
 
nitsan_technologies profile image
NITSAN - TYPO3 Agency

I've been looking for a comprehensive guide like this to enhance the functionality of my TYPO3 website. The step-by-step instructions make it so easy to follow, even for someone like me who's not a coding expert. Kudos to the author for breaking down the process into manageable chunks!

By the way, I also came across your previous blog on 11 ways to add CSS/JS frontend assets into TYPO3, and it was equally insightful. The combination of both articles has truly empowered me to take control of my TYPO3 website's frontend customization.

Keep up the good work!