Liferay Development

Liferay Consulting

Liferay Training

Your Trusted Liferay Solutions Partner

Sunday, March 22, 2020

Google Custom Search Liferay 7/DXP Module


Google provides the custom search API and we can leverage to provide site search capabilities in websites.

I was playing around Google custom search API and I have created sample Liferay Module. I am using custom search API capability in liferaysavvy.com

Google already have many search elements in the form of html elements and JavaScript. We can simply use these search elements to provide website search.

The following are basic steps to create google custom search

  1. Create Google Custom Search Engine Context
  2. Use Google Custom Search API

Create Google Custom Search Engine Context

You mush have google account and access below link to create search context to your website.



Click on Add button and provide site URL and Site name then click on create button. New site context will be created.



Now you can see following screen and form there you can get code snippets or go to control panel


Click on control panel then you can find search context details. Search engine ID is important value which we will use in API.



Now click on “Look and Feel” Tab and select “Full Width” layout and then save. Google Custom Search offers different layouts to display search results.




We have created search engine context for the site and we will use it in the Custom Search API.

Use Google Custom Search API.

Google have developer’s API and code snippets to use it in development of custom search for websites.

Here is Developer API page to get more details.


I have created following JavaScript which render result in html div

Example of Standalone HTML


<!DOCTYPE html>
<html>
<head>
<script async src="https://cse.google.com/cse.js?cx=016080267653024587377:dlk531h1uoe"></script>
</head>
<body>
<button type="button" onclick="searchSite();">Search</button>

<button  type='button' value="">
<div id="google-search-results"></div>
<script>


 function searchSite() {

       document.getElementById("google-search-results").innerHTML = "";
               google.search.cse.element.render({
            div: "google-search-results",
            tag: 'searchresults-only',
            gname: 'google-results-gname'
        });
            var element = google.search.cse.element.getElement('google-results-gname');
               var query = "liferay";
        element.execute(query);            
      }
</script>
</body>
</html>


Make sure in the script cx value should be your “Search engine ID” that we created earlier.

Liferay Google Custom Search Widget

We can use same custom search API in Liferay widgets and following are the steps to implement google custom search in Liferay OSGi Modules.
  1. Create Liferay MVC OSGi Module
  2. Use Custom Search API in JSPs
  3. Build and Deploy Module
  4. Add Widget to page and validate changes

Module GitHub Source

Get project source code from following location.

Gradle


Maven


Create Liferay MVC OSGi Module

We have different ways to create Liferay OSGi modules and we need to create mvc-portlet Liferay OSGi module. While creating Liferay OSGi module need to select mvc-portlet project template. It will create basic rest module.


Use Custom Search API in JSPs

Use following code snippet in JSP page and change Search engine ID as per your site context ID in the script tag.


<%@ include file="/init.jsp" %>
<div class="input-group search-bar-scope">
       <div class="input-group-item search-bar-keywords-input-wrapper">
          <input class="form-control input-group-inset input-group-inset-after search-bar-keywords-input" id="search-input"  placeholder="search" title="search" type="text" value="LiferaySavvy" />
             <div class="input-group-inset-item input-group-inset-item-after search-bar-search-button-wrapper">
                    <clay:button ariaLabel='asasd' elementClasses="search-bar-search-button" icon="search" style="unstyled" id="lsSearch" type="submit"/>
             </div>
       </div>
</div>
<div id="google-search-results"></div>
<portlet:renderURL var="homeURL">
</portlet:renderURL>
<br/>
<br/>
<clay:link
       href="<%= homeURL %>"
       label="Home"
/>
<script async src="https://cse.google.com/cse.js?cx=016080267653024587377:dlk531h1uoe"></script>
<script>
document.getElementById("lsSearch").addEventListener("click", function(event){
  event.preventDefault();
  searchSite();
});

function searchSite() {

     document.getElementById("google-search-results").innerHTML = "";
    
          google.search.cse.element.render({
         div: "google-search-results",
         tag: 'searchresults-only',
         gname: 'google-results-gname'
     });
          var element = google.search.cse.element.getElement('google-results-gname');
          var query = document.getElementById("search-input").value
     element.execute(query);          
   }
</script>


Build and Deploy Module

Locate to project and use required commands to build and deploy module.

Module Build

Maven Build


mvn clean install

OR

mvnw clean install



Gradle Build


gradlew build

OR

gradle build


Module Deployment

If bundle support plugin already added in project build file then it will deploy to Liferay Module Framework with following commands

Gradle deploy

Add following bundle support plugin in module “build.gradle” file


liferay {
    liferayHome = "C:/Liferay/Liferay7.2/liferay-workspace/bundles"
    deployDir = file("${liferayHome}/osgi/modules")
}


Deploy module command


gradlew deploy

OR

gradle deploy


Maven Deployment

Add bundle support plugin in module “pom.xml” file and update liferay home path.


<plugin>
<groupId>com.liferay</groupId>
<artifactId>com.liferay.portal.tools.bundle.support</artifactId>
<version>3.5.4</version>
<executions>
<execution>
<id>deploy</id>
<goals>
<goal>deploy</goal>
</goals>
<phase>pre-integration-test</phase>
</execution>
</executions>
<configuration>
<liferayHome>C:/Liferay/Liferay7.2/liferay-workspace/bundles</liferayHome>
</configuration>
</plugin>


Run following maven goals to deploy module


mvn bundle-support:deploy

OR

mvnw bundle-support:deploy


Make sure module jar should be in osgi/module directory and it should be in active state in Liferay Module framework. Use Gogo shell commands to check module status

Module status


Module is available in “osgi/modules”



Add Widget to page and validate changes

Widget will be available in sample category and you can add to page and validate changes.
Home Screen


Custom Search Screen


Google Default Search Screen



Author

0 comments :

Post a Comment

Recent Posts

Recent Posts Widget

Popular Posts