Tutoriel : Personnalisation de la vitrine

Dans ce tutoriel, vous apprenez à personnaliser la vitrine d'un magasin personnalisé en raccourcissant l'URL du magasin et en ajoutant une vue à la vitrine en mettant à jour la racine de contexte et en ajoutant une vue pour afficher la page d'accueil.

Before you begin

Assurez-vous d'avoir un magasin de ressources de vitrine personnalisé et un magasin de sites étendus personnalisés publiés dans votre environnement de développement et votre environnement d'exécution. Ce tutoriel utilise un magasin de ressources de vitrine nommé MytoyStorefrontAssetStore et un magasin de site étendu nommé MytoyESite en tant qu'exemples.

About this task

Le serveur de magasin est séparé du serveur de transactions. Il fonctionne comme une application distante, en envoyant des appels sortants pour interagir avec les serveurs de transactions et de recherche. Le développement de la vitrine pour cet environnement est différent de celui des versions précédentes de HCL Commerce.

Ce tutoriel vous guide tout au long du flux de personnalisation de la vitrine dans votre environnement de développement. Vous déployez ensuite le package nouvellement créé dans l'environnement d'exécution pour vérification.

Cette procédure comporte deux parties :
  • Raccourcissez l'URL de référencement, en remplaçant la racine de contexte /wcs/shop par /myshop. La nouvelle URL sera : https://hostname:port/myshop/en/storename
  • Ajoutez une nouvelle vue pour afficher la page d'accueil.
    • Personnalisez une classe Java pour afficher un message d'accueil en fonction de l'heure, qui sera utilisé par un fichier JSP.
    • Personnalisez un fichier JSP de niveau magasin, en ajoutant un message d'accueil au-dessus du logo.
    • Ajoutez un nouveau bean de vue dans le fichier de configuration Spring pour définir le JSP personnalisé comme page Accueil du site.
Effectuez ces étapes dans l'environnement de développement.

