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
- Create Google Custom Search Engine Context
- 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.
- Create Liferay MVC OSGi Module
- Use Custom Search API in JSPs
- Build and Deploy Module
- 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
Posts
0 comments :
Post a Comment