Définition des ressources de vitrine pour les modèles d'agencement Commerce Composer

Vous devez définir les ressources de vitrine d'un modèle d'agencement avant que votre modèle personnalisé puisse être utilisé sur la vitrine. Les composants de vitrine du modèle définissent le conteneur du widget et les emplacements configurables dans le conteneur. Les composants de la vitrine se composent de la définition du conteneur de modèles, du placement des emplacements de modèle et du fichier d'installation de l'environnement.

Pour plus d'informations sur la création d'un modèle d'agencement global, voir Création de modèles d'agencement Commerce Composer.

Procédure

Créez les ressources de vitrine de votre modèle d'agencement personnalisé.

Dans la vue Explorateur d'entreprise de HCL Commerce Developer, créez un répertoire pour qu'il contienne les ressources de code pour vos modèles d'agencement personnalisés.
1. Accédez au répertoire WCDE_installdir\workspace\crs-web\WebContent\Aurora.
2. Si le répertoire n'existe pas dans le répertoire Aurora, créez le Container-vendor directory. Where vendor is the name of your company.
  Par exemple, le nom de votre répertoire peut être Container-MyCompany
Créez le fichier JSP de conteneur pour votre modèle d'agencement personnalisé. Le fichier JSP du conteneur définit le modèle, qui est un widget vide divisé en emplacements configurables. La définition de conteneur est similaire à la définition d'un widget, hormis le fait qu'aucune fonctionnalité et aucun contenu n'est défini pour une utilisation sur la vitrine. Le conteneur identifie les emplacements configurables où un widget peut être ajouté et marque ces emplacements avec la balise wcpgl:widgetImport. Chaque emplacement est défini par un ID d'emplacement interne, qui doit être unique dans le conteneur. Le fichier JSP de conteneur identifie également le fichier d'installation de l'environnement.
1. Accédez au répertoire WCDE_installdir\workspace\crs-web\WebContent\Aurora\Container.
2. Copiez le fichier StaticContentPageDisplayContainer.jsp. Ce fichier est le fichier JSP de conteneur pour le modèle d'agencement Page, un emplacement qui est fourni par défaut avec HCL Commerce.
3. Accédez à votre WCDE_installdir\workspace\crs-web\WebContent\Aurora\Container-vendor directory and add the copied JSP file into this directory.
4. Renommez le fichier JSP et ouvrez-le en édition.
  Par exemple, vous pouvez renommer le fichier MyCustomLayoutTemplate.jsp.
  Par défaut, le contenu du fichier JSP de conteneur ressemble au code suivant.
