Combined Scripts

8min
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. 
Benefit
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.
Caveat
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. 
Technical Overview
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
Detailed Examples
The implementation of the combined scripts for the search and category pages involves modifying the steps outlined in the manual integration. 
Shopify 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: 
HTML
{% comment %}
<script src="https://js.klevu.com/theme/default/v2/quick-search-theme.js"></script>

{% if template == 'page.klevu-search-results' %}
    <!-- Include Search Results Landing Page Theme -->
    <script src="https://js.klevu.com/theme/default/v2/landing-page-theme.js"></script>
{% endif %}
{% endcomment %}
{% comment %}
<script src="https://js.klevu.com/theme/default/v2/quick-search-theme.js"></script>

{% if template == 'page.klevu-search-results' %}
    <!-- Include Search Results Landing Page Theme -->
    <script src="https://js.klevu.com/theme/default/v2/landing-page-theme.js"></script>
{% endif %}
{% endcomment %}
﻿
In the file called Snippets/klevu-metadata.liquid you will need to replace its contents with the following code: 
HTML
{% if template.name == 'collection'%}
    <script src="https://js.klevu.com/theme/default/v2/quick-catnav-search-theme.js"></script>
    <script type="text/javascript">
    var klevu_page_meta = {
        "pageType": "category",
        "categoryName": "{{collection.title | escape }}",
        "categoryUrl": "{{shop.url}}{{collection.url}}",
    };
    </script>
{% elsif template.name == 'search'%}
    <script src="https://js.klevu.com/theme/default/v2/quick-landing-search-theme.js"></script>
{% else %}
    <script src="https://js.klevu.com/theme/default/v2/quick-search-theme.js"></script>
    <script type="text/javascript">
    {% if template.name == 'cart'%}
        var cartRecords = [];
        {% for item in cart.items %}
            cartRecords.push({'itemId': {{item.variant_id}} ,'itemGroupId': {{item.product_id}} });
        {% endfor %}
        var klevu_page_meta = {
            "pageType": "cart",
            "cartRecords": cartRecords
        };
    {% elsif template.name == 'product'%}
        var klevu_page_meta  = {
            "pageType": "pdp",
            "itemName": "{{product.title | escape }}",
            "itemUrl": "{{shop.url}}{{ product.url}}",
            "itemId": "{{product.selected_or_first_available_variant.id}}",
            "itemGroupId": "{{product.id}}",
            "itemSalePrice": "{{product.price | money_without_currency}}",
            "itemCurrency": "{{shop.currency}}"
        };
    {% endif %}
    </script>
{% endif %}
{% if template.name == 'collection'%}
    <script src="https://js.klevu.com/theme/default/v2/quick-catnav-search-theme.js"></script>
    <script type="text/javascript">
    var klevu_page_meta = {
        "pageType": "category",
        "categoryName": "{{collection.title | escape }}",
        "categoryUrl": "{{shop.url}}{{collection.url}}",
    };
    </script>
{% elsif template.name == 'search'%}
    <script src="https://js.klevu.com/theme/default/v2/quick-landing-search-theme.js"></script>
{% else %}
    <script src="https://js.klevu.com/theme/default/v2/quick-search-theme.js"></script>
    <script type="text/javascript">
    {% if template.name == 'cart'%}
        var cartRecords = [];
        {% for item in cart.items %}
            cartRecords.push({'itemId': {{item.variant_id}} ,'itemGroupId': {{item.product_id}} });
        {% endfor %}
        var klevu_page_meta = {
            "pageType": "cart",
            "cartRecords": cartRecords
        };
    {% elsif template.name == 'product'%}
        var klevu_page_meta  = {
            "pageType": "pdp",
            "itemName": "{{product.title | escape }}",
            "itemUrl": "{{shop.url}}{{ product.url}}",
            "itemId": "{{product.selected_or_first_available_variant.id}}",
            "itemGroupId": "{{product.id}}",
            "itemSalePrice": "{{product.price | money_without_currency}}",
            "itemCurrency": "{{shop.currency}}"
        };
    {% endif %}
    </script>
{% endif %}
﻿
BigCommerce Manual Integration
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: 
HTML
<!-- Include Quick Search Theme -->
<script src="https://js.klevu.com/theme/default/v2/quick-search.js"></script>

