内容


提高动态 SKU 自动建议的性能

在 WebSphere Commerce V7.2 中利用浏览器缓存功能实现快速订购

Comments

概述

本文中概括的步骤涵盖了添加浏览器缓存功能所需的全部步骤。浏览器缓存功能可减少服务器搜索请求,提高 Commerce Starter Store 中用于实现快速订购的 SKU 建议功能的性能。

Apache Solr 是基于 Apache Lucene 项目的一个开源企业搜索平台。它有一个类似 REST 的 API,用于管理和查询。在 WebSphere Commerce V7.2 及其更高版本中,搜索功能使用 Apache Solr 作为搜索工具,并使用 Commerce Starter Store 作为一个公共搜索引擎。Starter Store 中的一项搜索引擎功能是自动建议菜单,用于提供关键字、类别、品牌、站点内容和搜索历史记录方面的建议。

自动建议菜单为客户的输入提供搜索辅助。当客户开始在搜索框中键入内容时,事件侦听器 (onkeyup) 就会调用 StoreCommonUtilities.js 文件中的 JavaScript™ 函数。StoreCommonUtilities.js 文件包含用于处理自动建议菜单的逻辑。在每次击键时,JavaScript 都会调用一个 Ajax 调用,以执行从搜索索引中检索到的(并在菜单中显示的)建议关键字匹配项。客户可以通过在列表中选择适当的关键字来执行搜索操作,从而节省大量时间。

了解缓存和自动建议设计

使用 Solr 来提供自动完成建议的方法有许多种。最常见的做法是以有索引的数据为基础。SKU 自动建议功能使用了 Solr 的 SearchComponent,这是一个简单的术语组件,它提供对某个字段中的有索引术语的访问,以及与每个术语匹配的文档的数量。按照索引顺序来搜索术语的速度非常快,因为该搜索是直接使用索引引擎的 TermEnum 依次搜索整个术语字典来实现的。

从理论上讲,在一个多层 Web 应用程序架构中,为了最大程度地利用缓存,缓存通常位于在最靠近用户的层中。JSP 视图级别的 DynaCache 不适用于关键字建议,因为用户输入空间太大。SKU 数据还有一个缓存失效的问题,因为 SKU 数据可能会频繁发生变化。基于这些原因,用户可以改为使用 Web 页面级别的缓存策略,与 Commerce 服务器侧的动态缓存相比,它具有以下优点:

  • 缓存发生在 Web 页面,这是最接近用户的层。
  • 动态生成缓存,这避免了缓存失效的问题。

图 1 突出显示了含缓存功能的自动建议菜单的设计。 Solr 搜索的结果被保存为一个 JSON HashMap 数据结构,搜索输入被保存为 HashMap 键。HashMap 键的长度等于触发对 Solr 服务器的 Ajax 调用所需的最小长度。 任何包含 HashMap 键的搜索输入都会被改为在本地触发搜索。

例如,如果最小长度被设置为 2,当用户输入 “AC” 时,则会触发对 Solr 搜索服务器的 Ajax 调用。服务器调用的结果被保存在本地,使用 “AC” 作为关键字,然后以 “AC” 为前缀的任何关键字(如 “ACA”、“ACG” 和 “ACA-”)都不会触发额外的 Ajax 调用。 相反,它会对浏览器中本地保存的 SKU 列表执行字符串匹配。

图 1. 浏览器缓存和自动建议的设计
浏览器缓存和自动建议的设计图。
浏览器缓存和自动建议的设计图。

配置自动建议菜单

步骤 1:创建一个包含 Ajax 调用代理的 JSP 视图

可以使用与 WebSphere Commerce 服务器不同的域名来远程托管 Solr 服务器。这会导致不允许进行跨域 Ajax 调用的安全问题。因为这个原因,您需要创建一个 Struts 动作和 JSP 页面来充当 Solr 搜索服务器的代理。

清单 1. Struts 动作和动作转发的定义
<forward 
className="com.ibm.commerce.struts.ECActionForward"  
name="QuickOrderAutoSuggestionView/10001" 
path="/ShoppingArea/OrderCreationSection/QuickOrderSubsection/QuickOrderSuggestion.jsp"/>

<action 
path="/QuickOrderAutoSuggestionView" 
type="com.ibm.commerce.struts.BaseAction"/>

步骤 2:设置视图访问控制

默认情况下,来宾用户不能访问视图页面,因此我们需要将 QuickOrderAutoSuggestionView 的访问控制设置为 “AllSiteUsersView”,以便允许所有类型的用户访问该视图。在下面的 SQL 清单中,我们假设 acactgrp 表中已存在一个包含 acactgrp_id(为 10501)和组名称(为 “AllSiteUsersView” )的行。

清单 2. 用于更新访问控制的 SQL 语句
insert into acaction (acaction_id, action) values (-5000, 'QuickOrderAutoSuggestionView');
insert into acactactgp (acactgrp_id, acaction_id) values (10501, -5000);
commit;

步骤 3:创建一个 Dojo RefreshArea 小部件

您需要在快速订购页面中创建一个刷新区域,动态地使用 JSP 视图页面生成的新内容来更新它。 清单 4 声明了一个新的刷新控制器 “QuickOrderAutoSuggestDisplayController”,用于对 QuickOrderAutoSuggestionView 进行 Ajax 调用,以便使用响应 HTML 填充刷新区域。

