Theme JS Overview

4min
Template JS Documentation
Klevu Template JS documentation can be found here https://docs.klevu.com/template-js.
Best Practice
Including Javascript
We have added 2 containers to the layout, one in head and one before body end. We recommend adding all Klevu related Javascript to these 2 contains. 
These 2 contains are named Klevu_Frontend.head.additional and Klevu_Frontend.before.body.end.
This makes it very easy to remove all Klevu scripts from a particular page. We already remove all Klevu Javascript from the checkout page, like so.
module-m2-frontend/view/frontend/layout/checkout_index_index.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="Klevu_Frontend.head.additional" remove="true" />
        <referenceContainer name="Klevu_Frontend.before.body.end" remove="true" />
    </body>
</page>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="Klevu_Frontend.head.additional" remove="true" />
        <referenceContainer name="Klevu_Frontend.before.body.end" remove="true" />
    </body>
</page>
﻿
Ensure Klevu is ready before accessing it
Calling any klevu methods before the Klevu JS has loaded will result in errors on the frontend. This may occur if there is a delay in loading the core Klevu library for any reason (e.g code being added being added higher up the page or async being added to the script tag).
It is always a good idea to wrap JS containing calls to klevu in window._klvReady.push(function(){}). This ensures the code wrapped inside _klvReady is not fired until klevu is available.
e.g.
PHP
<?php

$scriptString = <<<script

window._klvReady = window._klvReady || [];
window._klvReady.push(function() {  
  /** 
   * add your code here 
   * e.g. 
   * klevu.setObjectPath(
   *   klevuSettings,
   *   'search.showQuickOnEnter',
   *   klevu.toBoolean(true)
   * );
   */
});

script;
?>

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

<?php

$scriptString = <<<script

window._klvReady = window._klvReady || [];
window._klvReady.push(function() {  
  /** 
   * add your code here 
   * e.g. 
   * klevu.setObjectPath(
   *   klevuSettings,
   *   'search.showQuickOnEnter',
   *   klevu.toBoolean(true)
   * );
   */
});

script;
?>

<?= $secureRenderer->renderTag(
    tagName: 'script',
    attributes: ['type' => 'text/javascript'],
    content: $scriptString,
    textContent: false
) ?>
﻿
Note: window._klvReady.push is omitted from the code examples in the rest this documentation for brevity.
﻿
Updated 27 Sep 2024
Did this page help you?
Result Landing Page (SRLP) URL
Toggle View