Integrating Search Template in Magento 2

Mayur Mesavani

Modified on: Thu, 7 Mar, 2024 at 4:20 AM

This guide describes the steps to integrate ready-to-use Search templates into your Magento store. Click here to learn about Search Templates.

There are various options to incorporate the customization code you downloaded into your Magento 2 store. However, in this guide, we will highlight the most straightforward method.

Prerequisites

You have Klevu’s Magento app installed and Klevu is integrated into the storefront.
Template JS must be integrated into the Magento 2 store. (If your theme files are different, please contact support.)

Before moving ahead, make sure that you’ve access to the files of your Magento 2 store and are well-versed in how to modify the store theme.
We are making a couple of assumptions in this guide, so you will need to make the necessary changes to the code for your particular store:
You are creating a new custom theme based on the default Magento 2 theme Luma.
In our example we downloaded the Earth & Essence Search Themes.
You will need to modify the code in Step 7 to match the names of the files you downloaded for your store.
You are using the Klevu module v3 to integrate Klevu with Magento 2
- When using module v2 or v3 the folder you will create in Step 5 will be called Klevu_FrontendJs
- When using module v4 or above the folder you will create in Step 5 will be called Klevu_Frontend
- Modify the code in Steps 6 & 7 to match the folder name you used in Step 5.

Integrating ready-to-use template in Magento

Inside your Magento 2 src folder, go to app/design/frontend and create a new folder to hold your customizations. In this example, we’re creating a new folder called Vendor.

Step 1: Within the new Vendor folder, create a new folder called Theme. We are going to create a number of files within this folder.

Step 2: Create a file called composer.json and copy the following code into it :

{
    "name": "vendor/theme",
    "description": "Magento 2 Demo Theme",
    "require": {
        "php": "~5.6|~7.0|~7.1|~7.2|~7.3|~7.4|~8.1|~8.2",
        "magento/framework": "100.0.*",
        "magento/theme-frontend-luma": "100.0.*"
    },
    "type": "magento2-theme",
    "version": "1.0.0",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

Step 3: Create a file called registration.php and copy the following code into it :

<?php

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
    ComponentRegistrar::THEME,
    'frontend/Vendor/theme',
    __DIR__
);

Step 4: Create a file called theme.xml and copy the following code into it :

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Vendor Theme</title>
    <parent>Magento/luma</parent>
    </theme>

Step 5: Create a folder called Klevu_Frontend (Klevu module v4+) or Klevu_FrontendJs (Klevu module v2 or v3).

Within the Klevu_Frontend or KlevuFrontendJs folder (depending on your Klevu module version), create three folders:
a. layout
b. templates
c. web

For this example, we are going to assume you are using the Magento v3 module to integrate Klevu, so we will use Klevu_FrontendJs in all of the code examples.

Step 6: Within the layout folder, create a file called default.xml and copy the following code into it :

<?xml version="1.0"?>

<!-- Copyright © Klevu Oy. All rights reserved. See LICENSE.txt for license details. -->

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="before.body.end">
            <block name="Vendor_Theme.jsv2_theme"
                   template="Klevu_FrontendJs::jsv2_theme.phtml"
                   before="-"/>
        </referenceBlock>
    </body>
</page>

Step 7: Within the templates folder, create a file called jsv2_theme.phtml and copy the following code into it :

<?php

/**
 * Copyright © Klevu Oy. All rights reserved. See LICENSE.txt for license details.
 */

declare(strict_types=1);
use Magento\Framework\View\Element\Template;

/**
 * @var Template $block
 */

?>

<script defer
        src="<?= $block->getViewFileUrl('Klevu_FrontendJs::js/klevu-theme-earth_essence.js') ?>"></script>

<link rel="stylesheet"
      type="text/css"
      href="<?= $block->getViewFileUrl('Klevu_FrontendJs::css/klevu-theme-earth_essence.css') ?>">

Step 8: Within the web folder, create two more folders :

Within each of these folders copy the respective files you downloaded.

For example, if the files you downloaded were named klevu-theme-earth_essence.js and klevu-theme-earth_essence.css, then your folder structure within src/app/design/frontend/Vendor would look like this :

There are different ways to add the custom code you got to your Magento 2 store. In this guide, we have shown you the easiest way, but this method can easily be adapted to add the files to an existing custom theme you likely already created.

Please consult with your developer who knows JavaScript and CSS to explore other ways of integrating ready-use-templates on your store.