Search Theme Layout

6 min

overview if you have customised search theme layout in kmc you will have js and css files to add to your magento installation there are multiple ways to achieve this, via a theme or a module add via your theme if the changes are only required on that theme or base theme add via a module if the changes are required on all themes or if there is some extra business logic required in a viewmodel to determine when the templates should be used it is also possible to combine the approaches if changes are required in one (base) theme, but also require business logic from a viewmodel for these examples, we will refer to those files as klevu theme starter js and klevu theme starter css your actual filenames will differ from these add via theme magento theme structure docs in this example, we are using vendor/theme as your theme create a directory in your theme for klevu frontend within this directory add the structure as below app \ design \ frontend \ vendor \ theme \ klevu frontend \ layout \ templates \ web \ css \ js add the css file to web/css directory add the javascript file to web/js directory create a layout file to inject the template into your theme via the container klevu frontend before body end this container enables us to easily remove all klevu scripts from a page, e g checkout app/design/frontend/vendor/theme/klevu frontend/layout/default 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> \<! this container contains all klevu scripts added before body end > \<referencecontainer name="klevu frontend before body end"> \<block name="vendor theme jsv2 theme" template="klevu frontend jsv2 theme phtml" before=" "/> \</referencecontainer> \</body> \</page> create the template file which contains the css and javascript links app/design/frontend/vendor/theme/klevu frontend/templates/jsv2 theme phtml \<?php declare(strict types=1); use magento\framework\view\element\template; use magento\framework\view\helper\securehtmlrenderer; / @var template $block @var securehtmlrenderer $securerenderer / ?> \<?= $securerenderer >rendertag( tagname 'script', attributes \[ 'type' => 'text/javascript', 'src' => $block >getviewfileurl('klevu frontend js/klevu theme starter js') ], ) ?> \<?= $securerenderer >rendertag( tagname 'link', attributes \[ 'rel' => 'stylesheet', 'href' => $block >getviewfileurl('klevu frontend css/klevu theme starter css') ], ) ?> add via module magento module creation documentation in this example, we are using vendor/module as your module create the module and add the following structure to view note full module creation is not shown here app \ code \ vendor \ module \ view \ frontend \ layout \ templates \ web \ css \ js add the css file to web/css directory add the javascript file to web/js directory create a layout file to inject the template into your theme via the container klevu frontend before body end this container enables us to easily remove all klevu scripts from a page, e g checkout vendor/module/view/frontend/layout/default 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> \<! this container contains all klevu scripts added before body end > \<referencecontainer name="klevu frontend before body end"> \<block name="vendor module jsv2 theme" template="vendor module jsv2 theme phtml" before=" "/> \</referencecontainer> \</body> \</page> create the template file which contains the css and javascript links vendor/module/view/templates/jsv2 theme phtml \<?php declare(strict types=1); use magento\framework\view\element\template; / @var template $block / ?> \<?= $securerenderer >rendertag( tagname 'script', attributes \[ 'type' => 'text/javascript', 'src' => $block >getviewfileurl('vendor module js/klevu theme starter js') ], ) ?> \<?= $securerenderer >rendertag( tagname 'link', attributes \[ 'rel' => 'stylesheet', 'href' => $block >getviewfileurl('vendor module css/klevu theme starter css') ], ) ?>

Toggle View

Updating KlevuSettings