Ajout d'une prise en charge des images cliquables à des fichiers JSP d'emplacement e-Marketing existants (magasin type Aurora)

Pour afficher du contenu marketing avec plusieurs actions de clic dans un emplacement e-Marketing, vous devez ajouter la prise en charge correspondante dans le fichier JSP d'emplacement e-Marketing.

Procédure

  1. Dans le programme de gestion de fichiers, accédez au répertoire qui contient le fichier JSP de l'emplacement e-Marketing :
    • LinuxAIXWindowsWC_eardir\Stores.war\store_dir\Widgets\ESpot\

      Par exemple, si vous souhaitez ajouter une prise en charge à des fichiers JSP de recommandation de contenu, vous pouvez localiser ces fichiers dans le répertoire suivant : WC_eardirStores.war\store_dir\Widgets\ESpot\ContentRecommendation\

    • HCL Commerce DeveloperWorkspace_dir\Stores\WebContent\store_dir\

      Par exemple, si vous souhaitez ajouter une prise en charge à des fichiers JSP de recommandation de contenu, vous pouvez localiser ces fichiers dans le répertoire suivant : Workspace_dir\Stores\WebContent\store_dir\Widgets\ESpot\ContentRecommendation\

    où store_dir est le nom de répertoire du magasin.
  2. Localisez le fichier JSP de données correspondant à l'emplacement e-Marketing à mettre à jour pour la prise en charge de plusieurs actions de clic.
    Par exemple, ContentRecommendation_Data.jsp. Ouvrez le fichier pour l'éditer.
  3. Dans ce fichier, localisez la ligne de code suivante : 
    <jsp:useBean id="contentFormatMap" class="java.util.HashMap" type="java.util.Map"/>
  4. Ajoutez le code suivant après le code que vous avez localisé : 
    <%-- BEGIN Marketing Content Image Map --%>
<jsp:useBean id="contentImageAreaInputMap" class="java.util.HashMap" type="java.util.Map"/>
<jsp:useBean id="contentImageAreaNameMap" class="java.util.HashMap" type="java.util.Map"/>
<jsp:useBean id="contentImageAreaMap" class="java.util.HashMap" type="java.util.Map"/>
<jsp:useBean id="contentImageAreaSourceMap" class="java.util.HashMap" type="java.util.Map"/>
<%-- END   Marketing Content Image Map --%>
  5. Localisez la ligne de code suivante :
    <c:set target="${contentDescriptionMap}" property="${currentRowCount}" value="${attachment.attachmentDescription[descriptionIndex].shortDescription}" />
  6. Ajoutez le code suivant après la ligne de code que vous avez localisée :
    <%-- BEGIN Marketing Content Image Map --%>
<c:if test="${!empty marketingSpotData.marketingContent.marketingContentImageMap}">
  <c:set target="${contentImageAreaInputMap}" property="${currentRowCount}" value="${marketingSpotData.marketingContent.inputOption.name}" />
  <c:set target="${contentImageAreaNameMap}" property="${currentRowCount}" value="${marketingSpotData.marketingContent.marketingContentImageMap[0].name}" />
  <c:choose>
    <c:when test="${!empty marketingSpotData.marketingContent.marketingContentImageMap[0].area}">
      <jsp:useBean id="contentImageAreaPerEspotMap" class="java.util.HashMap" type="java.util.Map"/>
      
      <c:forEach var="imageArea" items="${marketingSpotData.marketingContent.marketingContentImageMap[0].area}" varStatus="aStatus">
        <jsp:useBean id="contentImageAreaMap_current" class="java.util.HashMap" type="java.util.Map"/>
        <c:set target="${contentImageAreaMap_current}" property="shape" value="${imageArea.shape}" />
        <c:set target="${contentImageAreaMap_current}" property="coordinates" value="${imageArea.coordinates}" />
        <c:set target="${contentImageAreaMap_current}" property="url" value="${imageArea.url}" />
        <c:set target="${contentImageAreaMap_current}" property="title" value="${imageArea.title}" />
        <c:set target="${contentImageAreaMap_current}" property="target" value="${imageArea.target}" />
        <c:set target="${contentImageAreaMap_current}" property="altText" value="${imageArea.alternateText}" />
        <c:set target="${contentImageAreaPerEspotMap}" property="${aStatus.count}" value="${contentImageAreaMap_current}" />
        <c:remove var="contentImageAreaMap_current"/>
      </c:forEach>
      <c:set target="${contentImageAreaMap}" property="${currentRowCount}" value="${contentImageAreaPerEspotMap}" />
    </c:when>
    <c:when test="${!empty marketingSpotData.marketingContent.marketingContentImageMap[0].source}">
      <c:set target="${contentImageAreaSourceMap}" property="${currentRowCount}" value="${marketingSpotData.marketingContent.marketingContentImageMap[0].source}" />
    </c:when>
  </c:choose>
