How could I add css and js files via controller initialize action and page renderer?

Question

I am using the new page renderer from TYPO3 8 on controller level to add extension specific CSS and JS files via an initializeAction:

public function initializeAction()
{
    $extPath = ExtensionManagementUtility::siteRelPath(
        $this->request->getControllerExtensionKey()
    );

    $extJs = $extPath . 'Resources/Public/Js/ext_booking_manager.min.js';
    $extCss = $extPath . 'Resources/Public/Css/ext_booking_manager.css';

    /** @var PageRenderer $pageRenderer */
    $pageRenderer = $this->objectManager->get(PageRenderer::class);

    $pageRenderer->addCssFile($extCss);
    $pageRenderer->addJsFooterFile(
        $extJs, 'text/javascript', false
    );
}

This is working fine sometimes, but only sometimes. This means that sometimes the css file and js file will be properly added and sometimes if I reload the page then the files will not be added properly. Is there something wrong?

For older versions like TYPO3 7, I used something similar like this:

public function initializeAction()
{
    $extPath = ExtensionManagementUtility::siteRelPath(
        $this->request->getControllerExtensionKey()
    );

    $extJs = $extPath . 'Resources/Public/Js/ext_booking_manager.min.js';
    $GLOBALS['TSFE']->getPageRenderer()->addJsFooterFile(
        $extJs, 'text/javascript', false
    );

    parent::initializeAction();
}

But this will not work for TYPO3 8 anymore. Any suggestions?

score 7 · Accepted Answer · answered Aug 01 '17 at 14:18

7

Notice that there is a different approach available in TYPO3 v8 using the HeaderAssets and FooterAssets sections in your template. Thus your action template could look like this:

Your template code

<f:section name="FooterAssets">
  <link rel="stylesheet" href="{f:uri.resource(path: 'Css/ext_booking_manager.css')}"/>
  <script src="{f:uri.resource(path: 'Js/ext_booking_manager.min.js')}"></script>
</f:section>

This way you don't need any resource logic in your controller, thus your initializeAction() method can be dropped.

BTW: I'd recommend using JavaScript as directory name for JavaScript resources to stay in line with TYPO3 conventions.

answered Aug 01 '17 at 14:18

Mathias Brodala

5,905
13
30

Ah ok, thank you. That's nice, I will check it out and I will change the js directory name, too :). – Fox Aug 01 '17 at 14:21
Ok, I have removed the resource logic and updated my extension template and the FooterAssets section is working, but it seems that I got the same strange behavior as I got when I use the page renderer. Sometimes the assets will be rendered and sometimes not. Do you have an idea? – Fox Aug 01 '17 at 14:27
Is your action always fully cached? I expect issues with uncached actions. – Mathias Brodala Aug 02 '17 at 09:15
Yes, I think so. I have added all my actions to the uncached action section inside the localconf of my extension, too. \TYPO3\CMS\Extbase\Utility\ExtensionUtility::configurePlugin( 'Fox.' . $extKey, 'P1', [ 'BookingItem' => 'new, create' ], [ 'BookingItem' => 'new, create' ] ); – Fox Aug 02 '17 at 09:20
@Fox Could you solve your problem? I am experiencing exact the same problem, as you describe here. The `` is sometimes not loaded. I was able to track this issue down to the fact, that it is related to the cache. As soon as I disable the TYPO3 cache it works perfectly fine - but this is not what I want :-) – chris May 20 '20 at 09:06
@chris I didn't use FooterAssets anymore. Do you run TYPO3 8 or a newer version? For TYPO3 8 and 9 I was using the \TYPO3\CMS\Core\Page\PageRenderer approach with a custom utility class and a initialize action like my first approach and I didn't run into problems anymore. With TYPO3 10 you can use the new assets view helper. – Fox May 20 '20 at 13:32
@Fox I am currently on TYPO3 9. I like the idea of the `FooterAssets` very much, because it is very easy to add assets in a template. What is the exact difference to your posted question you are doing now? Would you mind to post your code in an additional answer? – chris May 22 '20 at 07:11
@chris yeah FooterAssets was a nice approach, but sometimes it was just not working as expected for me. You can try to use the PageRenderer as I did and if this is not working, you can also try a TypoScript approach. If you wanna stay with FooterAssets then you should check if your action is cached and not uncached as Mathias suggested. – Fox May 25 '20 at 05:43
Is there no other possibility so assign header or footer links/scripts directly inside an controller action without fluid? I need a dynamic src value and it seems impossible to assign variables from the action to header/footer asset sections (the value will be NULL). – Moongazer Jun 11 '20 at 15:26
@Moongazer Hm? The action approach from the question is working without fluid. – Fox Jun 12 '20 at 13:07

score -3 · Answer 2 · answered Aug 02 '17 at 07:18

-3

In TYPO3 8 getPageRenderer() Method is Deprecated. You can see here Deprecated Methods.

Now you can use this methods in TYPO3 8 Like this solution

answered Aug 02 '17 at 07:18

Pravin Vavadiya

3,195
1
17
34

Yes, I know that and I have posted both variants the old way and the new way in my question..., but I think @Mathias Brodala posted the better way. Currently I got the same problems with page renderer or footer assets section. The files will be added successfully to the page, but if I hard reload the page like (strg + f5 for chrome) then sometimes both files are gone. Dont care if I use the page renderer or the footer assets section. – Fox Aug 02 '17 at 09:01

How could I add css and js files via controller initialize action and page renderer?

2 Answers2

Linked