Combined Scripts
Use new combined scripts on Search and Category pages to improve JavaScript performance.
Typically a Klevu Template JS integration involves adding a number of scripts.
- Klevu Core (klevu.js) : this is the framework and utilities used by the Template JS library.
- Klevu Quick Search Theme : this is the portion of the library responsible for the search-as-you-type functionality that is added to the search input on the store.
- Klevu Landing Search Theme : this is the portion of the library responsible for the search result landing page.
- Klevu Category Search Theme : this is the portion of the library responsible for the category pages.
The Search Landing Page script and Category/Collection Landing Page script share almost identical JavaScript code with some small differences and they never load at the same time. However, the Quick Search script does share a lot of JavaScript code with both the Search and Category/Collection scripts, so when you are on either the search or category pages and you also have quick search loaded using individual script files you end up with some duplicated JavaScript code being downloaded and loaded in the browser.
The overall code is not large, so the savings are not drastic, but there is a 42% decrease in the size of the JavaScript code when we combine quick search with either the search or category page script.
There is no benefit when loading any other pages besides search or category since the file for quick search has not changed.
Unfortunately these combined scripts can only be used with a manual integration of Klevu, so you cannot use these files when using the automated integration available in the Klevu Search App.
We have included two examples shown below in order to show how the basic logic needs to be modified from our original manual integrations in Shopify and BigCommerce. The original method included the loading of individual files for quick, search, and category. With these new combined scripts only one script is loaded in each scenario. Here is the logic:
If you are on a category page, load: quick-catnav-search-theme.js
Else if you are on the search page, load: quick-landing-search-theme.js
Else on all other pages, load: quick-search-theme.js
The implementation of the combined scripts for the search and category pages involves modifying the steps outlined in the manual integration.
The original manual integration steps for Shopify can be found by clicking here. These steps are for the Dawn theme which is an OnlineStore 2.0 theme. Below we will outline the changes necessary for Shopify.
Note: These steps are just for reference, so if you have already integrated Klevu you will need to make the necessary adjustments to this information that work with your theme.
In the file called Snippets/klevu-quick-search-theme.liquid you will need to comment the following code:
In the file called Snippets/klevu-metadata.liquid you will need to replace its contents with the following code:
The original manual integration steps for BigCommerce can be found by clicking here. Below we will outline the changes necessary for BigCommerce.
Note: These steps are just for reference, so if you have already integrated Klevu you will need to make the necessary adjustments to this information that work with your theme.
In the file called templates/layout/base.liquid you will need to replace the following code:
With the following code:
The above code change basically replaces the loading of individual scripts for Quick, Search, and Category with the combined scripts.
![Doc contributor](https://s3.amazonaws.com/archbee-animals/tiger.png)