Adding a medium sized image to the Product Management tool
You can customize the view tabs and columns for the Product Management tools pages.
Note: This
scenario and the keyword search
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.
In this scenario, the Keyword column from the Images tab is changed to contain medium sized images. After the tasks are complete, the Images tab will have the following three columns, in this order:
- Thumbnail size Image
- Medium Image
- Full Size Image
You customize the CatalogPageList.xml file and the ProductNLS_locale.properties file.
Procedure
- Create a directory under the WC_eardir/xml directory and call it WC_eardir/xml/myCustomXML where myCustomXML represents some custom directory name. If other Product Management tools customization scenarios are already implemented, this directory might exist.
- Update the Catalog Page List XML file to change the name
and the order of the columns in the Images tab in the Product Management
tools. To protect your customized data, it must be created in a safe
place, separate from the WebSphere Commerce assets. This procedure creates a Catalog
Page List definition file, in a new folder. This procedure is not
done within the development environment. To add the column, do the following
steps:
- Change to the WC_eardir/xml/tools/ directory.
- Make a copy of the WC_eardir/xml/tools/catalog/CatalogPageList.xml file. Paste the file in the WC_eardir/xml/myCustomXML directory.
- Open the CatalogPageList.xml file in a text editor.
- Move the following line:
<column id="keyword" tabid="4" type="TEXTAREA" CLASS="dtable" input="STRING" maxsize="254" width="30%" title="productUpdateDetail_Keyword" other=""/>
Between these two lines:
<column id="thumbnailImage" tabid="4" type="TEXTAREA" CLASS="dtable" input="STRING" maxsize="254" width="250px" title="productUpdateDetail_ThumbNail" other="ONCHANGE=fcnOnChangeThumbnail(this)"/> <column id="fullImage" tabid="4" type="TEXTAREA" CLASS="dtable" input="STRING" maxsize="254" width="250px" title="productUpdateDetail_FullImage" other=""/>
- In the
column id="keyword"
segment, changetitle="productUpdateDetail_Keyword"
to
title="productUpdateDetail_MediumImage"
You should see the following changes:
<column id="thumbnailImage" tabid="4" type="TEXTAREA" CLASS="dtable" input="STRING" maxsize="254" width="250px" title="productUpdateDetail_ThumbNail" other="ONCHANGE=fcnOnChangeThumbnail(this)"/> <column id="keyword" tabid="4" type="TEXTAREA" CLASS="dtable" input="STRING" maxsize="254" width="30%" title="productUpdateDetail_MediumImage" other=""/> <column id="fullImage" tabid="4" type="TEXTAREA" CLASS="dtable" input="STRING" maxsize="254" width="250px" title="productUpdateDetail_FullImage" other=""/>
- Save the file.
- When you create a custom XML file to update the user interface,
you must update the appropriate resources.xml file
so that the new user interface displays. This procedure is not done
within the development environment. To make this update:
- Create a directory. For the purposes of this scenario, name the directory WC_eardir/xml/myCustomXML, where myCustomXML represents a directory name. Create the directory structure WC_eardir/xml myCustomXML/tools/catalog. If other Product Management tools customization scenarios are already implemented, this directory might exist.
- Change to the WC_eardir/xml/tools/catalog directory.
- Place a copy of the file resources.xml in WC_eardir/xml/myCustomXML/tools/catalog.
- Open the resources.xml file in an editor.
- Scroll down to the
resourceXML
section of the file, and update the catalog list page entry so that it matches the following sample:<resourceXML name="CatalogPageList" file="../custom/CatalogPageList.xml" />
- Save the file.
- Override the existing ProductNLS_en_US.properties file
to add the information for the changed columns in the Images tab. 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 properties
file, in a new folder, within the WebSphere Commerce development environment:
- Open the WebSphere Commerce development environment.
- Go to the WebSphereCommerceServerExtensionsLogic project.
- Go to the src folder.
- From the src folder's pop-up menu, select New, and then Package.
- 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 that are created by IBM, and included in WebSphere Commerce, follow a naming convention which begins with com.ibm... - From the com.myCompany.catalog.Properties folder's pop-up menu, and select New, and then Other. In the New dialog, click Simple, File, and then Next.
- In the File name field, type
ProductNLS_locale.properties
, where locale represents your locale from which your business users access the WebSphere Commerce Accelerator. - Click Finish to create the file and open it in a text editor.
- To simplify future maintenance, it is a good idea to
include comments in the new file. At the top of this file, include
some comments similar to the following to clarify the purpose of the
file:
# # Customized properties for catalogs # Changed columns for the Images tab: new order and replace keyword column with # medium image ################################################################################
- Add the following line:
productUpdateDetail_MediumImage=Medium Image
- Save the file.
- 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. This is not
done within the development environment. To make this update:
- Change to the WC_eardir/xml/myCustomXML/tools/catalog directory.
- Open the resources.xml file in a text editor.
- Scroll down to the
resourceBundle
section of the file, and update the code so that it matches the following sample:<resourceBundle name="ProductNLS"> <bundle>com.ibm.commerce.tools.catalog.properties.ProductNLS</bundle> <bundle>com.myCompany.catalog.Properties.ProductNLS</bundle> </resourceBundle>
Where myCompany represents your custom directory name.
- Save the file.
- Creating a custom XML file in a custom directory
requires that you update the instance XMLPath setting. This setting
governs the locations in which the application attempts 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 steps:
- Change to the WC_eardir/xml/config directory.
- Open the wc-server.xml file in an editor.
- 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
and your custom directory is myCustomXML, then change the XMLPath value toXMLPath="tools;tools/devtools;WEB-INF/xml/tools;WEB_INF"
XMLPath="myCustomXML;tools;tools/devtools;WEB-INF/xml/tools;WEB_INF"
- Save the file.
- Test your customization in your development environment.
To complete this test:
- Stop and restart WebSphere Commerce within WebSphere Commerce Developer.
- Launch the WebSphere Commerce Accelerator.
- Select Merchandise > Catalog Management. Products > Catalog Management.
- Select a category and click List Catalog Entries. Ensure that there are catalog entries in the catalog.
- Click the Images tab. Three columns are displayed: Thumbnail size Image, Medium Image, Full Size ImageProceed to propagate all of the changes you made to the development environment to the production environment as detailed in the following steps. If this check fails, you will have to determine the cause of the error, and debug.
- Package and deploy the
updated store assets. Update the following information:
- Enterprise application name
- WCServer_enterprise_archive
- Relative path to file
- The relative path depends on the file you are deploying:
- CatalogPageList.xml
- xml/tools/custom/CatalogPageList.xml
- resources.xml
- xml/tools/catalog/resources.xml
Keep a backup copy of the existing resources.xml file in that directory until your changes are tested in the production environment.
- ProductNLS_locale.properties
- properties/com/myCompany/catalog/properties/ProductNLS_locale.properties
- Restart your WebSphere Commerce instance.
- To retrieve the file name of a medium sized image for use on a JSP page, you must use the ProductDataBean.getDescription().getKeyWord() method. The scenario uses the keyword field to hold the medium sized image.