{{#if page_type '===' 'search'}}
<!-- Include Search Results Landing Page Theme -->
<script src="https://js.klevu.com/theme/default/v2/search-results-page.js"></script>
{{/if}}

{{#if page_type '===' 'category'}}
<!-- Include Category Page Theme -->
<script src="https://js.klevu.com/theme/default/v2/category-page.js"></script>
<script type="text/javascript">
    var klevu_pageCategory = "{{#each breadcrumbs}}{{#unless @first}}{{name}}{{#unless @last}};{{/unless}}{{/unless}}{{/each}}";
    sessionStorage.setItem("klevu_pageCategory", klevu_pageCategory);
</script>
{{/if}}



<script type="text/javascript">
    {{#if page_type '===' 'category'}}
        var klevu_page_meta = {
            'pageType': "category",
            'categoryName':'{{#each breadcrumbs}}{{#unless @first}}{{name}}{{#unless @last}};{{/unless}}{{/unless}}{{/each}}',
            'categoryUrl': '{{category.url}}',
        };
    {{/if}}
    {{#if page_type '===' 'product'}}
        var klevu_page_meta  = {
            "pageType": "pdp",
            "itemName": "{{product.title}}",
            "itemUrl": "{{product.url}}",
            "itemId": "",
            "itemGroupId": "{{product.id}}",
            "itemSalePrice": "{{#if product.price.with_tax}}{{product.price.with_tax.value}}{{else}}{{product.price.without_tax.value}}{{/if}}",
            "itemCurrency": "{{currency_selector.active_currency_code}}"
        };

        {{#if gql.data.site.product}}
            {{#if gql.data.site.product.variants.edges.length '>' 0}}
                klevu_page_meta.itemId = "{{gql.data.site.product.entityId}}";
            {{/if}}

            {{#if gql.data.site.product.productOptions.edges}}
                {{#each gql.data.site.product.variants.edges}}
                    {{#if @index '==' 0}}
                        {{#if node.entityId}}
                            {{#if node.isPurchasable}}
                                klevu_page_meta.itemId += "-variantid_{{node.entityId}}";
                            {{/if}}
                        {{/if}}
                    {{/if}}
                {{/each}}
            {{/if}}
        {{/if}}
    {{/if}}
    {{#if page_type '===' 'cart'}}
        let klbCartRecords = [];
        fetch('/api/storefront/carts/{{cart_id}}?include=lineItems.physicalItems.options,lineItems.digitalItems.options',
            {credentials: 'include'}
        ).then(function (response) {
                return response.json();
            })
        .then(function (cartData) {
            if (!cartData || !cartData.lineItems) {
                return;
            }
            let klbCartLineItems = cartData.lineItems;
            for (let klbIndex in klbCartLineItems) {
                let klbItemTypeRows = klbCartLineItems[klbIndex];
                if (!klbItemTypeRows.length) {
                    return;
                }
                for (let klbItemRow in klbItemTypeRows) {
                    klbCartRecords.push({
                        'itemId': klbItemTypeRows[klbItemRow]['options'].length
                            ? klbItemTypeRows[klbItemRow]['productId'] + '-variantid_' + klbItemTypeRows[klbItemRow]['variantId']
                            : klbItemTypeRows[klbItemRow]['productId'],
                        'itemGroupId': klbItemTypeRows[klbItemRow]['productId'],
                    });
                }
            }
        });
        var klevu_page_meta = {
            'pageType': "cart",
            'cartRecords': klbCartRecords
        };
    {{/if}}
</script>
<!-- Include Quick Search Theme -->
<script src="https://js.klevu.com/theme/default/v2/quick-search.js"></script>

{{#if page_type '===' 'search'}}
<!-- Include Search Results Landing Page Theme -->
<script src="https://js.klevu.com/theme/default/v2/search-results-page.js"></script>
{{/if}}

{{#if page_type '===' 'category'}}
<!-- Include Category Page Theme -->
<script src="https://js.klevu.com/theme/default/v2/category-page.js"></script>
<script type="text/javascript">
    var klevu_pageCategory = "{{#each breadcrumbs}}{{#unless @first}}{{name}}{{#unless @last}};{{/unless}}{{/unless}}{{/each}}";
    sessionStorage.setItem("klevu_pageCategory", klevu_pageCategory);
</script>
{{/if}}



<script type="text/javascript">
    {{#if page_type '===' 'category'}}
        var klevu_page_meta = {
            'pageType': "category",
            'categoryName':'{{#each breadcrumbs}}{{#unless @first}}{{name}}{{#unless @last}};{{/unless}}{{/unless}}{{/each}}',
            'categoryUrl': '{{category.url}}',
        };
    {{/if}}
    {{#if page_type '===' 'product'}}
        var klevu_page_meta  = {
            "pageType": "pdp",
            "itemName": "{{product.title}}",
            "itemUrl": "{{product.url}}",
            "itemId": "",
            "itemGroupId": "{{product.id}}",
            "itemSalePrice": "{{#if product.price.with_tax}}{{product.price.with_tax.value}}{{else}}{{product.price.without_tax.value}}{{/if}}",
            "itemCurrency": "{{currency_selector.active_currency_code}}"
        };

        {{#if gql.data.site.product}}
            {{#if gql.data.site.product.variants.edges.length '>' 0}}
                klevu_page_meta.itemId = "{{gql.data.site.product.entityId}}";
            {{/if}}

            {{#if gql.data.site.product.productOptions.edges}}
                {{#each gql.data.site.product.variants.edges}}
                    {{#if @index '==' 0}}
                        {{#if node.entityId}}
                            {{#if node.isPurchasable}}
                                klevu_page_meta.itemId += "-variantid_{{node.entityId}}";
                            {{/if}}
                        {{/if}}
                    {{/if}}
                {{/each}}
            {{/if}}
        {{/if}}
    {{/if}}
    {{#if page_type '===' 'cart'}}
        let klbCartRecords = [];
        fetch('/api/storefront/carts/{{cart_id}}?include=lineItems.physicalItems.options,lineItems.digitalItems.options',
            {credentials: 'include'}
        ).then(function (response) {
                return response.json();
            })
        .then(function (cartData) {
            if (!cartData || !cartData.lineItems) {
                return;
            }
            let klbCartLineItems = cartData.lineItems;
            for (let klbIndex in klbCartLineItems) {
                let klbItemTypeRows = klbCartLineItems[klbIndex];
                if (!klbItemTypeRows.length) {
                    return;
                }
                for (let klbItemRow in klbItemTypeRows) {
                    klbCartRecords.push({
                        'itemId': klbItemTypeRows[klbItemRow]['options'].length
                            ? klbItemTypeRows[klbItemRow]['productId'] + '-variantid_' + klbItemTypeRows[klbItemRow]['variantId']
                            : klbItemTypeRows[klbItemRow]['productId'],
                        'itemGroupId': klbItemTypeRows[klbItemRow]['productId'],
                    });
                }
            }
        });
        var klevu_page_meta = {
            'pageType': "cart",
            'cartRecords': klbCartRecords
        };
    {{/if}}
</script>
﻿
With the following code:
HTML
{{#if page_type '===' 'category'}}
    <!-- Include Category Page Theme -->
    <script src="https://js.klevu.com/theme/default/v2/quick-catnav-search-theme.js"></script>
    <script type="text/javascript">
        var klevu_pageCategory = "{{#each breadcrumbs}}{{#unless @first}}{{name}}{{#unless @last}};{{/unless}}{{/unless}}{{/each}}";
        sessionStorage.setItem("klevu_pageCategory", klevu_pageCategory);        
        var klevu_page_meta = {
            'pageType': "category",
            'categoryName':'{{#each breadcrumbs}}{{#unless @first}}{{name}}{{#unless @last}};{{/unless}}{{/unless}}{{/each}}',
            'categoryUrl': '{{category.url}}',
        };
    </script>
{{else if page_type '===' 'search'}}
    <!-- Include Search Results Landing Page Theme -->
    <script src="https://js.klevu.com/theme/default/v2/quick-landing-search-theme.js"></script>
{{else}}
    <!-- Include Quick Search Theme -->
    <script src="https://js.klevu.com/theme/default/v2/quick-search.js"></script>
    {{#if page_type '===' 'product'}}
        <script type="text/javascript">
            var klevu_page_meta  = {
                "pageType": "pdp",
                "itemName": "{{product.title}}",
                "itemUrl": "{{product.url}}",
                "itemId": "",
                "itemGroupId": "{{product.id}}",
                "itemSalePrice": "{{#if product.price.with_tax}}{{product.price.with_tax.value}}{{else}}{{product.price.without_tax.value}}{{/if}}",
                "itemCurrency": "{{currency_selector.active_currency_code}}"
            };
    
            {{#if gql.data.site.product}}
                {{#if gql.data.site.product.variants.edges.length '>' 0}}
                    klevu_page_meta.itemId = "{{gql.data.site.product.entityId}}";
                {{/if}}
    
                {{#if gql.data.site.product.productOptions.edges}}
                    {{#each gql.data.site.product.variants.edges}}
                        {{#if @index '==' 0}}
                            {{#if node.entityId}}
                                {{#if node.isPurchasable}}
                                    klevu_page_meta.itemId += "-variantid_{{node.entityId}}";
                                {{/if}}
                            {{/if}}
                        {{/if}}
                    {{/each}}
                {{/if}}
            {{/if}}
        </script>
    {{else if page_type '===' 'cart'}}
        <script type="text/javascript">
            let klbCartRecords = [];
            fetch('/api/storefront/carts/{{cart_id}}?include=lineItems.physicalItems.options,lineItems.digitalItems.options',
                {credentials: 'include'}
            ).then(function (response) {
                    return response.json();
                })
            .then(function (cartData) {
                if (!cartData || !cartData.lineItems) {
                    return;
                }
                let klbCartLineItems = cartData.lineItems;
                for (let klbIndex in klbCartLineItems) {
                    let klbItemTypeRows = klbCartLineItems[klbIndex];
                    if (!klbItemTypeRows.length) {
                        return;
                    }
                    for (let klbItemRow in klbItemTypeRows) {
                        klbCartRecords.push({
                            'itemId': klbItemTypeRows[klbItemRow]['options'].length
                                ? klbItemTypeRows[klbItemRow]['productId'] + '-variantid_' + klbItemTypeRows[klbItemRow]['variantId']
                                : klbItemTypeRows[klbItemRow]['productId'],
                            'itemGroupId': klbItemTypeRows[klbItemRow]['productId'],
                        });
                    }
                }
            });
            var klevu_page_meta = {
                'pageType': "cart",
                'cartRecords': klbCartRecords
            };
        </script>
    {{/if}}
{{/if}}
{{#if page_type '===' 'category'}}
    <!-- Include Category Page Theme -->
    <script src="https://js.klevu.com/theme/default/v2/quick-catnav-search-theme.js"></script>
    <script type="text/javascript">
        var klevu_pageCategory = "{{#each breadcrumbs}}{{#unless @first}}{{name}}{{#unless @last}};{{/unless}}{{/unless}}{{/each}}";
        sessionStorage.setItem("klevu_pageCategory", klevu_pageCategory);        
        var klevu_page_meta = {
            'pageType': "category",
            'categoryName':'{{#each breadcrumbs}}{{#unless @first}}{{name}}{{#unless @last}};{{/unless}}{{/unless}}{{/each}}',
            'categoryUrl': '{{category.url}}',
        };
    </script>
{{else if page_type '===' 'search'}}
    <!-- Include Search Results Landing Page Theme -->
    <script src="https://js.klevu.com/theme/default/v2/quick-landing-search-theme.js"></script>
{{else}}
    <!-- Include Quick Search Theme -->
    <script src="https://js.klevu.com/theme/default/v2/quick-search.js"></script>
    {{#if page_type '===' 'product'}}
        <script type="text/javascript">
            var klevu_page_meta  = {
                "pageType": "pdp",
                "itemName": "{{product.title}}",
                "itemUrl": "{{product.url}}",
                "itemId": "",
                "itemGroupId": "{{product.id}}",
                "itemSalePrice": "{{#if product.price.with_tax}}{{product.price.with_tax.value}}{{else}}{{product.price.without_tax.value}}{{/if}}",
                "itemCurrency": "{{currency_selector.active_currency_code}}"
            };
    
            {{#if gql.data.site.product}}
                {{#if gql.data.site.product.variants.edges.length '>' 0}}
                    klevu_page_meta.itemId = "{{gql.data.site.product.entityId}}";
                {{/if}}
    
                {{#if gql.data.site.product.productOptions.edges}}
                    {{#each gql.data.site.product.variants.edges}}
                        {{#if @index '==' 0}}
                            {{#if node.entityId}}
                                {{#if node.isPurchasable}}
                                    klevu_page_meta.itemId += "-variantid_{{node.entityId}}";
                                {{/if}}
                            {{/if}}
                        {{/if}}
                    {{/each}}
                {{/if}}
            {{/if}}
        </script>
    {{else if page_type '===' 'cart'}}
        <script type="text/javascript">
            let klbCartRecords = [];
            fetch('/api/storefront/carts/{{cart_id}}?include=lineItems.physicalItems.options,lineItems.digitalItems.options',
                {credentials: 'include'}
            ).then(function (response) {
                    return response.json();
                })
            .then(function (cartData) {
                if (!cartData || !cartData.lineItems) {
                    return;
                }
                let klbCartLineItems = cartData.lineItems;
                for (let klbIndex in klbCartLineItems) {
                    let klbItemTypeRows = klbCartLineItems[klbIndex];
                    if (!klbItemTypeRows.length) {
                        return;
                    }
                    for (let klbItemRow in klbItemTypeRows) {
                        klbCartRecords.push({
                            'itemId': klbItemTypeRows[klbItemRow]['options'].length
                                ? klbItemTypeRows[klbItemRow]['productId'] + '-variantid_' + klbItemTypeRows[klbItemRow]['variantId']
                                : klbItemTypeRows[klbItemRow]['productId'],
                            'itemGroupId': klbItemTypeRows[klbItemRow]['productId'],
                        });
                    }
                }
            });
            var klevu_page_meta = {
                'pageType': "cart",
                'cartRecords': klbCartRecords
            };
        </script>
    {{/if}}
{{/if}}
﻿
The above code change basically replaces the loading of individual scripts for Quick, Search, and Category with the combined scripts. 
Updated 09 Jul 2024
Did this page help you?
Modify Display Markup
Versioning