Personnalisation de la vitrine pour qu'elle se connecte à la nouvelle page de magasin

Dans cette leçon, vous personnalisez la vitrine, y compris le widget de navigation Mon compte, pour les relier à la nouvelle page.

Procédure

Procédez comme suit dans HCL Commerce Developer.

Identifiez les fichiers qui nécessitent des mises à jour dans cette leçon.
1. Ouvrez un navigateur Web et accédez à votre magasin personnalisé à l'URL suivante :
  - https://localhost:8443/shop/en/myesite
2. Cliquez sur Mon compte dans l'en-tête et connectez-vous.
3. Passez en revue le flux suivant :
  Dans la page Mon compte, le nom de la vue (AjaxLogonForm ) peut s'afficher dans l'URL :
  Le mappage du contrôleur de vue pour AjaxLogonForm est défini dans le fichier crs-web\WebContent\WEB-INF\spring\member-views.xml :
```
<bean id="AjaxLogonForm"
class="com.ibm.commerce.store.mvc.view.spring.StoreInternalResourceView"
>
<property name="url"
value="/UserArea/AccountSection/LogonSubsection/LogonSetup.jsp"/>
<property name="https" value="1"/>
<property name="generic" value="1"/>
</bean>
```
  Comme indiqué, AjaxLogonForm est mappé au fichier LogonSetup.jsp.
  Le fichier LogonSetup.jsp importe ensuite le fichier MyAccountDisplay.jsp lorsqu'un utilisateur est connecté :
```
<c:set var="incfile"
value="${env_jspStoreDir}/UserArea/AccountSection/MyAccountDisplay.
jsp"/>
```
  Ensuite, le fichier MyAccountDisplay.jsp importe le widget MyAccountNavigation :
```
<wcpgl:widgetImport useIBMContextInSeparatedEnv="${isStoreServer}"
url="${env_siteWidgetsDir}com.ibm.commerce.store.widgets.MyAccountNav
igation/MyAccountNavigation.jsp"/>
```
  Par conséquent, le widget MyAccountNavigation affiche la navigation côté gauche sur la page Mon compte :
  
  Il s'agit du widget que vous personnaliserez pour inclure un lien vers la nouvelle page que vous allez créer plus tard dans ce tutoriel.
  
  Le widget MyAccountNavigation réside dans l'archive Web des magasins IBM fourni (crs-web.war) à utiliser en tant que modèle. Pour le personnaliser dans ce tutoriel, copiez-le dans votre propre dossier personnalisé.
Mettez à jour les fichiers widget du magasin en fonction de votre scénario.

Conseil : Toutes les modifications de code effectuées dans ce tutoriel sont disponibles sous forme d'exemples dans les ressources du tutoriel (StoreLab1.zip) que vous avez téléchargées au début de ce tutoriel. Au lieu d'effectuer manuellement les modifications, vous pouvez copier les fichiers depuis l'exemple vers l'espace de travail.
1. Dans le projet crs-web, accédez au répertoire WebContent et créez un nouveau répertoire appelé Widgets_S0126i.
2. Copiez le répertoire crs-web > WebContent > Widgets_801 > com.ibm.commerce.store.widgets.MyAccountNavigation dans le nouveau répertoire Widgets_S0126i que vous avez créé à l'étape précédente.
3. Dans l'Explorateur d'entreprise, cliquez avec le bouton droit sur crs-web et sélectionnez Actualiser. Le nouveau répertoire Widgets_S0126i et son contenu doivent maintenant être visibles dans le projet.
  
  Le répertoire et son contenu doivent ressembler à la capture d'écran suivante dans le projet :
Notez la règle suivante lors de la copie de fichiers JSP depuis l'archive Web fournie par IBM vers votre propre dossier personnalisé : toutes les références aux fichiers JSP existants qui se trouvent dans les fichiers JSP copiés doivent être mises à jour afin que le chemin d'accès correct soit utilisé.
Par exemple :
```
<c:import
url="${env_siteWidgetsDir}com.ibm.commerce.store.widgets.CategoryReco
mmendation/CategoryRecommendation.jsp">
```
Serait remplacé par :
```
<c:import context="${staticIBMAssetContextRoot}"
url="${env_siteWidgetsDir}com.ibm.commerce.store.widgets.CategoryReco
mmendation/CategoryRecommendation.jsp”>
```
Cette modification garantit que les fichiers du dossier personnalisé continuent de pointer correctement vers les fichiers de l'archive Web fournie par IBM.

