Liquid Components > Site Search

Documentation & Video Tutorials Contributor Requests
1

I’m not sure if this is the best way to handle this request, but I’d like to ask about considering this as an addition to the site_search liquid component. I had issues figuring out how to display search results on a client’s site and support offered me this information which I can’t find anywhere in the docs. Hope this helps. If I posted this incorrectly or in the wrong area, please correct me!

Thank you,

  • Ryan

Search Results:

I asked support to help with getting search results to display on a search results page and this is how (tested and works!):

Add this code to the search results page:

{% component source: "Page", layout: "Site Search List", displayPagination: "true", emptyMessage: "No items found by keyword: <strong>{{request.request_url.params.SearchKeyword}}</strong>" , type: "site_search", limit:10, object:"collection" %}

    <script>
    $(document).ready(function()
        {
            initSearchKeyword();
        });
        
        /***************Search*******************/
        function initSearchKeyword() {
        
            var params = window
                .location
                .search
                .replace('?', '')
                .split('&')
                .reduce(
                    function (p, e) {
                        var a = e.split('=');
                        p[decodeURIComponent(a[0])] = decodeURIComponent(a[1]);
                        return p;
                    },
                    {}
                );
        
            var string = params['searchkeyword'];
        
            var highlightWord = function(text){
                var searchHtmlCollection = document.getElementsByClassName('searchElem');
                var arr = searchHtmlCollection.length;
        
                for (i = 0; i < arr; i++) {
                    var html = searchHtmlCollection[i].innerHTML;
        
                    var word  = "( " + text + " )";
                    var match = new RegExp(word, "gi");
        
                    html = html.replace(match, "<span style='font-weight: bold;'>$1</span>");
        
                    searchHtmlCollection[i].innerHTML = html;
                }
            };
        
            highlightWord(string);
        
        }
        /***************End Search*******************/
        </script>

Create a new Page Layout (https://prnt.sc/ov80pl) called Site Search List (or call it whatever you want, just be sure the name of the new Layout matches the layout identified in the liquid tag). And then once you have the layout created (https://prnt.sc/ov80tl), code/style the list layout however you like.

2

Thanks for you post. I am trying to setup site search and having difficulty. I would like it to work the same way as https://www.sunnysideinstantlawn.com.au/
Could somene help me with what I am doing wrong for the output - I would like it to go on the search-results page? I have copied the code into the layout list but not sure how to get this to work. Any help would be greatly appreciated.

3

Hi @cretam. Can you post the treepl trial site URL for us to look at.

But here are a few things to check:

  1. In your search form, the action path is set to your search results web page:
<form action="/YOUR-SEARCH-RESULTS-PAGE">
  1. You’ve pasted the above code from @StudioRTP onto this search results page.
  2. You have a ‘Page Layout’ called “Site Search List” (go to: ‘Content’ > ‘Pages’ > ‘Edit Settings’ > ‘Layouts’), which has something like this:
<p class="lead">Showing <b>{{this.pagination.totalitemscount}}</b> items for "<b>{{request.request_url.params.SearchKeyword}}</b>"</p>
{% if this.items == null %}
<p>Sorry no results found. Try searching again with a different keyword perhaps.</p>
{% else %}
<ul>
{% for sr in this.items %}
    <li>
        <p>
            <strong><a href="{{sr.url}}">{{sr.name}}</a></strong><br>
            {{sr.description | strip_html | truncatewords: 20, '...'}}
        </p>
    </li>
{% endfor %}
</ul>
{% endif %}

Post you code from these sections if you are still having trouble.

2 Likes
4

Yes, what @Adam.Wilson said :slight_smile: Apologies I didn’t jump in and respond sooner. I was traveling over the weekend with limited Internet access. @Adam.Wilson has helped me a million times, so I owe him one! If there is anything I can do to help here, please let me know. From what I can see, however, Adam’s direction is spot on. Glad to help in any way that I can!

2 Likes
5

Thanks Adam. I got it working as it should - many thanks.