```
1<%@include file="../Common/EnvironmentSetup.jspf" %>
<%@taglib uri="http://commerce.ibm.com/pagelayout" prefix="wcpgl"%>
2<div class="rowContainer" id="container_${pageDesign.layoutID}">
  3<div class="row">
    4<div class="col12" data-slot-id="1"><wcpgl:widgetImport slotId="1"/></div>
	  </div>
</div>
```
  Où
  - 1 Fichier de configuration de l'environnement. Ce fichier de configuration est utilisé au moment de l'exécution. Ce fichier récupère et prépare le chemin d'accès du fichier JSP et le groupement de ressources pour le conteneur. Le fichier de configuration est utilisé pour identifier les valeurs des configurations d'environnement pour la structure Commerce Composer. Le fichier identifie les valeurs de toutes les variables de préfixe, les chemins de fichiers contextuels courants, le paramètre de codage de page et la page à afficher comme page d'erreur. Ce fichier est appelé par de nombreux fichiers JSP dans un magasin et est partagé par plusieurs conteneurs. Par défaut, le fichier WCDE_installdir\workspace\crs-web\WebContent/Aurora/Common/EnvironmentSetup.jspf est spécifié.
  - 2 Elément de division de conteneur. Cet élément est le début du code qui définit le conteneur de modèle d'agencement global. Inclure les définitions de toutes les lignes et tous les emplacements dans cet élément rowContainer. Pour l'attribut id, la valeur de tous les modèles d'agencement est "container_${pageDesign.layoutID}". La valeur de l'ID est générée lorsque le modèle d'agencement est utilisé pour créer un agencement. La valeur du nouvel ID d'agencement est récupérée en tant que partie ${pageDesign.layoutID} de la valeur de cet attribut id. Pour l'attribut class, incluez "rowContainer" dans la valeur d'attribut pour vous aider à identifier la division dans le fichier CSS correspondant. Par exemple, vous pouvez renommer la valeur de la classe par "MyCustomTemplate_tab_content rowContainer". La valeur de cet attribut doit être mappée à une entrée dans un fichier CSS correspondant pour définir la génération du modèle sur la vitrine.
  - 3 Elément de division de ligne. Incluez plus d'éléments <div class="row"> pour concevoir votre modèle d'agencement pour qu'il inclue plusieurs lignes d'emplacements. La valeur de l'attribut class doit correspondre à une entrée d'un fichier CSS correspondant.
  - 4 Elément de division de colonne. Cet élément est utilisé pour définir un emplacement dans une ligne. Par défaut, le modèle d'agencement Page, un emplacement inclut un seul emplacement dans une ligne. Pour définir l'emplacement, vous devez définir les attributs class et data-slot-id.
    L'attribut class identifie l'entrée CSS qui définit les informations d'affichage pour l'emplacement de modèle. Les valeurs de l'attribut class dans les étapes suivantes spécifient les entrées CSS qui sont définies par défaut pour les colonnes de modèle. Le fichier CSS qui inclut les définitions CSS pour les modèles d'agencement est défini dans le fichier WCDE_installdir\workspace\crs-web\WebContent\Aurora\css\base.css. Par défaut, le CSS d'un modèle d'agencement utilise un système de grille à 12 colonnes qui divise une page en lignes et en colonnes. L'entrée de valeur de classe "col12" définit un emplacement d'une largeur qui équivaut à 100 % de la largeur de la page, ou aussi large que les 12 colonnes.
    L'attribut data-slot-id définit slotId pour l'emplacement dans votre modèle d'agencement. Cet ID s'affiche dans Management Center pour que la maquette fonctionnelle d'emplacement de modèle aide les utilisateurs à identifier et à sélectionner les emplacements dans un modèle pour inclure des widgets dans un agencement. La valeur de data-slot-id doit respecter le format suivant
    data-slot-id="1"><wcpgl:widgetImport slotId="1"/>
    Où la valeur numérique spécifiée est l'ID de l'emplacement que l'élément de division de colonne définit. Pour chaque emplacement supplémentaire que vous incluez dans un modèle, il est recommandé d'incrémenter la valeur d'ID d'emplacement dans l'ordre séquentiel.
    Par exemple, le fragment de code suivant définit les trois premiers emplacements d'un modèle. Tous les emplacements sont inclus sur une seule ligne.
    <div class="row"> <div class="col4 acol12" data-slot-id="1"><wcpgl:widgetImport slotId="1"/></div> <div class="col4 acol12" data-slot-id="2"><wcpgl:widgetImport slotId="2"/></div> <div class="col4 acol12" data-slot-id="3"><wcpgl:widgetImport slotId="3"/></div> </div>
    L'entrée de valeur de classe "col4 acol12" est mappée aux entrées col4 et acol12 du fichier base.css. L'entrée col4 définit une largeur d'emplacement égale au tiers de la largeur totale de la page lorsque celle-ci est affichée dans un navigateur dont la plage de page est supérieure à 600 pixels. L'entrée acol12 définit la largeur de l'emplacement pour qu'elle soit égale à 100 % de la largeur de la page lorsque celle-ce est affichée à une plage de page inférieure à 600 pixels. Lorsque ce point d'arrêt de moins de 600 pixels est atteint, les emplacements du modèle d'agencement s'adaptent sur la vitrine pour s'empiler verticalement afin que les emplacements puissent s'afficher à la largeur définie. Ce comportement garantit la réactivité du modèle d'agencement. Pour plus d'informations sur le cadre CSS du système de grille qui constitue un modèle d'agencement, voir Infrastructure de conception de sites Web adaptatifs.

Mettez à jour le fichier JSP de conteneur pour que votre agencement se divise en davantage de lignes et de colonnes.

Pour diviser votre modèle avec un plus grand nombre de lignes, incluez plus d'éléments de division de ligne. Le fragment de code suivant divise le JSP de conteneur MyCustomLayoutTemplate.jsp en trois lignes. La première ligne est divisée en deux colonnes et la deuxième ligne en quatre colonnes. La troisième ligne comprend une seule colonne.

