Feature Pack 8

Customizing the store widget to use the additional data

Feature Pack 8 In this lesson, you learn how to customize the store widget to use the new data that is returned by the custom profile that you created in the previous lesson.

Procedure

  1. Examine the storefront by using Firebug.
    1. Open the Mozilla Firefox browser. If the Firebug add-on is not already installed, install it.
    2. Open the Aurora B2B starter store in a web browser. Go to https://localhost/webapp/wcs/stores/servlet/en/aurorab2b.
    3. Click Sign In/Register and log in to the store as a Site Administrator.
      For example, wcsadmin.
    4. Click My Account to load the My Account page.
    5. On the left pane, click the Requisition List tab under the Order section.
      The values in the Requisition list columns are returned by the default IBM_Store_Summary profile by using REST service calls. For example:
      Requisition Lists
      You can now replace the default table column. For example, replace Last Updated, with new custom data such as Owner, which is returned by the custom MyCompany_Store_Summary profile by using REST service calls.
    6. Click the Firebug icon Firebug icon to open the Firebug debug pane.
    7. In the left pane, click the Inspect icon Inspect icon to inspect an element in the page.
    8. Highlight the requisition list table area. By referring to the debug pane, you can see that this table is managed by the com.ibm.commerce.store.widgets.RequisitionLists widget, which is under wcsstore/Widgets_701/com.ibm.commerce.store.widgets.RequisitionLists.
  2. Update the storefront to display the customized information.
    1. Open WebSphere Commerce Developer. Switch to the Enterprise Explorer view.
    2. Go to Stores\WebContent\Widgets_701\com.ibm.commerce.store.widgets.RequisitionLists.
    3. Select and open the RequisitionLists_Data.jspf file.
    4. Locate the following code snippet:
      
      <wcf:rest var="response" url="store/{storeId}/requisition_list">
      	<wcf:var name="storeId" value="${storeId}" encode="true"/>
      	<wcf:param name="q" value="usable"/>
      	<wcf:param name="pageNumber" value="${currentPage}"/>
      	<wcf:param name="pageSize" value="${pageSize}"/>
      	<wcf:param name="orderBy" value="D-lastUpdate"/>
      </wcf:rest>
      
    5. Add the following line of code to the end to specify your custom profile:
      
      <wcf:param name="profileName" value="MyCompany_Store_Summary"/>
      
    6. Locate the following code snippet and comment it out:
      
      <wcf:set target="${reqListMap}" key="updated" value="${formattedReqLastUpdate}"/>
      
    7. Replace it with the following code snippet:
      
      <%--<wcf:set target="${reqListMap}" key="updated" value="${formattedReqLastUpdate}"/> --%>
      <wcf:set target="${reqListMap}" key="updated" value="${requisitionList.Owner}"/>
      

      Use the Updated key for new custom data.

    8. Go to Stores\WebContent\Widgets_701\Common\Properties.
    9. Select the widgettext_B2B_en_US.properties and widgettext_B2B.properties files. Open the files for editing.
    10. Locate the following code snippet:
      
      REQUISITIONLIST_UPDATED = Last Updated
      
    11. Replace it with the following code snippet:
      
      REQUISITIONLIST_UPDATED = Owner
      
    12. Save the file. Restart the server.

    Next, verify your storefront customization.