How to Implement the Legacy Inline Template (deprecated)

16 Jun, 2025 Uncategorized

1: Add or Update Search Form

Add the search form or update this to include the ID "cludo-search-form":

<form id="cludo-search-form" role="search">
    <input type="search" class="search-input" aria-label="Search">
    <button type="submit" class="search-button" id="search-button">Search</button>
</form>

2: Add Default Styling

Add the following stylesheet references to the <head> section of all pages:

<link href="https://customer.cludo.com/css/templates/v2.1/essentials/cludo-search.min.css" type="text/css" rel="stylesheet">

3: Add and Adjust Script

Select one of the scripts below and insert this on all pages just before the ending <body> tag (</body>).

Here, there are a few required properties that need to be adjusted for the search to work:

  • Customer ID and engine ID (customerId and engineId)
    Find these values in MyCludo → Configuration → API)
  • Language
    The default value is ‘en’ for English. You can find the complete list of languages and their ISO code here.
  • Search URL (searchUrl)
    This must reflect the destination of your search results page. It is recommended using a relative URL, such as /search.
  • Search input selector(s) (searchInputs)
    If you are using other selectors than the one provided with the standard search input in the above step, these must be added here.

Just Results (no categories)

<script type="text/javascript" src="https://customer.cludo.com/scripts/bundles/search-script.min.js"></script>
<script>
var CludoSearch;
(function () {
    var cludoSettings = {
        customerId: CUSTOMER ID, //Find your customer ID in MyCludo -> Configuration -> API
        engineId: ENGINE ID, //Find your engine ID in MyCludo -> Configuration -> API
        searchUrl: '/search', //Must point to the destination of your search results page
        language: 'en', //Change this to reflect the language of the search
        searchInputs: ['cludo-search-form'], //Array of CSS selectors for input fields that should trigger search
        template: 'InlineBasic',
        hideSearchFilters: true,
        focusOnResultsAfterSearch: true,
        type: 'inline'
    };
    CludoSearch = new Cludo(cludoSettings);
    CludoSearch.init();
})();
</script>
<!--[if lte IE 9]>
    <script src="https://api.cludo.com/scripts/xdomain.js" slave="https://api.cludo.com/proxy.html" type="text/javascript"></script>
<![endif]-->

Results + Categories

<script type="text/javascript" src="https://customer.cludo.com/scripts/bundles/search-script.min.js"></script>
<script>
var CludoSearch;
(function () {
    var cludoSettings = {
        customerId: CUSTOMER ID, //Find your customer ID in MyCludo -> Configuration -> API
        engineId: ENGINE ID, //Find your engine ID in MyCludo -> Configuration -> API
        searchUrl: '/search', //Must point to the destination of your search results page
        language: 'en', //Change this to reflect the language of the search
        searchInputs: ['cludo-search-form'], //Array of CSS selectors for input fields that should trigger search
        template: 'InlineBasic',
        focusOnResultsAfterSearch: true,
        type: 'inline'
    };
    CludoSearch = new Cludo(cludoSettings);
    CludoSearch.init();
})();
</script>
<!--[if lte IE 9]>
    <script src="https://api.cludo.com/scripts/xdomain.js" slave="https://api.cludo.com/proxy.html" type="text/javascript"></script>
<![endif]-->

Results with Images + Categories

<script type="text/javascript" src="https://customer.cludo.com/scripts/bundles/search-script.min.js"></script>
<script>
var CludoSearch;
(function () {
    var cludoSettings = {
        customerId: CUSTOMER ID, //Find your customer ID in MyCludo -> Configuration -> API
        engineId: ENGINE ID, //Find your engine ID in MyCludo -> Configuration -> API
        searchUrl: '/search', //Must point to the destination of your search results page
        language: 'en', //Change this to reflect the language of the search
        searchInputs: ['cludo-search-form'], //Array of CSS selectors for input fields that should trigger search
        template: 'InlineBasicImages',
        focusOnResultsAfterSearch: true,
        type: 'inline'
    };
    CludoSearch = new Cludo(cludoSettings);
    CludoSearch.init();
})();
</script>
<!--[if lte IE 9]>
    <script src="https://api.cludo.com/scripts/xdomain.js" slave="https://api.cludo.com/proxy.html" type="text/javascript"></script>
<![endif]-->

4: Insert search results container

Select the option that fits your choice above and Insert this code on the search results page where you’d like the results to appear.

Just Results (no categories)

<div id="cludo-search-results">
    <div class="cludo-r">
        <div class="cludo-c-12">
            <div class="search-result-count"></div>
            <div class="search-did-you-mean"></div>
            <div class="search-results"></div>
        </div>
    </div>
</div>

Results + Categories

<div id="cludo-search-results">
    <div class="cludo-r">
        <div class="cludo-c-3">
            <div class="search-filters" role="navigation"></div>
        </div>
        <div class="cludo-c-9">
            <div class="search-result-count"></div>
            <div class="search-did-you-mean"></div>
            <div class="search-results"></div>
        </div> 
    </div>
</div>

Results with Images + Categories

<div id="cludo-search-results">
    <div class="cludo-r">
        <div class="cludo-c-3">
            <div class="search-filters" role="navigation"></div>
        </div>
        <div class="cludo-c-9">
            <div class="search-result-count"></div>
            <div class="search-did-you-mean"></div>
            <div class="search-results"></div>
        </div> 
    </div>
</div>

You have now successfully implemented search on your site!

If your search is not working at this point and you are not able to troubleshoot this, don’t hesitate to reach out to support.

Styling the Legacy Template Elements

Styling the search results

.cludo-search-results-item {
  /* Insert styling */
}

.cludo-search-results-item__title-anchor {
  /* Insert styling */
}

.cludo-search-results-item__title {
  /* Insert styling */
}

.cludo-search-results-item__description {
  /* Insert styling */
}

.cludo-search-results-item__path-anchor {
  /* Insert styling */
}


Styling the search filters (categories)

.cludo-facet {
  /* Insert styling */
}

.cludo-facet__header {
  /* Insert styling */
}

.cludo-facet__value-list-item {
  /* Insert styling */
}

.cludo-facet__value-list-item.active {
  /* Insert styling */
}

Related Posts