<%@include file="../Common/EnvironmentSetup.jspf" %>
<%@taglib uri="http://commerce.ibm.com/pagelayout" prefix="wcpgl"%>
<div class="rowContainer" id="container_${pageDesign.layoutID}">
  <div class="row">
    <div class="col6 acol12" data-slot-id="1"><wcpgl:widgetImport slotId="1"/></div>
    <div class="col6 acol12" data-slot-id="2"><wcpgl:widgetImport slotId="2"/></div>
  </div>
  <div class="row">
    <div class="col3 acol12" data-slot-id="3"><wcpgl:widgetImport slotId="3"/></div>
    <div class="col3 acol12" data-slot-id="4"><wcpgl:widgetImport slotId="4"/></div>
    <div class="col3 acol12" data-slot-id="5"><wcpgl:widgetImport slotId="5"/></div>
    <div class="col3 acol12" data-slot-id="6"><wcpgl:widgetImport slotId="6"/></div>
  </div>
  <div class="row">
    <div class="col12" data-slot-id="7"><wcpgl:widgetImport slotId="7"/></div>
  </div>
</div>

Mettez à jour le JSP de conteneur pour qu'il inclue les emplacements à onglets souhaités dans votre modèle d'agencement.

Pour inclure les emplacements à onglets dans votre modèle, vous devez inclure le fichier JavaScript ProductTab.js dans votre fichier JSP de conteneur.
Ce fichier définit les interactions qu'un client peut effectuer pour basculer entre les onglets et définit la façon dont les emplacements à onglets répondent. Pour inclure ce fichier, ajoutez le code suivant après les instructions d'inclusion pour le fichier de configuration de l'environnement et la bibliothèque de balises
```
<script type="text/javascript" src="${jsAssetsDir}javascript/Widgets/ProductTab/ProductTab.js"></script>
```

Mettez à jour la définition de la ligne dans laquelle vous souhaitez inclure des emplacements à onglets pour qu'elle inclue la logique afin d'identifier le nombre d'emplacements à onglets et de récupérer les valeurs d'ID d'emplacement pour les emplacements.

Dans la définition de ligne, remplacez les éléments de division pour toutes les colonnes que vous souhaitez transformer en emplacements à onglet par le code suivant. Le code suivant définit le nombre d'emplacements à onglets et la logique utilisée pour récupérer les valeurs d'ID des emplacements à onglet.

<wcf:useBean var="tabSlotIds" classname="java.util.ArrayList"/>
<%-- Double loop to get the slots into the array list in proper order. The service does not return the child widgets in any predictable order. --%>
<c:set var="tabSlotCount" value="0"/>
1 <c:forEach var="slotNumber" begin="3" end="6">
  <c:set var="foundCurrentSlot" value="false"/>
  <c:forEach var="childWidget" items="${pageDesign.widget.childWidget}">
    <c:if test="${childWidget.slot.internalSlotId == slotNumber && !foundCurrentSlot}">
      <wcf:set target="${tabSlotIds}" value="${slotNumber}" />
      <c:set var="foundCurrentSlot" value="true"/>
      <c:set var="tabSlotCount" value="${tabSlotCount+1}"/>
    </c:if>
  </c:forEach>
</c:forEach>

Où

1 Définit le début et la fin des emplacements à onglets pour définir le nombre d'emplacements à onglets. Le fragment de code précédent définit la ligne des emplacements à onglets pour inclure les emplacements avec les valeurs d'ID d'emplacement 3, 4, 5 et 6.

Ajoutez le code pour définir les titres des emplacements à onglets. Ajoutez le code suivant après le code pour définir le nombre d'emplacements à onglets.

