Mise à jour de votre vitrine pour vendre des kits dynamiques avec le widget Omni-Configurator

Si vous avez un magasin existant, vous pouvez activer votre vitrine pour vendre des kits dynamiques à l'aide du widget Omni-Configurator. Si vous publiez un nouveau magasin, votre vitrine est déjà configurée avec le widget Omni-Configurator. Vous pouvez personnaliser le widget Omni-Configurator après son activation sur votre vitrine.

Remarque : Cette tâche n'est requise que si votre magasin a été publié avant HCL Commerce 9006+. Si votre magasin est basé sur 9006+, vous pouvez sauter cette étape, puisque votre vitrine est configurée pour utiliser Omni-Configurator par défaut.

Avant de commencer

  1. Si vous utilisez un modèle de magasin B2B, vous devez installer HCL Commerce 9.0.0.7 (ou une version supérieure).
  2. Téléchargez et installez Sterling Visual Modeler.
  3. Déployez Sterling Omni-Configurator.
  4. Activez l'intégration de Sterling Omni-Configurator avec HCL Commerce.

Pourquoi et quand exécuter cette tâche

Dans la tâche suivante, vous ajoutez le widget Omni-Configurator à votre vitrine en fonction de l'exemple de code des actifs AuroraStorefontAssetStore. Une fois que votre vitrine est configurée pour utiliser le widget Omni-Configurator, vous pouvez personnaliser l'interface utilisateur du widget en fonction des besoins spécifiques à votre magasin.

Procédure

  1. Activez votre vitrine avec le widget Omni-Configurator.
    1. Ouvrez le fichier crs-web/WebContent/WEB-INF/spring/other-view.xml, puis recherchez la valeur d'URL de l'ID du bean ConfigureView, comme illustré dans l'exemple de code suivant. 
      <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. Fermez le fichier crs-web/WebContent/WEB-INF/spring/other-view.xml.
    3. Modifiez le fichier JSP que vous avez localisé à l'étape précédente. Dans l'exemple de code, le fichier était /ShoppingArea/Configurator/Configure.jsp.
      Remarque : Si votre magasin a été publié mise à niveau vers HCL Commerce 9006+, vous devez mettre à jour votre fichier Configure.jsp avec la version 9006+. Pour mettre à jour ce fichier, examinez le fichier par défaut /ShoppingArea/Configurator/Configure.jsp sur 9006+ et fusionnez les modifications avec votre fichier existant.
    4. Intégrez le widget Omni-Configurator pour rendre toute la page de Configurator dans votre vitrine en ajoutant le code suivant.
      <!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. Enregistrez et fermez le fichier /ShoppingArea/Configurator/Configure.jsp.
  2. Facultatif : Personnalisez le widget Omni-Configurator en fonction des besoins de votre vitrine.
    1. Ouvrez le package de développement de l'interface utilisateur de Configurator à partir de WCDE_installdir/samples/integration/Omni-Configurator/Configurator_UI_Update.zip.
    2. Personnalisez et créez votre widget ConfiguratorUI.
    3. Créez un widget Omni-Configurator pour utiliser votre nouveau package d'interface utilisateur.
      1. Copiez un widget à partir de la source com.ibm.commerce.store.widgets.OmniConfigurator.
      2. Remplacez le package d'interface utilisateur Configurator par le package que vous avez créé.
      3. Régénérez le code de votre magasin, y compris les fichiers Javascript et CSS.
      4. Mettez à jour le fichier ShoppingArea/Configurator/Configure.jsp pour importer votre nouveau widget JSP, tel que décrit à l'étape 1.