Adding Code After Klevu()

7min
There are 2 ways to achieve this:
﻿Set the value via your theme. Use this if the value;
is different depending on the theme (you use multiple themes in your store).
you only have one theme.
﻿Set the value via a custom module. Use this if the value;
depends on values stored in your database.
depends on more complex business logic.
is the same across all your themes and you have a lot of themes that would require an update.
How Code is added after Klevu(klevuSettings)
Klevu(klevuSettings) is added to your page head via layout xml here module-m2-frontend/view/frontend/layout/default_head_blocks.xml.
Specifically in block Klevu_Frontend.js_settings which adds 2 empty contain blocks, so you can inject your own code before and after klevu(klevuSettings).
The template that generates the settings is module-m2-frontend/view/frontend/templates/html/head/js_settings.phtml.
module-m2-frontend/view/frontend/templates/html/head/js_settings.phtml
<?= $secureRenderer->renderTag(
    tagName: 'script',
    attributes: ['type' => 'text/javascript', 'id' => 'klevu_init'],
    content: "\nif(typeof klevuSettings !== 'undefined'){klevu(klevuSettings);}\n",
    textContent: false,
) ?>

<?php
/**
 * Inject javascript into klevu_frontend.init_after 
 * to make changes after klevu() is called
 */
?>
<?= $block->getChildHtml('klevu_frontend.init_after') ?>
<?= $secureRenderer->renderTag(
    tagName: 'script',
    attributes: ['type' => 'text/javascript', 'id' => 'klevu_init'],
    content: "\nif(typeof klevuSettings !== 'undefined'){klevu(klevuSettings);}\n",
    textContent: false,
) ?>

<?php
/**
 * Inject javascript into klevu_frontend.init_after 
 * to make changes after klevu() is called
 */
?>
<?= $block->getChildHtml('klevu_frontend.init_after') ?>
﻿
﻿
Adding Code Via Theme
﻿Magento theme structure documentation.
In your theme create a module Klevu_Frontend, app/code/design/frontend/Vendor/theme/Klevu_Frontend
Create a layout file to add your blocks to our contain klevu_frontend.init_after
app/code/design/frontend/Vendor/theme/Klevu_Frontend/layout/default_head_blocks.xml
app/code/design/frontend/Vendor/theme/Klevu_Frontend/layout/default_head_blocks.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="klevu_frontend.init_after">
            <block name="Vendor_Theme.klevu.init_after"
                   template="Klevu_Frontend::klevu/init_after.phtml"
                   before="-"/>
        </referenceBlock>
    </body>
</page>

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="klevu_frontend.init_after">
            <block name="Vendor_Theme.klevu.init_after"
                   template="Klevu_Frontend::klevu/init_after.phtml"
                   before="-"/>
        </referenceBlock>
    </body>
</page>
﻿
3. Create the template file that will contain your customisations app/code/design/frontend/Vendor/theme/Klevu_Frontend/templates/klevu/init_after.phtml
app/code/design/frontend/Vendor/theme/Klevu_Frontend/templates/klevu/init_after.phtml
<?php

$scriptString = <<<script

<?php /** add any customisation here */ ?>  

script;
?>
<?= $secureRenderer->renderTag(
    tagName: 'script',
    attributes: ['type' => 'text/javascript'],
    content: $scriptString,
    textContent: false
) ?>
<?php

$scriptString = <<<script

<?php /** add any customisation here */ ?>  

script;
?>
<?= $secureRenderer->renderTag(
    tagName: 'script',
    attributes: ['type' => 'text/javascript'],
    content: $scriptString,
    textContent: false
) ?>
﻿
﻿
Adding Code Via A Custom Module
Note: in the example below we have used Module Vendor_Module.
Magento module creation documentation.
Create a custom module Vendor_Module, app/code/Vendor/Module with the following directory structure. Note full module creation is not shown here.
Text
app
- code
- Vendor
 - Module
  - view
    - layout
    - templates
app
- code
- Vendor
 - Module
  - view
    - layout
    - templates
﻿
2. Create a layout file to add your blocks to our contain klevu_frontend.init_after
Vendor/Module/view/frontend/layout/default_head_blocks.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="klevu_frontend.init_after">
            <block name="Vendor_Module.klevu.init_after"
                   template="Vendor_Module::klevu/init_after.phtml"
                   before="-"/>
        </referenceBlock>
    </body>
</page>
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="klevu_frontend.init_after">
            <block name="Vendor_Module.klevu.init_after"
                   template="Vendor_Module::klevu/init_after.phtml"
                   before="-"/>
        </referenceBlock>
    </body>
</page>
﻿
3. Create the template file that will contain your customisations 
Vendor/Module/view/frontend/templates/klevu/init_after.phtml
<?php

$scriptString = <<<script

<?php /** add any customisation here */ ?>  

script;
?>
<?= $secureRenderer->renderTag(
    tagName: 'script',
    attributes: ['type' => 'text/javascript'],
    content: $scriptString,
    textContent: false
) ?>
<?php

$scriptString = <<<script

<?php /** add any customisation here */ ?>  

script;
?>
<?= $secureRenderer->renderTag(
    tagName: 'script',
    attributes: ['type' => 'text/javascript'],
    content: $scriptString,
    textContent: false
) ?>
﻿
﻿
Updated 27 Sep 2024
Did this page help you?
Updating KlevuSettings
Cumulative Layout Shift Facade/Placeholder