Customize storefront pages

Customize storefront JavaServer Page files (JSP files) and the Spring MVC views that invoke them to modify how store pages are generated and returned to users of the store. Make additions or modifications to existing JSP files, or add new JSP files to extend the functionality of the storefront.

About this task

Add or extend store page and widget JSP files in the custom store web archive (crs-web.war). In addition to customizing existing JSP files, or adding new ones, we must also modify the store Spring view controller and views to return and display your new or extended pages to users of the storefront.

This process also provides the ability for you to customize IBM provided widgets and store pages. Once these files are moved into your custom store web archive, they are no longer updated automatically during the migration process. Therefore, these custom JSP files remain fully under your control. These JSP files can be relied on to function in the same way until any further customizations are made, or updates to their originals within the IBM provided store archive are merged manually.

The example procedure that is provided details the task flow required to customize existing and add new store pages to the storefront. Individual file, folder, and store names should reflect our own store environment and the customization that we are intending to implement.

Procedure

1. Create or extend the custom view crs-web.war/WEB-INF/spring/MyStore/member-views-ext.xml configuration file with the modified view definition. This example is the exact same view definition as member-views.xml. The only difference is the JSP file used.

   <?xml version="1.0" encoding="UTF-8"?>
   <beans xmlns="http://www.springframework.org/schema/beans" 
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
   xsi:schemaLocation="http://www.springframework.org/schema/beans/spring-beans.xsd">
   <bean id="GlobalLoginSignInView/MyStore" class="com.ibm.commerce.store.mvc.view.spring.StoreInternalResourceView">
   <property name="url" value="/MyWidgets/com.ibm.commerce.store.widgets.GlobalLogin/GlobalLoginSignInRegistration.jsp"/>
   <property name="https" value="1"/>
   <property name="credentialsAccepted" value="P"/>
   <property name="storeDir" value="no"/>
   <property name="generic" value="1"/>
   </bean>
   </beans>

   For more information about view controller customization, see Spring MVC and store controller customization.

2. Add the custom view to the extended view controller definition file.

   1. Open the view controller definition file crs-web.war/WEB-INF/spring/MyStore/views-ext.xml with a text editor.

   2. Modify existing views, or add the new custom view within the <beans> element. For example:

      <import resource="classpath:/WEB-INF/spring/MyStore/member-views-ext.xml"/>

3. Create or extend your new JSP file or JSP files. If we are customizing existing JSP files from the IBM provided store web archive, move them and all of their dependencies to the custom store web archive. In this example, these JSP files include:

   • The custom extended JSP file, crs-web.war/WebContent/MyWidgets/com.ibm.commerce.store.widgets.GlobalLogin/GlobalLoginSignInRegistration.jsp. Originally located in the crs-web.war/WebContent/Widgets_701/com.ibm.commerce.store.widgets.GlobalLogin/ directory.

   • The referenced JSP fragment files, now located in the crs-web.war/WebContent/MyWidgets/ directory. Originally located in the crs-web.war/WebContent/Widgets_701/ directory:

     • /Common/EnvironmentSetup.jspf

     • /Common/JSTLEnvironmentSetup.jspf

     • /Common/ErrorMessageSetup.jspf

     • /Common/nocache.jspf

     • /com.ibm.commerce.store.widgets.GlobalLogin/GlobalLoginSignInRegistration_Data.jspf

   Note: We can copy all referenced JSP files into the stores web archive. If we are referencing JSP files in other archives (such as default JSP files in the IBM provided store archive), then we can use the targetServletName property to reference them. For example, <property name="targetServletName" value="IBMStores"/> means that the referenced JSP is in the IBM provided store archive.

4. Customize any JSP files createdd or extended within the custom store web archive.

5. Restart the Store server.

Results

The storefront now returns a page that is built with the custom JSP file when the customized Spring view is used.

Related concepts
Analytics tag library for HCL Commerce