<div class="tabButtonContainer" role="tablist">
  <div class="tab_header tab_header_double">
    <c:forEach var="tabSlotId" items="${tabSlotIds}" varStatus="status">
      1<c:set var="tabSlotName" value="Title${tabSlotId}"/>
      2<c:forEach var="childWidget" items="${pageDesign.widget.childWidget}">
        <c:if test="${childWidget.slot.internalSlotId == tabSlotName}">
          <c:set var="tabWidgetDefIdentifier" value="${childWidget.widgetDefinitionIdentifier.uniqueID}"/>
          <c:set var="tabWidgetIdentifier" value="${childWidget.widgetIdentifier.uniqueID}"/>
        </c:if>
      </c:forEach>
      3<c:choose>
        <c:when test="${status.first}">
          <c:set var="tabClass" value="tab_container active_tab" />
          <c:set var="tabIndex" value="0" />
        </c:when>
        <c:otherwise>
          <c:set var="tabClass" value="tab_container inactive_tab" />
          <c:set var="tabIndex" value="-1" />
        </c:otherwise>
      </c:choose>
      <c:set var="tabNumber" value="${status.index+1}" scope="request"/>
      4<div id="tab${status.count}" tabindex="${tabIndex}" class="tab_container ${tabClass}" 
        aria-labelledby="contentRecommendationWidget_${tabSlotName}_${tabWidgetDefIdentifier}_${tabWidgetIdentifier}" aria-controls="tab${status.count}Widget"
        onfocus="ProductTabJS.focusTab('tab${status.count}');" onblur="ProductTabJS.blurTab('tab${status.count}');" 
        role="tab" aria-setsize="${tabSlotCount}" aria-posinset="${status.count}" aria-selected="${status.first == true ? 'true' : 'false'}" 
        onclick="ProductTabJS.selectTab('tab${status.count}');" 
        onkeydown="ProductTabJS.selectTabWithKeyboard('${status.count}','${tabSlotCount}', event);">
        5<wcpgl:widgetImport slotId="${tabSlotName}"/>
      </div>
      <c:remove var="tabNumber"/>
    </c:forEach>
  </div>
</div>

Où

1 Définit le titre de l'emplacement à onglet en tant que tabSlotName
2 Le code définit également la logique de renvoi des widgets dans un emplacement à onglet dans l'ordre correct.
3 Définit l'onglet à afficher lorsqu'un client affiche initialement une page qui utilise ce modèle d'agencement
4 Appelle les fonctions JavaScript définies dans le fichier ProductTab.js. Ces fonctions définissent la façon dont l'agencement de page change entre les onglets.
5 Code permettant d'importer le widget Editeur de texte à utiliser comme valeur pour le tabSlotName qui s'affiche dans la vitrine comme titre de l'emplacement à onglet.

Ajoutez le code pour définir la récupération du contenu pour l'affichage dans les emplacements à onglets. Ajoutez le code suivant après le code pour définir les titres de fente à onglets.

<c:forEach var="tabSlotId" items="${tabSlotIds}" varStatus="status">
  <c:set var="tabStyle" value=""/>
  <c:if test="${!status.first}">
    <c:set var="tabStyle" value="style='display:none'" />
  </c:if>
  <div role="tabpanel" class="tab left" data-slot-id="${tabSlotId}" id="tab${status.count}Widget" aria-labelledby="tab${status.count}" ${tabStyle}>
    <div class="content">
      <wcpgl:widgetImport slotId="${tabSlotId}"/>
    </div>
  </div>
  <c:remove var="tabStyle"/>
</c:forEach>

Enregistrez votre fichier JSP conteneur.

Votre fichier JSP mis à jour peut ressembler au code suivant, qui définit le modèle de présentation N'importe quelle page, sept emplacements, onglets.

