Adding Code After Klevu()

7 min

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.

<?= $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

<?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

<?php
$scriptString = "
  // add any customisation here
";
?>

<?= $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.

app
- code
- Vendor
 - Module
  - view
    - layout
    - templates

2. Create a layout file to add your blocks to our contain klevu_frontend.init_after

<?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

<?php

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