Procedure

  1. Raccourcissez l'URL de référencement.
    1. Ouvrez le fichier de configuration WCDE_installdir\workspace\crs\META-INT\application.xml pour l'éditer. Modifiez l'élément suivant : 
      <context-root>/</context-root>
    2. Ouvrez le fichier de configuration WCDE_installdir\workspace\crs\xml\config\wc-store.xml pour l'éditer. Mettez à jour l'élément suivant : 
      <WebModule> ... <Module contextPath="/" name="Stores" urlMappingPath="/myshop" webAlias="/wcsstore"> ... </WebModule>
    3. Ouvrez le fichier de configuration WCDE_installdir\workspace\crs-web\WebContent\WEB-INF\web.xml pour l'éditer. Mettez à jour l'élément suivant : 
      <servlet-mapping> <servlet-name>Stores</servlet-name> <url-pattern>/myshop/*</url-pattern> </servlet-mapping>
  2. Créez un fichier Java.
    1. Créez un package Java sous le projet src-extensions-logic. Dans la boîte de dialogue, entrez src dans la zone Dossier source et com.mycompany dans la zone Nom.
    2. Ajoutez une classe Java sous le package. Dans cet exemple, définissez le dossier Source comme crs-extensions-logic/src et Package comme com.mycompany. Dans cet exemple, la valeur Nom est Bienvenue.
    3. Modifiez le code Java de la nouvelle classe : 
      package com.mycompany; import java.util.Calendar; public class Welcome { public String outputWelcome(){ String output = ""; Calendar rightNow = Calendar.getInstance(); int hour = rightNow.get(Calendar.HOUR_OF_DAY); if(5<hour && hour<=12){ output = "Good morning!"; }else if(12<hour && hour<17){ output = "Good afternoon!"; }else{ output = "Good evening!"; } return output; } }
  3. Créez une page JavaServer.
    1. Modifiez les répertoires du projet crs-web. Copier le fichier /WebContent/MytoyStorefrontAssetStore/ShoppingArea/CatalogSection/CategorySubsection/TopCategoriesDisplay.jsp sur TopCategoriesDisplay1.jsp.
    2. Ouvrez le fichier TopCategoriesDisplay1.jsp en édition. Ajoutez le code suivant sous le commentaire <!-- BEGIN TopCategoriesDisplay.jsp -->. 
      <%@ page import="com.mycompany.Welcome" %> <% Welcome welcomeClass=new Welcome(); String output=welcomeClass.outputWelcome(); request.setAttribute("welcome", output); %>
      Ajoutez le code suivant sous la balise <div id="grayOut"></div>.
      <div><c:out value = "${welcome}"/></div>
  4. Mettez à jour la vue.
    1. Ouvrez le fichier de configuration /WebContent/WEB-INF/spring/MytoyStorefrontAssetStore/views-ext.xml pour l'éditer. Ajoutez le code suivant après la section beans du fichier. 
      <bean id="TopCategoriesDisplay/MytoyStorefrontAssetStore" class="com.ibm.commerce.store.mvc.view.spring.StoreInternalResourceView"> <property name="url" value="/ShoppingArea/CatalogSection/CategorySubsection/TopCategoriesDisplay1.jsp"/> <property name="https" value="1"/> <property name="credentialsAccepted" value="P"/> <property name="generic" value="1"/> </bean>
      Pour plus d'informations, voir Personnalisation de la configuration MVC Spring du magasin.
  5. Exécutez l'utilitaireHCL Commerce Build (WCB) en mode code local pour déployer le package.

    Un exemple de code est disponible dans le fichier compressé quick-start-for-toolkit.zip. Extrayez cette archive dans le dossier WCDE_installdir\wcbd\ pour référence.

    1. Créez un référentiel personnalisé local et copiez ou téléchargez vos ressources personnalisées dans un dossier local.
      Par exemple, créez et utilisez un répertoire local nommé repo.
      Note: Pour crs-web, crs-preview-web et crs-alias-proxy-web, incluez toutes les ressources.
       repo/ |----workspace/ |----crs/ | |----META-INF/ | |----properties/ | |----xml/ | |----config/ | |----crs-extensions-logic | |----src/ | |----com/ | |----mycompany/ | |----crs-web/ |----src/ |----WebContent/ |----ExtendedSitesCatalogAssetStore/ |----images/ |----JQuery/ |----META-INF/ |----MytoyStorefrontAssetStore/ |----qrcode/ |----tools/ |----WEB-INF/ |----Widgets_801/
    2. Copier le fichier WCDE_installdir\wcbd\wcbd-setenv.bat.template sur setenv.bat.
    3. Ouvrez setenv.bat pour l'éditer et définissez les variables d'environnement ANT_HOME, WAS_HOME et WC_HOME. Par exemple : 
      set ANT_HOME=W:\WCDE_V9\wcbd\apache-ant-1.10.1 set WAS_HOME=W:\IBM\WebSphere\AppServer set WC_HOME=W:\WCDE_V9
    4. Copier le fichier WCDE_installdir\wcbd\extract\wcbd-sample-extract-local.xml sur WCDE_installdir\wcbd\extract-local.xml.
    5. Ouvrez extract-local.xml pour l'éditer. Modifiez <project name="wcbd-sample-extract-local" default="all"> en <project name="extract-local" default="all">.
    6. Copiez le fichier de propriétés WCDE_installdir\wcbd\extract\wcbd-sample-extract-local.properties sur WCDE_installdir\wcbd\extract-local-crs.properties.
    7. Ouvrez extract-local-crs.properties pour l'éditer et définissez la variable local.extract.dir sur le répertoire d'extraits local que vous avez créé ou désigné. Dans cet exemple, utilisez local.extract.dir=D:/repo.
    8. Facultatif : Copiez le fichier modèle WCDE_installdir\wcbd\wcbd-build.private.properties.template sur build-local-crs.private.properties, et définissez les variables mail.user et mail.password.
    9. Copiez le fichier modèle WCDE_installdir\wcbd\wcbd-build.properties.template sur build-local-crs.properties.
    10. Définissez les propriétés et les valeurs suivantes sur build-local-crs.properties. 
      java.module.list=crs-extensions-logic web.module.list=crs-web wc.home=W:/WCDE_V9 was.home=W:/IBM/WebSphere/AppServer
    11. Exécuter la commande wcb cmd: wcbd-ant -buildfile wcbd-build.xml -Dbuild.type=local -Dapp.type=crs -Dbuild.label=sampleCus
    12. Modifier le répertoire WCDE_installdir\wcbd\dist\server\ pour vérifier le résultat de génération.

    Pour en savoir plus sur WCB, voir Code personnalisé de combinaison pour le déploiement.

    Pour plus d'informations sur la structure de sortie WCB de magasin, reportez-vous à Structure de référentiel pour la création de packages de magasins distants (crs).

  6. Créez une nouvelle image à l'aide du package personnalisé.
    1. Extrayez wcbd-deploy-server-local-crs-sampleCus.zip vers le répertoire CusDeploy.
    2. Déployez le code dans votre environnement d'exécution.
    3. Créez un Dockerfile dans /opt/bvt/store/. Le fichier contient les éléments suivants : 
      FROM crs-app:latest # Using yum in RHEL/CentOS for package installation # RUN yum install -y nc && yum clean all COPY CusDeploy /SETUP/Cus RUN /SETUP/bin/applyCustomization.sh
    4. Remplacez les répertoires par /opt/bvt/store. Créez une image Docker qui utilise la commande docker build -f Dockerfile -t crs-app:cus.
  7. Exécutez un nouveau conteneur en fonction de la nouvelle image.
    1. Remplacez le paramètre magasindocker-compose.yml par store: image: crs-app:cus.
    2. Exécutez la commande docker pour lancer le nouveau conteneur : docker-compose up -d .
  8. Vérifiez vos modifications dans la vitrine, pour vous assurer que les deux personnalisations prennent effet après le déploiement de l'image Docker personnalisée.
    La vitrine avant les personnalisations affiche la bannière par défaut du magasin type Aurora.
    Après vos changements, le texte de la bannière dépendant du temps que vous avez ajouté à la classe Java Welcome apparaît maintenant au-dessus de la bannière Aurora.