Updating KlevuSettings

16min

klevusettings is an object of data passed to the javascript function klevu() these settings determine how klevu theme js is configured theme js configuration documentation can be found here https //docs klevu com/template js/configuration how klevu settings is generated the klevusettings object is generated from a combination of 2 sources 1\) the klevu\frontend\service\klevusettingsbuilder which generates an array of settings via di xml , with each module injecting its own settings e g klevu/frontend/etc/di xml \<type name="klevu\frontend\service\klevusettingsbuilder"> \<arguments> \<argument name="klevusettings" xsi\ type="array"> \<item name="global" xsi\ type="array"> \<item name="apikey" xsi\ type="object">klevu\frontend\service\provider\apikeyprovider\</item> \<item name="language" xsi\ type="object">klevu\frontend\service\provider\languageprovider\</item> \</item> \</argument> \<argument name="isenabledconditions" xsi\ type="array"> \<item name="klevu integrated" xsi\ type="object">klevu\frontend\service\isenabledcondition\isstoreintegratedcondition\</item> \</argument> \</arguments> \</type> 2\) klevu\frontend\service\customsettingsbuilder which generates data from the custom jsv2 settings settings in the admin they are then combined with any setting from customsettingsbuilder overriding klevusettingsbuilder how klevusettings is added to head and passed to klevu klevu jsv2 settings are 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 settings'], content "\nlet klevusettings = " $klevusettings "\n", textcontent false, ) ?> \<?php if (!$viewmodel >issettingsgenerationerror()) ?> \<?php / inject javascript into klevu frontend init before to make changes to klevusettings before passing to klevu() / ?> \<?= $block >getchildhtml('klevu frontend init before') ?> \<?= $securerenderer >rendertag( tagname 'script', attributes \['type' => 'text/javascript', 'id' => 'klevu init'], content "\nif(typeof klevusettings !== 'undefined'){klevu(klevusettings);}\n", textcontent false, ) ?> making changes to the klevusettings object there are 3 ways to make changes to this object set the value in the admin use this if the value does not change based on any business logic does not depend on any frontend element set the value via your theme use this if the value is different depending on the theme (you use multiple themes in your store) depends on an element on the frontend of your store that you can access via javascript 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 depends on an element on the frontend of your store that you can access via javascript, you have multiple themes on your site and you need to apply the change to them all in reality you will likely use a combination of all 3, some set in the admin, some set in theme or module templates that may use a viewmodel defined in your customer module adding klevu theme settings via admin jsv2 settings not found in stores > configuration > klevu section magento already has a setting for these, so we’re using the existing settings rather than duplicating them and causing potential confusion minimum characters used in search, stores > configuration > catalog > catalog > search > minimal query length maximum characters used in search, stores > configuration > catalog > catalog > search > maximum query length language, stores > configuration > general > locale options > locale jsv2 settings in stores > configuration > klevu section all jsv2 settings in config can be overwritten by using stores > configuration > klevu > developer settings > frontend > custom jsv2 settings e g if you need to defer the powerup of the srlp you can do that here set path = powerup landing, type=boolean, value=false a list of available settings can be found here https //docs klevu com/template js/configuration there are 2 settings we have given their own fields within stores > configuration > klevu > developer settings > frontend they are search box selector the id, class, or handle used to bind the search input field this is equivalent to setting search searchboxselector in custom jsv2 options search query parameter the query parameter appended to the srlp url this is equivalent to setting url queryparam in custom jsv2 options note any values set in custom jsv2 settings will override values set in di xml after changing any configuration settings, please remember to clear the config cache adding klevu theme settings via theme magento theme structure documentation sometimes setting these values via the admin is not an option you may need to use javascript to get an element from the page have different settings for different themes within the same store change klevusettings before they are passed to klevu() 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 before 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> \<referencecontainer name="klevu frontend init before"> \<block name="vendor theme klevu init before" template="klevu frontend klevu/init before phtml" before=" "/> \</referencecontainer> \</body> \</page> 3\ create the template file that will contain your customisations app/code/design/frontend/vendor/theme/klevu frontend/templates/klevu/init before phtml app/code/design/frontend/vendor/theme/klevu frontend/templates/klevu/init before phtml \<?php use magento\framework\view\helper\securehtmlrenderer; / @var securehtmlrenderer $securerenderer / / add your customisation e g / $scriptstring = " klevu setobjectpath( klevusettings, // the object of settings we wish to amend 'search showquickonenter', // the path in the object we wish to add/amend klevu toboolean(true) // the value to set ); "; ?> \<?php / render the script tag / ?> \<?= $securerenderer >rendertag( tagname 'script', attributes \['type' => 'text/javascript'], content $scriptstring, textcontent false ) ?> adding klevu theme settings via a custom module note the example below we have used module vendor module magento module creation documentation to add a new setting to klevusettings before the object is output to the page you can add to the klevusettingsbuilder via frontend di xml it is possible to set boolean , const , number and string in the xml, though these can also be set in the admin note any values set in custom jsv2 settings https //docs klevu com/klevu magento v4/updating klevusettings#sx4hi will override values set here via di xml vendor/module/etc/di xml vendor/module/etc/di xml \<type name="klevu\frontend\service\klevusettingsbuilder"> \<arguments> \<argument name="klevusettings" xsi\ type="array"> \<item name="search" xsi\ type="array"> \<item name="searchboxtarget" xsi\ type="boolean">true\</item> \<item name="maxchars" xsi\ type="number">5\</item> \<item name="documentclickpreventselector" xsi\ type="string">#someid\</item> \</item> \<item name="url" xsi\ type="array"> \<item name="queryparam" xsi\ type="string">queryparam\</item> \</item> \</argument> \</arguments> \</type> \<argument name="klevusettings" xsi\ type="array"> contains all the data output as klevusettings the names of the items make up the paths in klevusettings the generated output of the above xml would be klevusettings = { search { searchboxtarget true, maxchars 5, documentclickpreventselector "#someid" }, url { queryparam "queryparam" } }; more interesting though is the ability to pass an instance of klevu\frontendapi\service\provider\settingsproviderinterface e g vendor/module/etc/di xml \<type name="klevu\frontend\service\klevusettingsbuilder"> \<arguments> \<argument name="klevusettings" xsi\ type="array"> \<item name="search" xsi\ type="array"> \<item name="searchboxselector" xsi\ type="object">vendor\module\service\provider\yourprovider\</item> \</item> \</argument> \</arguments> \</type> if the provider returns a value from core config data you can create a virtualtype for klevu\frontend\service\provider\settingsprovider and pass it the path and return type vendor/module/etc/di xml \<virtualtype name="vendor\module\service\provider\yourprovider" type="klevu\frontend\service\provider\settingsprovider"> \<arguments> \<argument name="path" xsi\ type="string">path/to your/setting\</argument> \<argument name="returntype" xsi\ type="const">klevu\frontend\block\adminhtml\form\field\typecolumn type value string\</argument> \</arguments> \</virtualtype> valid returntype are type value boolean , type value integer , and type value string if your provider requires more business logic, create the class that implements klevu\frontendapi\service\provider\settingsproviderinterface vendor/module/service/provider/yourprovider php \<?php declare(strict types=1); namespace vendor\module\service\provider; use klevu\frontendapi\service\provider\settingsproviderinterface; class yourprovider implements settingsproviderinterface { public function get() string|int|bool|null { // add your logic } } settings provider examples klevu\frontend\service\provider\apikeyprovider klevu\frontendsearch\service\provider\landingurlprovider klevu\frontendcategorynavigation\service\provider\landinginfinitescrolloffsetprovider your provider may throw an exception of type klevu\frontend\exception\outputdisabledexception this will prevent the setting from being added to the output

Search Theme Layout

Adding Code After Klevu()