Toutefois, comme aucun des fichiers que vous avez copiés dans ce tutoriel ne contient de balise <c:import>, aucune mise à jour n'est requise.
Les fichiers JSP statiques ne peuvent inclure que des fichiers situés dans la même archive Web. Par conséquent, copiez les dépendances de fichier et mettez à jour les fichiers JSP du widget personnalisé pour qu'il pointe vers les emplacements appropriés dans la même archive Web.
1. Dans crs-web > WebContent > Widgets_S0126i, créez un répertoire appelé Common.
2. Copiez les fichiers et l'arborescence de répertoires suivants du répertoire crs-web > WebContent > Widgets_801 > Common au nouveau répertoire Common que vous avez créé à l'étape précédente :
  Dans la racine du nouveau répertoire Common, collez les fichiers suivants :
  - EnvironmentSetup.jspf
  - JSTLEnvironmentSetup.jspf
  - nocache.jspf
  - SterlingConfiguratorIntegrationSetup.jspf
3. Dans l'Explorateur d'entreprise, cliquez avec le bouton droit sur crs-web et sélectionnez Actualiser. Les nouveaux répertoires et leur contenu doivent maintenant être visibles dans le projet.
Mettez à jour les chemins d'accès des fichiers dans les fichiers JSP pour qu'ils pointent vers les emplacements corrects dans le répertoire com.ibm.commerce.store.widgets.MyAccountNavigation.
1. Développez crs-web > WebContent > Widgets_S0126i > com.ibm.commerce.store.widgets.MyAccountNavigation.
  
  Les fichiers sont affichés dans Explorateur d'entreprise :
2. Ouvrez le fichier MyAccountNavigation.jsp pour l'éditer et passez à la vue Source.
3. Modifiez la ligne suivante :
```
<%@ include file="/Widgets_801/Common/EnvironmentSetup.jspf" %>
```
  A :
```
<%@ include file="../Common/EnvironmentSetup.jspf" %>
```
  Enregistrez et fermez le fichier.
4. Ouvrez le fichier MyAccountNavigation_Data.jspf.
  
  Toutes les URL correspondant aux liens affichés dans la navigation Mon compte sont définies dans ce fichier. Vous ajouterez une URL à la nouvelle page démographique qui sera créée ultérieurement dans ce tutoriel.
5. Recherchez la balise <wcf:url> qui définit la variable profileFormViewURL :
```
<wcf:url var="profileFormViewURL" value="ProfileFormView">
<wcf:param name="storeId" value="${WCParam.storeId}" />
<wcf:param name="catalogId" value="${WCParam.catalogId}"/>
<wcf:param name="langId" value="${langId}" />
<wcf:param name="profileFormStyle" value="strong"/>
</wcf:url>
```
6. Immédiatement en dessous de cette ligne, insérez le fragment de code suivant :
```
<wcf:url var="extProfileFormViewURL" value="ExtProfileFormView">
<wcf:param name="storeId" value="${WCParam.storeId}" />
<wcf:param name="catalogId" value="${WCParam.catalogId}"/>
<wcf:param name="langId" value="${langId}" />
</wcf:url>
```
  Une nouvelle variable appelée extProfileFormViewURL est définie, qui correspond à la vue ExtProfileFormView. Cette vue sera créée ultérieurement dans ce tutoriel. Cette vue sera mappée au nouveau fichier JSP que nous allons créer pour capturer les informations démographiques supplémentaires du client.
7. Ouvrez le fichier MyAccountNavigation_UI.jspf. Tous les liens affichés sur la page Mon compte sont définis dans ce fichier.
8. Recherchez la section suivante :
```
<flow:ifEnabled feature="quickCheckout">
   <li>
      <a href="<c:out value='${profileFormViewURL}'/>" id="WC_MyAccountSidebarDisplayf_links_3"><wcst:message key="MA_QUICK_CHECKOUT" bundle="${widgetText}"/></a>
   </li>
</flow:ifEnabled>
```
9. Immédiatement après la balise </flow:ifEnabled>, insérez le fragment de code suivant :
```
<li>
   <a href="<c:out value='${extProfileFormViewURL}'/>" id="WC_MyAccountSidebarDisplayf_links_3a"><wcst:message key="MA_EXT_PROFILE_INFO" bundle="${widgetText}"/></a>
</li>
```
  Enregistrez et fermez le fichier.