</c:if>
<%-- END   Marketing Content Image Map --%>
  7. Enregistrez et fermez le fichier.
  8. Localisez le fichier JSP d'interface utilisateur correspondant à l'emplacement e-Marketing à mettre à jour pour la prise en charge de plusieurs actions de clic.
    Par exemple, ContentRecommendation_UI.jsp. Ouvrez le fichier pour l'éditer.
  9. Dans ce fichier, localisez la ligne de code suivante : 
    <img id="ContentAreaESpotImg_${espotName}_${aStatus.count}" src="${contentImageMap[aStatus.current.key]}" alt="${contentDescriptionMap[aStatus.current.key]}"/>
<c:if test="${!empty contentUrlMap[aStatus.current.key]}">
  </a>
</c:if>
  10. Remplacez ces lignes de code par le code suivant : 
    <img id="ContentAreaESpotImg_${espotName}_${aStatus.count}" src="${contentImageMap[aStatus.current.key]}" alt="${contentDescriptionMap[aStatus.current.key]}"
  <%-- BEGIN Marketing Content Image Map --%>
  <c:if test="${contentImageAreaInputMap[aStatus.current.key] eq 'Area' || contentImageAreaInputMap[aStatus.current.key] eq 'Source'}">
  usemap="#<c:out value="${contentImageAreaNameMap[aStatus.current.key]}"/>"
  </c:if>
  <%-- END   Marketing Content Image Map --%>
/>
<c:if test="${!empty contentUrlMap[aStatus.current.key]}">
  </a>
</c:if>
<%-- BEGIN Marketing Content Image Map --%>
<c:choose>
  <c:when test="${contentImageAreaInputMap[aStatus.current.key] eq 'Area'}">
    <c:if test="${!empty contentImageAreaMap[aStatus.current.key]}">
      <map name="<c:out value="${contentImageAreaNameMap[aStatus.current.key]}"/>">
      
      <c:forEach items="${contentImageAreaMap[aStatus.current.key]}" varStatus="bStatus">
        <area shape="<c:out value="${contentImageAreaMap[aStatus.current.key][bStatus.current.key]['shape']}"/>" 
          coords="<c:out value="${contentImageAreaMap[aStatus.current.key][bStatus.current.key]['coordinates']}"/>" 
          href="<c:out value="${contentImageAreaMap[aStatus.current.key][bStatus.current.key]['url']}"/>" 
          title="<c:out value="${contentImageAreaMap[aStatus.current.key][bStatus.current.key]['title']}"/>"
          target="<c:out value="${contentImageAreaMap[aStatus.current.key][bStatus.current.key]['target']}"/>" 
          <c:choose>
            <c:when test="${!empty contentImageAreaMap[aStatus.current.key][bStatus.current.key]['altText']}">
              alt="<c:out value="${contentImageAreaMap[aStatus.current.key][bStatus.current.key]['altText']}"/>" 
            </c:when>
            <c:otherwise>
              alt="<c:out value="${contentImageAreaMap[aStatus.current.key][bStatus.current.key]['title']}"/>" 
            </c:otherwise>
          </c:choose>
        />
      </c:forEach>
      
      </map>
    </c:if>
  </c:when>
  <c:when test="${contentImageAreaInputMap[aStatus.current.key] eq 'Source'}">
    <c:out value="${contentImageAreaSourceMap[aStatus.current.key]}" escapeXml="false"/>
  </c:when>
</c:choose>
<%-- END   Marketing Content Image Map --%>
  11. Sauvegardez et fermez votre fichier.

Résultats

Vous avez ajouté une prise en charge des images cliquables aux fichiers JSP d'emplacement e-Marketing.