Adding image map support to existing Aurora starter store e-Marketing Spot JSP files

Before you can display marketing content with multiple click actions in an e-Marketing Spot, you must add support for multiple click actions in the e-Marketing Spot JSP file.

Procedure

  1. In your file management program, navigate to the directory that contains the JSP file for your e-Marketing Spot.
    • LinuxAIXWindowsWC_eardir\Stores.war\store_dir\Widgets\ESpot\

      For example, if you want to add support to the content recommendation JSP files, you can locate these files in the following directory: WC_eardirStores.war\store_dir\Widgets\ESpot\ContentRecommendation\

    • HCL Commerce DeveloperWorkspace_dir\Stores\WebContent\store_dir\

      For example, if you want to add support to the content recommendation JSP files, you can locate these files in the following directory: Workspace_dir\Stores\WebContent\store_dir\Widgets\ESpot\ContentRecommendation\

    where store_dir is the directory name for your store.
  2. Locate the data JSP file for the e-Marketing Spot that you want to update to support multiple click actions.
    For example, ContentRecommendation_Data.jsp. Open the file for editing.
  3. Within your file, locate the following line of code:
    <jsp:useBean id="contentFormatMap" class="java.util.HashMap" type="java.util.Map"/>
  4. Add the following code after the code that you located:
    <%-- 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. Locate the following line of code:
    <c:set target="${contentDescriptionMap}" property="${currentRowCount}" value="${attachment.attachmentDescription[descriptionIndex].shortDescription}" />
  6. Add the following code after the line of code that you located:
    <%-- 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. Save and close the file.
  8. Locate the corresponding user interface JSP file for the e-Marketing Spot that you want to update to support multiple click actions.
    For example, ContentRecommendation_UI.jsp. Open the file for editing.
  9. Within your file, locate the following line of code:
    <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. Replace those lines of code with the following code:
    <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. Save and close your file.

Results

You have added support for image maps to your e-Marketing Spot JSP files.