清单 3. 渲染上下文的声明
/**
* Declares a new render context for the AutoSuggest display on Quick Order Page.
*/

wc.render.declareContext("QuickOrderAutoSuggest_Context", null, ""),
清单 4. 刷新控制器的声明
/** 
* Declares a new refresh controller for Auto Suggest on Quick Order Page
* @PARAM field_id the id of input box user selects
* @Author junmin.liu@us.ibm.com adopted from Commerce FP4 out-of-box code
 */

wc.render.declareRefreshController({
id:"QuickOrderAutoSuggestDisplayController",
renderContext: wc.render.getContextById("QuickOrderAutoSuggest_Context"),
url:"",
formId:"",
field_id:""
                    
/** 
* Displays the keyword suggestions from the search index
* This function is called when a render context changed event is detected. 
* 
* @param {string} message The render context changed event message
* @param {object} widget The registered refresh area
*/

,renderContextChangedHandler: function(message, widget) {
var controller = this;
var renderContext = this.renderContext;
widget.refresh(renderContext.properties);
}
                    
/** 
* Display the results.
* 
* @param {object} widget The registered refresh area
*/

,postRefreshHandler: function(widget) {
var controller = this;
var renderContext = this.renderContext;
var response = document.getElementById('suggestedKeywordResults');
if(response == null) {
// No response or an error page.   Clear the contents.
document.getElementById("autoSuggestDynamic_Result_div").innerHTML = "";
}
showAutoSuggestIfResults_quickOrder(this.field_id);
}
}),

步骤 4:将新的 JavaScript 函数添加到 storeCommonUtilities.js

您还需要添加几个特定于快速订购的 JavaScript 函数。 其中最重要的一个函数用于搜索本地 JSON 存储,并生成一个自动建议菜单。

下面的函数 “doDynamicAutoSuggestFromCache quickOrder” 首先查看JSON对象,检查以前的自动建议结果是否包含 searchTerm。然后,它会调用 “createAutoSuggestMenuHTML” 函数来创建自动建议下拉菜单。

清单 5. 声明从缓存执行自动建议的 javascript 函数
/**
* search cache stored in web page for suggested SKU list 
* and create HTML snippet for auto-suggest menu
* @Author junmin.liu@us.ibm.com 
*/
                    
function doDynamicAutoSuggestFromCache__quickOrder(url, searchTerm, showHeader, id) {
if(document.getElementById('SKUStorage')){
var skuObject = eval('('+document.getElementById('SKUStorage').innerHTML+')');
var tokens = skuObject[searchTerm.substring(0,DYNAMIC_AUTOSUGGEST_THRESHOLD)];
if(tokens){
var match = false;
var foundTerms = new Array();
for(var j=0; j<tokens.length; j++){
var term = tokens[j];
if(term.indexOf(searchTerm)==0){
foundTerms.push(term);
match = true;
}
}
if(match)
createAutoSuggestMenuHTML(foundTerms);				
else	
document.getElementById('suggestedKeywordResults')=null;
return true;
}
else{
if(searchTerm.length > DYNAMIC_AUTOSUGGEST_THRESHOLD){
document.getElementById('suggestedKeywordResults')=null;	
return true;			  
}
}
}
return false;
}
insert into acaction (acaction_id, action) values (-5000, 'QuickOrderAutoSuggestionView');
insert into acactactgp (acactgrp_id, acaction_id) values (10501, -5000);
commit;

步骤 5:检查执行结果

为了验证结果,请转到 Madison 或 Elite Starter Store 的快速订购。键入关键字,并确认第一个字符没有触发对服务器的 Ajax 调用。在输入第二个字符时,Ajax 调用被触发,并显示自动建议菜单。

图 2. 含 Ajax 调用的 Quick Order 页面
含 Ajax 调用的快速订购 GUI 图。
含 Ajax 调用的快速订购 GUI 图。

另外,请注意,当您输入第三个字符时,没有触发对服务器的 Ajax 调用,并且仅当存在所输入字符的匹配时才显示自动建议菜单。

图 3. 没有 Ajax 调用的 Quick Order 页面
没有 Ajax 调用的快速订购 GUI 图。
没有 Ajax 调用的快速订购 GUI 图。

结束语

本文描述了如何在 WebSphere Commerce Starter Store 中的快速订单上创建一个自动建议菜单,这个 Starter Store 使用了来自 WebSphere Commerce V7.2 或更高版本的 Solr 搜索功能。 它还利用了 Solr SearchComponent,这是一个简单的术语组件,提供对有索引数据的快速访问。 开发 Dojo JavaScript 函数,触发对 Apache Solr RESTful 服务 API 的 Ajax 调用,并显示一个下拉菜单。此外,实现一个灵活而又稳健的浏览器端缓存解决方案,以便减少对服务器的访问,并提高自动建议的性能。

致谢

笔者要感谢他的 IBM® GBS 同事 Irina Tyshkevich、Kevin Gross、Dave Fehm 和 Tom Somboonsong 对本文的审阅。


相关主题


评论

添加或订阅评论,请先登录注册

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=WebSphere
ArticleID=1000426
ArticleTitle=提高动态 SKU 自动建议的性能
publish-date=03122015