10. Développez le répertoire pendingApprovals.
11. Ouvrez le fichier AjaxNumberOfBuyerPendingApprovals.jsp pour l'éditer.
12. Localisez les lignes suivantes :
```
<%@ include file="/Widgets_801/Common/EnvironmentSetup.jspf" %>
<%@ include file="/Widgets_801/Common/nocache.jspf" %>
```
  Remplacez-les par :
```
<%@ include file="../Common/EnvironmentSetup.jspf" %>
<%@ include file="../Common/nocache.jspf" %>
```
  Enregistrez et fermez le fichier.
13. Ouvrez le fichier AjaxNumberOfOrderPendingApprovals.jsp pour l'éditer.
14. Localisez les lignes suivantes :
```
<%@ include file="/Widgets_801/Common/EnvironmentSetup.jspf" %>
<%@ include file="/Widgets_801/Common/nocache.jspf" %>
```
  Remplacez-les par :
```
<%@ include file="../Common/EnvironmentSetup.jspf" %>
<%@ include file="../Common/nocache.jspf" %>
```
  Enregistrez et fermez le fichier.
Mettez à jour le widget MyAccountNavigation. Le fichier MyAccountDisplay.jsp l'importe.
1. Développez crs-web > WebContent > MyStoreSAS > UserArea > AccountSection.
  
  Les fichiers sont affichés dans Explorateur d'entreprise :
2. Ouvrez le fichier MyAccountDisplay.jsp.
3. Repérez la ligne suivante :
```
<wcpgl:widgetImport useIBMContextInSeparatedEnv="${isStoreServer}" url="${env_siteWidgetsDir}com.ibm.commerce.store.widgets.MyAccountNavigation/MyAccountNavigation.jsp"/>
```
4. Remplacez la version par défaut de MyAccountNavigation par la copie que vous avez créée. C'est-à-dire, remplacez la ligne précédente par :
```
<c:import url="/Widgets_S0126i/com.ibm.commerce.store.widgets.MyAccountNavigation/MyAccountNavigation.jsp"/>
```
  La balise <wcpgl:widgetImport> est un encapsuleur autour de la balise <c:import>. La balise <wcpgl:widgetImport> est généralement utilisée pour importer des widgets lorsque ses chemins d'accès de fichiers JSP ne sont pas connus, lorsque seul l'identificateur de widget ou l'ID d'emplacement est connu. Lorsque le chemin d'accès de fichier JSP est connu, comme c'est le cas avec MyAccountNavigation, alors <c:import> peut être utilisé.
  
  Pour plus d'informations sur la balise <wcpgl:widgetImport>, voir Balise : widgetImport.
Définissez la clé des propriétés MA_EXT_PROFILE_INFO notée dans les fragments de code précédents dans le fichier propriétés de texte du widget.
1. Développez crs-web > Java Resources > src/main/resources > com.ibm.commerce.stores.widget.properties.
  
  Les fichiers sont affichés dans l'explorateur d'entreprise :
2. Ouvrez le fichier widgettext.properties.
3. Ajoutez la ligne suivante dans le fichier des propriétés :
```
MA_EXT_PROFILE_INFO=Additional Profile Information
```
  Ensuite, enregistrez et fermez le fichier.
  La chaîne Additional Profile Information sera utilisée dans la vitrine comme texte de lien vers votre nouvelle page.
Redémarrez le serveur de test de magasin et démarrez le serveur de test de personnalisation et le conteneur de serveur de test de recherche, si le serveur et le conteneur ne sont pas déjà en cours d'exécution. Pour plus d'informations, voir l'affichage Serveurs :

Résultats

Dans cette leçon, vous avez utilisé HCL Commerce Developer pour mettre à jour le lien et le widget de navigation Mon compte vers la nouvelle page.

Dans la leçon suivante, vous parcourrez votre vitrine personnalisée et veillerez à ce que le lien vers la nouvelle page existe sous Mon compte.