Frontend
Theme JS
Adding External Javascript
4min
klevu adds external javascript files to your site to enable klevu theme js to work as expected the core file is always added when any klevu solution is enabled other files include recommendations, category navigation, srlp and quick search javascript required at load time the majority of the files added by klevu are required at load time and are added to the head via the magento securerenderer like so module m2 frontend/view/frontend/templates/html/head/js includes phtml \<?php foreach ($viewmodel >getlinks() as $id => $link) ?> \<?= / @noescape / $securerenderer >rendertag( tagname 'script', attributes \[ 'type' => 'text/javascript', 'id' => $escaper >escapehtmlattr($id), 'src' => $escaper >escapeurl(string $link), ], textcontent false, ) ?> \<?php endforeach; ?> javascript that can be deferred quick search however is not required at load time and can be loaded after page load we have taken a lead from hyvä themes with our approach here adding files to the head after load to avoid blocking the rendering of the page e g const script = document createelement('script') script src = 'https //www example com/render blocking script js'; script type = 'text/javascript'; document head append(script); our implementation can be found in this template file module m2 frontend/view/frontend/templates/html/head/js includes defer phtml \<?php foreach ($viewmodel >getlinks() as $id => $link) ?> \<?php $scriptstring = " var deferredscript = document createelement('script'); deferredscript type = 'text/javascript'; deferredscript id = '{$escaper >escapehtmlattr($id)}'; deferredscript src = '{$escaper >escapeurl(string $link)}'; document head append(deferredscript); "; ?> \<?= / @noescape / $securerenderer >rendertag( tagname 'script', attributes \[ 'type' => 'text/javascript', 'id' => 'klevu include defer ' $escaper >escapehtmlattr($id), ], content $scriptstring, textcontent false, ) ?> \<?php endforeach; ?> we loop through all provided links and add them to the head after page load adding scripts to the head in this manner is better for performance however, it does not add those scripts via securerenderer external scripts added from klevu com are whitelisted via etc/csp whitelist xml in the relevant modules note all klevu scripts are removed from the checkout page by default if you require those scripts to be added via the securerenderer please ensure you inject quick search to the head using the first method layout xml to make that switch vendor/magento/view/frontend/layout/default xml \<referencecontainer name="klevu frontend before body end"> \<! remove deferred script > \<block name="klevu frontend js includes defer search" remove="true"/> \<! add to head on page load > \<block name="klevu frontend js includes search" template="klevu frontend html/head/js includes phtml" after=" "> \<arguments> \<argument name="js includes view model" xsi\ type="object">klevu\frontendsearch\viewmodel\html\head\jsincludesquick\</argument> \<argument name="escaper view model" xsi\ type="object">klevu\frontend\viewmodel\escaper\</argument> \</arguments> \</block> \</referencecontainer> the example given shows how to make this change in a module theses change could alternatively be made in your theme(s)