Customizing the storefront with the getData tag
In this lesson, you are modifying a JSP file
to display warranty information with the
getData
tag.
After you complete this customization, shoppers can see a warranty
information tab on the details page for products. When shoppers click
this tab, the warranty information displays in the tab pane.Procedure
- Create the storefront get-data-config file
to retrieve Warranty information from the CatalogEntry noun UserData
element. The get-data-config file overwrites
the configuration file of the catalog component. JSP pages reference
the
getData
tag by using expression builder and access profile names. The<wcf:getData>
tag, retrieves service data objects from WebSphere Commerce services and associates them with a declared scripting variable with an Id.- In the Enterprise Explorer view, expand Stores > WebContent > WEB-INF > config.
- Right-click config; then click New > Folder
- In the Folder name field, enter com.ibm.commerce.catalog-ext
- Click Finish. The com.ibm.commerce.catalog-ext folder is created under the config directory.
- Right-click com.ibm.commerce.catalog-ext and select New > File
- In the File name field, enter get-data-config.xml
- Click Finish. Enter the following
code in get-data-config.xml file.
<?xml version="1.0" encoding="UTF-8"?> <wcf:get-data-config xmlns:wcf="http://www.ibm.com/xmlns/prod/commerce/foundation" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.ibm.com/xmlns/prod/commerce/foundation ../../xsd/get-data-config.xsd "> <expression-builder> <name>getCatalogEntryWithWarranty</name> <data-type-name>CatalogEntry</data-type-name> <expression-template>{_wcf.ap=$accessProfile$}/CatalogEntry[CatalogEntryIdentifier[(UniqueID='$catalogEntryId$')]]</expression-template> <param> <name>accessProfile</name> <value>MyCompany_All</value> </param> </expression-builder> </wcf:get-data-config>
Where:
expression-builder
name
getCatalogEntryWithWarranty
is used bygetData
tag and is referenced by the JSP page, which is modified in the next step.data-type-name
- The noun.
expression-template
- The XPath specify defined in the wc-query-MyCompanyCatalogEntry-get.tpl file.
param
name
- The name of the access profile that is defined in the wc-query-MyCompanyCatalogEntry-get.tpl file.
value
- The value,
MyCompany_All
, of the access profile that is defined in the wc-query-MyCompanyCatalogEntry-get.tpl file.
- Save the file.
- Extend the property file.
- Navigate to the Enterprise Explorer view, expand Stores > Java Resources:src > your_store_name. Where your_store_name is the directory name for your store.
- Open the storetext.properties file.
- Add the properties for the new tab:
warranty=Warranty warterm=Warranty Term wartype=Warranty Type
- Save your changes and close the file
- Add a Warranty tab to the Product Display Page:
- In the Enterprise Explorer view, navigate to the Stores > WebContent > your_store_name > Snippets > Catalog > CatalogEntryDisplay. Where your_store_name is the directory name for your store.
- The CachedProductOnlyTabsExt.jspf file
is empty by default. Add the following code:
<%-- This is the code that displays when the warranty tab is clicked. The "WARRANTY" value is defined in storetext.properties --%> <span class="on" id="Warranty_On" style="display:none"> <span class="left_corner"> </span> <span class="text"><fmt:message key="Warranty" bundle="${storeText}" /></span> <span class="right_corner"> </span> </span> <%-- This is the code that displays when the warranty tab is not selected. --%> <span class="off" id="Warranty_Off" style="display:inline"> <a href="javascript:selectTab('Warranty');" class="catalog_link" id="warranty_links_1"> <span class="text"><fmt:message key="Warranty" bundle="${storeText}" /></span></a> </span>
- Modify the cached product tab pane extension file to include
warranty information in the product details page warranty tab:
- In the Enterprise Explorer view, navigate to the Stores > WebContent > your_store_name > Snippets > Catalog > CatalogEntryDisplay. Where your_store_name is the directory name for your store.
- Open the CachedProductOnlyTabPanesExt.jspf file
for editing. This file is an extension file for customization purposes.
The CachedProductOnlyDisplay.jsp file calls this
file to retrieve any information with the
getData
tag to display in a custom tab for the product details pages for your store. - The CachedProductOnlyTabPanesExt.jspf file
is empty by default. Add the following code to ensure warranty information
displays in the warranty tab for your product details page:
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ taglib uri="http://commerce.ibm.com/foundation" prefix="wcf" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %> <%@ taglib uri="http://commerce.ibm.com/base" prefix="wcbase" %> <%@ taglib uri="flow.tld" prefix="flow" %> <wcf:getData type="com.ibm.commerce.catalog.facade.datatypes.CatalogEntryType[]" var="catentries" expressionBuilder="getCatalogEntryWithWarranty"> <wcf:contextData name="storeId" data="${WCParam.storeId}"/> <wcf:contextData name="catalogId" data="${WCParam.catalogId}"/> <wcf:contextData name="langId" data="${WCParam.langId}"/> <wcf:param name="catalogEntryId" value="${catalogEntryID}"/> <wcf:param name="accessProfile" value="MyCompany_All"/> </wcf:getData> <div id="Warranty" href="<c:out value='${WarrantyView}'/>" dojoType="dijit.layout.ContentPane" > <c:forEach var="catalogEntry" items="${catentries}"> <c:forEach var="userDataField" items="${catalogEntry.userData.userDataField}"> <c:if test="${userDataField.typedKey == 'wartype'}"> <b><span class="text"><fmt:message key ="${userDataField.typedKey}" bundle="${storeText}" /></span>: </b>${userDataField.typedValue} <br> </c:if> <c:if test="${userDataField.typedKey == 'warterm'}"> <b><span class="text"><fmt:message key ="${userDataField.typedKey}" bundle="${storeText}" /></span>: </b>${userDataField.typedValue} <br> </c:if> </c:forEach> </c:forEach> </div>
- Save and close the file.
- Create an access control policy to secure the new warranty
view.By default, only the users that are assigned to the Site Administrator role can access the view that is created in the preceding step. In this step, you update the catalog service access control policy to permit all users to access the new view.
For more information about access control, see Sample: Access control policy for new views.
- Navigate to the file directory: WCDE_installdir/xml/policies/xml
- Create a file that is called WarrantyViewCommand.xml
- Copy and paste the following access control policy XML
into this file:
<?xml version="1.0" encoding="ISO-8859-1" standalone="no" ?> <!DOCTYPE Policies SYSTEM "../dtd/accesscontrolpolicies.dtd"> <Policies> <Action Name="WarrantyView" CommandName="WarrantyView"> </Action> <ActionGroup Name="AllSiteUsersViews" OwnerID="RootOrganization"> <ActionGroupAction Name="WarrantyView"/> </ActionGroup> </Policies>
- Save the file.
- Stop the test environment.
- In a command prompt, navigate to WCDE_installdir\bin
- Run the following command to load the WarrantyViewCommand.xml
access control policy:
acpload WarrantyViewCommand.xml
- Navigate to the WCDE_installdir\logs directory.
Inspect the acpload.log and messages.txt files
to ensure that the access control policy loaded successfully. The messages.txt file
might not exist when the load completes successfully. Ensure that
the policy files were created successfully in the WCDE_installdir\xml\policies\xml directory: WarrantyViewCommand_idres.xml and WarrantyViewCommand_xmltrans.xml.
These two files are created as part of a successful
idresgen
utility process. If any other error files are generated in this directory, these error files indicate that there was a problem during the load process.