Updating your storefront to sell dynamic kits with the Omni-Configurator widget

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

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

Before you begin

If you are using a B2B store model, you must install HCL Commerce 9.0.0.7 (or higher).
Download and install Sterling Visual Modeler.
Deploy the Sterling Omni-Configurator.
Enable Sterling Omni-Configurator integration with HCL Commerce.

About this task

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

Procedure

Enable your storefront with the Omni-Configurator widget.

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>

Close the crs-web/WebContent/WEB-INF/spring/other-view.xml file.
Edit the JSP file that you located in the previous step. In the code sample, the file was /ShoppingArea/Configurator/Configure.jsp.

Note: If your store was published upgrading to HCL Commerce 9006+, you 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.

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 -->

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

Optional: Customize the Omni-Configurator widget to suit your 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 your 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.