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
-
Create the custom widget within the custom store web archive.
For example:
-
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).
- Copy the original file from the IBM provided store web archive from the
/WebContent/Widgets_701/ directory.
- 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.
-
Open the MyEmarketingSpot.jsp file with a text editor.
-
Update the custom widget JSP to point to the IBM provided web archive to rely on existing JSP
files.
- 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">
- 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">
-
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.
- 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.
- Locate the include references that refer to the JSP fragment dependencies. For example,
<%@ include file="/Widgets_701/Common/StorePreviewShowInfo_End.jspf" %>
- Change the include file paths to point to the new location of the JSP fragments. For example,
<%@ include file="../Common/StorePreviewShowInfo_End.jspf" %>
-
Add your customization. For this example, add text to the
widget.
- In the widget JSP, find the line
<c:forTokens
items="${displayOrder}" delims="," var="type"
varStatus="status">
.
- Add a line below it to insert an image
<c:out
value=”customizable”/>
.
-
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’;
-
Restart the Store server.
Results
Navigate to the storefront to observe the message in the modified widget.