<%@include file="../Common/EnvironmentSetup.jspf" %>
<%@taglib uri="http://commerce.ibm.com/pagelayout" prefix="wcpgl"%>
<script type="text/javascript" src="${jsAssetsDir}javascript/Widgets/ProductTab/ProductTab.js"></script>
<div class="rowContainer" id="container_${pageDesign.layoutID}">
  <div class="row">
    <div class="col6 acol12" data-slot-id="1"><wcpgl:widgetImport slotId="1"/></div>
    <div class="col6 acol12" data-slot-id="2"><wcpgl:widgetImport slotId="2"/></div>
  </div>

  <div class="row margin-true">
	<div class="col12 acol12 ccol12 right">
    <wcf:useBean var="tabSlotIds" classname="java.util.ArrayList"/>
    <%-- Double loop to get the slots into the array list in proper order. The service does not return the child widgets in any predictable order. --%>
    <c:set var="tabSlotCount" value="0"/>
    <c:forEach var="slotNumber" begin="3" end="6">
      <c:set var="foundCurrentSlot" value="false"/>
      <c:forEach var="childWidget" items="${pageDesign.widget.childWidget}">
        <c:if test="${childWidget.slot.internalSlotId == slotNumber && !foundCurrentSlot}">
          <wcf:set target="${tabSlotIds}" value="${slotNumber}" />
          <c:set var="foundCurrentSlot" value="true"/>
          <c:set var="tabSlotCount" value="${tabSlotCount+1}"/>
        </c:if>
      </c:forEach>
    </c:forEach>  
    
    <div class="tabButtonContainer" role="tablist">
      <div class="tab_header tab_header_double">
        <c:forEach var="tabSlotId" items="${tabSlotIds}" varStatus="status">
          <c:set var="tabSlotName" value="Title${tabSlotId}"/>
          <c:forEach var="childWidget" items="${pageDesign.widget.childWidget}">
            <c:if test="${childWidget.slot.internalSlotId == tabSlotName}">
              <c:set var="tabWidgetDefIdentifier" value="${childWidget.widgetDefinitionIdentifier.uniqueID}"/>
              <c:set var="tabWidgetIdentifier" value="${childWidget.widgetIdentifier.uniqueID}"/>
            </c:if>
          </c:forEach>
          <c:choose>
            <c:when test="${status.first}">
              <c:set var="tabClass" value="tab_container active_tab" />
              <c:set var="tabIndex" value="0" />
            </c:when>
            <c:otherwise>
              <c:set var="tabClass" value="tab_container inactive_tab" />
              <c:set var="tabIndex" value="-1" />
            </c:otherwise>
          </c:choose>
          <c:set var="tabNumber" value="${status.index+1}" scope="request"/>
          <div id="tab${status.count}" tabindex="${tabIndex}" class="tab_container ${tabClass}" 
            aria-labelledby="contentRecommendationWidget_${tabSlotName}_${tabWidgetDefIdentifier}_${tabWidgetIdentifier}" aria-controls="tab${status.count}Widget"
            onfocus="ProductTabJS.focusTab('tab${status.count}');" onblur="ProductTabJS.blurTab('tab${status.count}');" 
            role="tab" aria-setsize="${tabSlotCount}" aria-posinset="${status.count}" aria-selected="${status.first == true ? 'true' : 'false'}" 
            onclick="ProductTabJS.selectTab('tab${status.count}');" 
            onkeydown="ProductTabJS.selectTabWithKeyboard('${status.count}','${tabSlotCount}', event);">
            <wcpgl:widgetImport slotId="${tabSlotName}"/>
          </div>
          <c:remove var="tabNumber"/>
        </c:forEach>
      </div>
    </div>	
    
    <c:forEach var="tabSlotId" items="${tabSlotIds}" varStatus="status">
      <c:set var="tabStyle" value=""/>
      <c:if test="${!status.first}">
        <c:set var="tabStyle" value="style='display:none'" />
      </c:if>
      <div role="tabpanel" class="tab left" data-slot-id="${tabSlotId}" id="tab${status.count}Widget" aria-labelledby="tab${status.count}" ${tabStyle}>
        <div class="content">
          <wcpgl:widgetImport slotId="${tabSlotId}"/>
        </div>
      </div>
      <c:remove var="tabStyle"/>
    </c:forEach>
	</div>
  </div>
  
  <div class="row">
    <div class="col12" data-slot-id="7"><wcpgl:widgetImport slotId="7"/></div>
  </div>
</div>

Facultatif : Définissez la feuille de style en cascade (CSS) pour afficher votre modèle de présentation personnalisé dans la vitrine.
1. Accédez au répertoire WCDE_installdir\workspace\crs-web\WebContent\Aurora\css.
2. Ouvrez le fichier base.css pour examen. Ce fichier définit la CSS pour tous les modèles de présentation fournis par HCL Commerce.
3. Recherchez le commentaire /*** Grid system ***/ dans le fichier. La CSS de la section définit l'affichage du système de grille fluide du modèle de présentation. Par défaut, ce fichier CSS définit différentes options d'affichage. Si base.css n'inclut pas la définition dont vous avez besoin, créez un fichier base-vendor.css pour inclure votre définition CSS personnalisée. Créez ce fichier dans le répertoire css existant. Assurez-vous que les valeurs des attributs sont class uniques et qu'elles correspondent à votre nouveau fichier CSS.
Pour plus d'informations sur la définition de la CSS d'un modèle de présentation réactif, voir Création de modèles de présentation adaptatifs.

Que faire ensuite

Avec la définition des ressources de vitrine pour votre modèle de présentation personnalisé terminée, vous devez enregistrer votre modèle de présentation à l'aide de l'utilitaire Chargement des données.