Customizing an existing widget

Customize a provided widget to modify its behavior for use on your storefront.For this customization example, the EMarketingSpot widget is customized to include a static message. To do this, you must copy the widget and all of its static dependencies to the custom store web archive, and update the widget JSP to properly reference its dependencies in both the custom store web archive and the IBM provided store web archive. For more information about creating widgets, see Creating widgets.

Procedure

  1. Create the custom widget within the custom store web archive.
    For example:
    1. Copy the EMarketingSpot.jsp widget JavaServer Page file from the IBM provided stores web archive (crs-web.war) to the custom store web archive (crs-web.war).
      1. Copy the original file from the IBM provided store web archive from the /WebContent/Widgets_701/ directory.
      2. Place the file into the custom store web archive under the /WebContent/Widgets_MyCompany/com.ibm.commerce.store.widgets.EMarketingSpot, directory and rename it as MyEMarketingSpot.jsp. The Widgets_MyCompany directory will contains all custom widgets.
    2. Open the MyEmarketingSpot.jsp file with a text editor.
    3. Update the custom widget JSP to point to the IBM provided web archive to rely on existing JSP files.
      1. Locate the <c:import> tag references that refer to other widgets. For example, <c:import url="${env_siteWidgetsDir}com.ibm.commerce.store.widgets.CategoryRecommendation/CategoryRecommendation.jsp">
      2. Change each reference using the context attribute to use the IBM provided web archive. For example, <c:import context="${staticIBMAssetContextRoot}" url="${env_siteWidgetsDir}com.ibm.commerce.store.widgets.CategoryRecommendation/CategoryRecommendation.jsp">
    4. Update the custom widget JSP to point to the correct JSP fragments (JSPF files) that are included by the include method in the widget JSP file.
      Static JSP includes can only include files that are located within the same web archive. Therefore you must copy these dependencies and update the custom widget JSP include code to point to the correct directory for dependencies within the same web archive.
      1. Copy the included JSP fragments from the IBM provided store web archive to the custom store web archive. Copy StorePreviewShowInfo_End.jspf, EnvironmentSetup.jspf, EMarketingSpot_Data.jspf, etc.
      2. Locate the include references that refer to the JSP fragment dependencies. For example, <%@ include file="/Widgets_701/Common/StorePreviewShowInfo_End.jspf" %>
      3. Change the include file paths to point to the new location of the JSP fragments. For example, <%@ include file="../Common/StorePreviewShowInfo_End.jspf" %>
    5. Add your customization. For this example, add text to the widget.
      1. In the widget JSP, find the line <c:forTokens items="${displayOrder}" delims="," var="type" varStatus="status">.
      2. Add a line below it to insert an image <c:out value=”customizable”/>.
  2. Update the existing widget definition in the database.
    In the PLWIDGETDEF table:
    • Set the VENDOR to MyCompany.
    • Set the JSPPATH to /Widgets_MyCompany/com.ibm.commerce.store.widgets.EMarketingSpot/MyEMarketingSpot.jsp.
    To do this, you can use a statement such as: 
    Update PLWIDGETDEF 
set Vendor=’MyCompany’, JSPPATH=’/Widgets_MyCompany/com.ibm.commerce.store.widgets.EMarketingSpot/MyEMarketingSpot.jsp’ 
where IDENTIFIER=’EMarketingSpot_701’ and STOREENT_ID=’0’;
  3. Restart the Store server.

Results

Navigate to the storefront to observe the message in the modified widget.