Update the storefront to sell dynamic kits with the Omni-Configurator widget

If you have an existing store, we can enable the storefront to sell dynamic kits by using the Omni-Configurator widget. If you publish a new store, the storefront is already configured with the Omni-Configurator widget. We can customize the Omni-Configurator widget after it is enabled on the storefront.

Note: This task is only required if the store was published before WebSphere Commerce 9006+. If the store is based on 9006+, we can skip this step, since the storefront is configured to use Omni-Configurator by default.


Before beginning

  1. If we are using a B2B store model, we must install WebSphere Commerce 9.0.0.7 (or higher).

  2. Download and install Sterling Visual Modeler.

  3. Deploy the Sterling Omni-Configurator.

  4. Enable Sterling Omni-Configurator integration with WebSphere Commerce.


Task info

In the following task, you add the Omni-Configurator widget to the storefront based on the sample code from the AuroraStorefontAssetStore assets. Once the storefront is configured to use the Omni-Configurator widget, we can customize the widget UI to suit the store-specific needs.


Procedure

  1. Enable the storefront with the Omni-Configurator widget.

    1. Open the crs-web/WebContent/WEB-INF/spring/other-view.xml file, then locate the URL value for theConfigureView bean ID, as illustrated in the following code sample. 

        <bean id="ConfigureView" class="com.ibm.commerce.store.mvc.view.spring.StoreInternalResourceView"> 
    <property name="url" value="/ShoppingArea/Configurator/Configure.jsp"/>  
    <property name="https" value="1"/>
  </bean>

    2. Close the crs-web/WebContent/WEB-INF/spring/other-view.xml file.

    3. Edit the JSP file that you located in the previous step. In the code sample, the file was /ShoppingArea/Configurator/Configure.jsp.

      Note: If the store was published upgrading to WebSphere Commerce 9006+, we must update your Configure.jsp file with the 9006+ version. To update this file, review the default /ShoppingArea/Configurator/Configure.jsp file on 9006+ and merge the changes with your existing file.

    4. Embed the Omni-Configurator widget to render the whole configurator page within your storefront by adding the following code. 

        <!DOCTYPE html>
<%@ include file="../../Common/EnvironmentSetup.jspf" %>
<%@ include file="../../Common/nocache.jspf"%>
<html xmlns:wairole="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#"
xmlns:waistate="http://www.w3.org/2005/07/aaa" lang="${shortLocale}" xml:lang="${shortLocale}">
    <head>
        <%@ include file="../../Common/CommonCSSToInclude.jspf"%>
        <title><fmt:message bundle="${storeText}" key="CONFIGURE" /></title>
        <%@ include file="../../Common/CommonJSToInclude.jspf"%>
       </head>

    <body>
        <c:set var="hasBreadCrumbTrail" value="true" scope="request"/>
        <%@ include file="../../Common/CommonJSPFToInclude.jspf"%>
        <div id="page">
            <!-- Start Header -->
            <div class="header_wrapper_position" id="headerWidget">
                <%out.flush();%>
                    <c:import url = "${env_jspStoreDir}/Widgets/Header/Header.jsp" />
                <%out.flush();%>
            </div>
            <!-- End Header -->
            <%out.flush();%>
                <wcpgl:widgetImport useIBMContextInSeparatedEnv="${isStoreServer}" 
                 url="${env_siteWidgetsDir}com.ibm.commerce.store.widgets.OmniConfigurator/OmniConfigurator.jsp">                                                         
                </wcpgl:widgetImport>
                <%out.flush();%>
            <!--Start Footer Content-->
            <div class="footer_wrapper_position">
                <%out.flush();%>
                    <c:import url = "${env_jspStoreDir}/Widgets/Footer/Footer.jsp" />
                <%out.flush();%>
            </div>
            <!--End Footer Content-->
       <%@ include file="../../Common/JSPFExtToInclude.jspf"%> 
</body>
</html>
<!-- END Configure.jsp -->

    5. Save and close the /ShoppingArea/Configurator/Configure.jsp file.

  2. Optional: Customize the Omni-Configurator widget to suit the storefront needs.

    1. Open the Configurator UI development package from WCDE_installdir/samples/integration/Omni-Configurator/Configurator_UI_Update.zip.

    2. Customize and build your ConfiguratorUI widget.

    3. Create an Omni-Configurator widget to use your new UI package.

      1. Copy a new widget from the com.ibm.commerce.store.widgets.OmniConfigurator source.

      2. Replace the Configurator UI package with the package you created.

      3. Rebuild the store code, including Javascript and CSS files.

      4. Update the ShoppingArea/Configurator/Configure.jsp file to import your new widget JSP, as outlined in step 1.