Implementing keyword search in the Product Management tool

If you want to enhance search in your store, you can customize the Catalog Entry Search page by supporting keyword search, providing a new level of search results.

About this task

Note: This scenario and the Adding a medium sized image to the Product Management tool scenario use the same user interface field to complete the customization tasks. Each set of required changes cannot coexist. Only one customization scenario can be supported at a time.

This scenario customizes the Catalog Entry Search page by supporting keyword search, providing a new level of search results. You will need to modify two JSP files -- CatEntrySearchDialog.jsp and CatalogSearchUtil.jsp -- which use the AdvancedCatEntrySearchListDataBean. You will also modify JSP files used by the WebSphere Commerce Accelerator.

Procedure

  1. To protect your customized data from being overwritten during migration to a future version, or during installation of a future fix pack, or some similar event, it must be created in a safe place, separate from the WebSphere Commerce assets. This procedure creates a custom version of the CatEntrySearchDialog.jsp file within the WebSphere Commerce development environment:
    1. Open the WebSphere Commerce development environment.
    2. Navigate to the CommerceAccelerator project.
    3. Navigate to the Web Content/tools folder.
    4. From the folder's pop-up menu, select New, and then Folder. In the Folder name field, type custom.
    5. Navigate to the Web Content/tools/catalog folder.
    6. Select the CatEntrySearchDialog.jsp file. From the file's pop-up menu, select Copy.
    7. Navigate to the Web Content/tools/custom folder. From the folder's pop-up menu, select Paste.
    8. Select the new file. From the new file's pop-up menu, select Open With > Source Editor.
    9. Create the input box in the Catalog Entry Search page using the following steps. Locate the following code section:
      
      <TR>
      <TD COLSPAN=3><LABEL for="name"><%=categoryFindNLS.get("catalogSearch_name")%></LABEL></TD>
      </TR>
      <TR>
      <TD><INPUT TYPE="text" ID="name" NAME="name" CLASS="input" MAXLENGTH="64"></TD>
      <TD>&nbsp;<LABEL for="nameOp"><SPAN STYLE="display:none;"><%= UIUtil.toHTML((String)categoryFindNLS.get("catalogSearch_name")) %></SPAN></LABEL></TD>
      <TD>
      <SELECT ID="nameOp" NAME="nameOp" CLASS="input">
      <OPTION VALUE="LIKE"><%=categoryFindNLS.get("catalogSearch_operator_like")%></OPTION>
      <OPTION VALUE="EQUAL"><%=categoryFindNLS.get("catalogSearch_operator_exact")%></OPTION>
      </SELECT>
      </TD>
      </TR>
      <TR>
      <TD COLSPAN=3>&nbsp;<INPUT TYPE="checkbox" ID="searchScope" NAME="searchScope"><LABEL for="searchScope"><%=categoryFindNLS.get("catalogSearch_include_desc")%></LABEL></TD>
      </TR>
      <TR><TD></TD></TR>
      

      Immediately under this section, add the following code lines:

      
      <TR>
        <TD COLSPAN="3">
      <%=categoryFindNLS.get("categoryFindKeyword")%></TD>
      </TR>
      <TR>
        <TD><INPUT TYPE="text" NAME="keyword" CLASS="input" MAXLENGTH="64"></TD>
        <TD></TD>
        <TD>
             <SELECT NAME="keywordOp" CLASS="input">
             <OPTION VALUE="LIKE"><%=categoryFindNLS.get("catalogSearch_operator_like")%>
              </OPTION>
             <OPTION VALUE="EQUAL"><%=categoryFindNLS.get("catalogSearch_operator_exact")%>
              </OPTION>
             </SELECT>
        </TD>
      </TR>
      <TR><TD></TD></TR>
      
    10. Store the data relating to the keyword into the same object that stores all the parameters using the following steps. Locate the following code section in the findAction() function:
      
      urlPara.skuOp           = document.all.skuOp.value;
      urlPara.name            = document.all.name.value;
      urlPara.nameOp                 = document.all.nameOp.value;
      

      Immediately after this section, add the following code lines:

      
      urlPara.keyword                      = document.all.keyword.value;
      urlPara.keywordOp       = document.all.keywordOp.value;
      
    11. Save the file, but do not close the development environment.
  2. Add an entry to the struts-config-ext.xml file to point to your customized JSP page. All customization changes should be made in struts-config-ext.xml, not to struts-config.xml.
    1. In the WebSphere Commerce development environment, navigate to the CommerceAccelerator/Web Content/WEB-INF folder.
    2. From the struts-config-ext.xml file's pop-up menu, select Open.
    3. Locate the following text:
      
      <!-- Global Forwards --> <global-forwards>
      
    4. Immediately after this section, add the following tag:
      
      <forward name="CatEntrySearchDialog" path="/tools/custom/CatEntrySearchDialog.jsp"/>
      
    5. Save the file, but do not close the development environment.
  3. This procedure creates a custom version of the CatalogSearchUtil.jsp file within the WebSphere Commerce development environment:
    1. In the WebSphere Commerce development environment, navigate to the CommerceAccelerator/Web Content/tools/catalog folder.
    2. From the CatalogSearchUtil.jsp file's pop-up menu, select Copy.
    3. From the Web Content/tools/custom folder's pop-up menu, select Paste.
    4. Navigate to the Web Content/tools/custom folder.
    5. From the file's pop-up menu, select Open With > Source Editor
    6. Accept the keyword as a parameter to be passed into the search by first locating the following code in the setCatentryParameters() function:
      
      public void setCatentryParameters(JSPHelper helper, AdvancedCatEntrySearchListDataBean 
      catEntrySearchDB) {
           String catalogID, name, nameOp, searchScope, displayNum, sortBy, storeId, 
             languageId;
           String startCategory, startCategoryOp, sku, skuOp, manuNum, manuNumOp, manuName, 
            manuNameOp, published, notPublished;
           String searchProduct, searchItem, searchPackage, searchBundle, searchDynamicKit, 
            startIndex;
      

      Second, immediately under this section, add the following line:

      
      String keyword, keywordOp;
      
    7. Obtain the value of the keyword from the input by first locating the following code in the setCatentryParameters() function:
      
      storeId                              = helper.getParameter("storeId");
      languageId                    = helper.getParameter("languageId");
      name                     = helper.getParameter("name");
      nameOp                   = helper.getParameter("nameOp");
      

      Second, immediately under this section, add the following code lines:

      
      keyword                        = helper.getParameter("keyword");     
      keywordOp               = helper.getParameter("keywordOp");
      
    8. Trim the keyword input of any tailing white space. Locate the following code in the setCatentryParameters() function:
      
      if (sku != null) {
                sku = sku.trim();
      }
      

      Immediately under this section, add the following code lines:

      
      if (keyword != null) {                 
                keyword = keyword.trim();     
      }
      
    9. Interpret the keyword input. Locate the following code in the setCatentryParameters() function:
      
      //name
      if (name != null && !name.equals("")) {
             catEntrySearchDB.setSearchTerm(name);
             if (nameOp.equals(SEARCH_OPERATOR_EQUAL)) {
                  catEntrySearchDB.setSearchTermOperator(SEARCH_OPERATOR_EQUAL);
                  catEntrySearchDB.setSearchTermCaseSensitive(SEARCH_CASE_SENSITIVE_YES);
                  catEntrySearchDB.setSearchType("EXACT");
             } else {
                  catEntrySearchDB.setSearchTermOperator(SEARCH_OPERATOR_LIKE);
                  catEntrySearchDB.setSearchTermCaseSensitive(SEARCH_CASE_SENSITIVE_NO);
             }
       
             // search scope
             //By default in the catalog entry search databean, it is set to 1, which means 
               search for name and short description
             //Set it to a 2 means search on the name field only
             // 1 = search on name + short description
             // 2 = search on name only
             if (new Boolean (searchScope).booleanValue())
             {
                                      catEntrySearchDB.setSearchTermScope(new Integer (1));
             } else {
                                         catEntrySearchDB.setSearchTermScope(new Integer (2));
             }
      }
      

      Immediately under this section, add the following code:

      
      // keyword. Type can be "ANY", "ALL", or "EXACT"
      if (keyword != null && !keyword.equals("")) {
           catEntrySearchDB.setKeyword(keyword);
           if (keywordOp.equals(SEARCH_OPERATOR_EQUAL)) {
                catEntrySearchDB.setKeywordOperator(SEARCH_OPERATOR_EQUAL);
                catEntrySearchDB.setKeywordCaseSensitive(SEARCH_CASE_SENSITIVE_YES);
                catEntrySearchDB.setKeywordType("EXACT");
           } else {
                catEntrySearchDB.setKeywordOperator(SEARCH_OPERATOR_LIKE);
                catEntrySearchDB.setKeywordCaseSensitive(SEARCH_CASE_SENSITIVE_NO);
                catEntrySearchDB.setKeywordType("ANY");
           }
      }
      
    10. Save the file, but do not close the development environment.
  4. This procedure creates a new properties file, in a new folder, within the WebSphere Commerce development environment:
    1. In the WebSphere Commerce development environment, navigate to the WebSphereCommerceServerExtensionsLogic project.
    2. Navigate to the src folder.
    3. From the src folder's pop-up menu, select New, and then Package.
    4. In the Name Field on the New Java Package dialog, type a unique name. For the purposes of this scenario, type com.myCompany.catalog.Properties, where myCompany represents a custom directory name. Packages created by IBM, and included in WebSphere Commerce, follow a naming convention which begins with "com.ibm...". Click Finish to create the package.
    5. Select the com.myCompany.catalog.properties folder. From the folder's pop-up menu, select New, and then Other. In the New dialog, click Simple, File, and then Next.
    6. In the File name field, type a unique name. For the purposes of this scenario, type CategoryNLS_locale.properties, where locale represents the locale from which your business users will access the WebSphere Commerce Accelerator.
    7. Click Finish to create the file and open it in an editor.
    8. To simplify future maintenance, it is a good idea to include comments in the new file. These comments are optional, though strongly recommended. At the top of this file, include some comments similar to the following to clarify the file's purpose:
      
      #
      # Customized properties for catalogs
      ########################################################################
      categoryFindKeyword = Keyword
      
    9. Save the file, but do not close the development environment.

    This step addresses the label in the language for the locale you specified why you created the file. If you wanted to enter a string in more than one language, you would have to perform this step for each language, creating a file for each corresponding locale.

    If a business user attempts to access this page using a locale for which there is no explicit support, the tools framework will default to the CategoryNLS.properties file, which will not contain a string. You should ensure that you create a version of the properties file for every locale from which you expect users to access it.

  5. When you create a custom properties file, you must update the appropriate resources.xml file so that the new file is available to the tools within the component. Updating the appropriate resources.xml file is not done within the development environment. To make this update:
    1. Create a new directory. For the purposes of this scenario, name the directory myCustomXML, where myCustomXML represents a directory name. Create the directory structure myCustomXML/tools/catalog. If other Product Management tools customization scenarios are already implemented, this directory may already exist.
    2. Copy the WC_eardir/xml/tools/catalog/resources.xml file, and paste the file to the myCustomXML/tools/catalog directory.
    3. Open the new resources.xml file in a text editor.
    4. Scroll down to the resourceBundle section of the file, and update the code so that it matches the following sample:
      
      <resourceBundle name="CategoryNLS">
           <bundle>com.ibm.commerce.tools.catalog.properties.CategoryNLS</bundle>
           <bundle>com.myCompany.catalog.Properties.CategoryNLS</bundle>
      </resourceBundle>
      

      where myCompany represents your custom directory name.

    5. Save the file.
  6. In these four JSP files (KitItemPickListLayout.jsp, KitLayout.jsp, MAssocLayout.jsp, ProductUpdateDetail.jsp), update the paths to the CatalogSearchUtil.jsp file. Do the following:
    1. Navigate to the CommerceAccelerator project.
    2. Navigate to the Web Content/tools/catalog folder.
    3. Select the KitItemPickListLayout.jsp file. From the file's pop-up menu, select Copy.
    4. Select the Web Content/tools/custom folder. From the folder's pop-up menu, select Paste.
    5. From the new file's pop-up menu, choose Open With > Source Editor.
    6. Search for KitUtil.jsp. If found, replace the current <%@include file path line with
      
      <%@include file="../catalog/KitUtil.jsp" %>
      
    7. Save and close the file.
    8. Repeat these steps for the KitLayout.jsp file, MAssocLayout.jsp file, and ProductUpdateDetail.jsp file.
  7. Update struts-config-ext.xml with your customized JSP files:
    1. In the WebSphere Commerce development environment, navigate to the CommerceAccelerator/Web Content/WEB-INF folder.
    2. From the struts-config-ext.xml file's pop-up menu, select Open.
    3. Locate the following text:
      
      <!-- Global Forwards --> <global-forwards>
      
    4. Immediately after this section, add the following tags:
      
      <forward name="KitItemPickListLayoutView" path="/tools/custom/KitItemPickListLayout.jsp"/>
      <forward name="KitLayoutView" path="/tools/custom/KitLayout.jsp"/>
      <forward name="MAssocLayoutView" path="/tools/custom/MAssocLayout.jsp"/>
      <forward name="ProductUpdateDetail" path="/tools/custom/ProductUpdateDetail.jsp"/>
      
  8. Creating a custom XML file in a custom directory, as you did with WC_eardir/xml/myCustomXML/tools/catalog/resources.xml, requires that you update the instance XMLPath setting. This setting governs the locations in which the application will attempt to locate XML files. It functions in a manner similar to a Java classpath setting. This is not done within the development environment. To update the XMLPath setting do the following:
    1. Change to the WC_eardir/xml/config directory.
    2. Open the wc-server.xml file in an editor.
    3. Scroll down to the <ToolsGeneralConfig> section of the file, and update the XMLPath by specifying your custom directory name to the value. For example, if the original XMLPath value is
      
      XMLPath="tools;tools/devtools;WEB-INF/xml/tools;WEB_INF"
      
      and your custom directory is myCustomXML, then change the XMLPath value to
      
      XMLPath="myCustomXML;tools;tools/devtools;WEB-INF/xml/tools;WEB_INF"
      
    4. Save the file.

    Changing the XMLPath setting in the instance configuration file enable this customization only for the single instance. All other instances will not include this new button. If you have multiple instances to which you want to apply the customization, you must repeat this step for each instance.

    Note: Applying fix packs, or performing migration may overwrite any changes made to this file.

  9. Test your customization in your development environment. To complete this test:
    1. Stop and restart WebSphere Commerce within WebSphere Commerce Developer.
    2. Launch the WebSphere Commerce Accelerator.
    3. First add a keyword to a catalog entry so that you can search for it.
      1. Search for a catalog entry
      2. In the Images tab, enter a keyword in the keyword text box. To ensure that the keyword search works properly, the keyword should be a word that is not in the name or short description.
    4. Search for the keyword.
      1. Consumer direct (B2C)Merchandise > Find Catalog Entries. B2B directProducts > Find Catalog Entries.

        The new Keyword field should display on the Catalog Entry Search page.

      2. Search for a catalog entry using the Keyword field and the keyword you previously added. If you receive the correct results, then the customization has been a success, and you can proceed to propagate all of the changes you made to the development environment to the production environment as detailed in the following steps. If this search fails, you will have to determine the cause of the error, and debug.
  10. Package and deploy the updated assets.

    You will need the following information:

    Enterprise application name
    WCServer_enterprise_archive
    Relative path to file
    The relative path depends on the files you are deploying:
    CatEntrySearchDialog.jsp, CatalogSearchUtil.jsp, KitItemPickListLayout.jsp, KitLayout.jsp, MAssocLayout.jsp, ProductUpdateDetail.jsp
    CommerceAccelerator.war/tools/custom/filename
    CategoryNLS_locale.properties
    properties/com/myCompany/catalog/properties/CategoryNLS_ locale.properties
    struts-config-ext.xml
    CommerceAccelerator.war/WEB-INF/struts-config-ext.xml
    resources.xml
    xml/tools/catalog/resources.xml

    You may want to keep a backup copy of the existing resources.xml file in that directory until your changes are tested in the production environment.

  11. Restart your WebSphere Commerce instance.