Blogs

Introduction

The out of the box Search Bar Suggestions returns Search Result Suggestions. This is great but for some sites it makes sense to return Keyword Suggestions instead. For example on an ecommerce website if I start typing tshirt we may want to suggest 'tshirt mens', 'tshirt womens', 'tshirt kids' instead of specific Search Results.

This blog post will explain how to achieve this in DXP 7.4 using low code features such as Liferay Objects, Search Blueprints, a Search Bar Widget Display Template and the out of the box Search Bar Suggestions functionality.

The solution uses the existing configuration for typeahead, character threshold, list size etc. and sorts on the Keyword record count i.e. shows the most popular matches first.

For demonstration purposes the keyword data is manually entered in the Liferay Objects table but the data could be populated one of many different ways, for example:

• Scheduled import of Search Terms data from Liferay Analytics Cloud (or other Analytics tool) using it's APIs and the auto generated Liferay Object REST APIs.
• Realtime updating of the keyword data as users perform searches, using JavaScript and the auto generated Liferay Object REST APIs to create a new search keyword or update the count on an existing search keyword.

The Search Bar Widget Display Template is required because we want the suggestion item href URLs to perform a keyword search rather than the default behavior of sending the user to the Search Result record. 

https://liferay.dev/blogs/-/blogs/customizing-the-suggestions-dropdown-in-search-bar-widget

Steps to implement

1. Create and publish a Liferay Object called Keyword with the following configuration

Set 'Scope' to Company

Create the following custom fields:

• keyword, type Text, mandatory
• count, type Integer, mandatory

Set 'Entry Title Field' to keyword

2. Note the objectId from the Object Edit screen for later use

3. Populate some sample Keyword Object records (with keyword and count) for testing for example:

learn, 200
leak, 100
lease, 90
leaf, 80
least, 75
leash, 50
leave, 25
leather, 1

4. Create a Search Blueprint:

Title: Keyword Suggestions

Query Builder > Query Elements: 
- Type: Filter by Exact Terms Match
- Field: objectDefinitionId
- Values: [objectId] e.g. 40606 (from above)

Configuration > Sort Configuration:

{
    "sorts": [
        {
            "nestedFieldArray.value_integer": {
                "nested": {
                    "nested_path": "nestedFieldArray",
                    "nested_filter": {
                        "term": {
                            "nestedFieldArray.fieldName": "count"
                        }
                    }
                },
                "order": "desc"
            }
        }
    ]
}

5. Create the Search Bar > Widget Display Template (Site menu > Design > Templates > Widget Templates):

Template: Search Bar
Title: Search Bar Keyword Suggestions
Template Content:

Copy Olivia's jQuery based Widget Display Template code from here: https://gist.github.com/oliv-yu/4aa7afbc3e6e230f8956184f49dd21f4

Replace the following line (approx line 126):

return '<a class="dropdown-item" href="' + suggestion.attributes.assetURL + '">' +

with:

var suggestionSearchURL = "${destination}" + "?" + "${searchBarPortletDisplayContext.getKeywordsParameterName()}" + "=" + suggestion.text.replaceAll(' ', '+');
return '<a class="dropdown-item" href="' + suggestionSearchURL + '">' +

Save the Template

6. Configure The Search Bar (Search Bar > Configuration)

Select the Template from above

Suggestions Configuration:

- Check the 'Enable Suggestions' checkbox.
- Set 'Character Threshold for Displaying Suggestions' to 3
- Click 'Add Suggestions' and select Blueprint
- Set 'Display Group Name' to suggestion
- Set 'Size' to 10
- Select the Blueprint from above
- Set 'Character Threshold' to 3
- Set 'Include Asset URL' to False
- Set 'Include Asset Summary' to True
- Set 'Fields' to keyword

Save and close

7. Exclude Keyword Object from Search result:

This can be done one of a number of different ways:

- Create and apply a Blueprint with Query Element 'Hide by Exact Term Match' with 'Field' set to objectDefinitionId and 'Value' set to the objectId from above
- Edit the Search Page Type Facet to exclude the Keyword Object records
- Add the Custom Filter widget and set 'Filter Field' to objectDefinitionId, 'Filter Value' to the objectId from above and 'Occur' to 'must_not'

Conclusion

That's it. Search Bar > Suggestions should now return keywords, and clicking one should perform a search using the keyword.

Start typing lea and you should see the keywords that were added, sorted by count descending.