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

In your file management program, navigate to the directory that contains the JSP file for your e-Marketing Spot.
- WC_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\
- Workspace_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.
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.

Within your file, locate the following line of code:

<jsp:useBean id="contentFormatMap" class="java.util.HashMap" type="java.util.Map"/>

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 --%>

Locate the following line of code:

<c:set target="${contentDescriptionMap}" property="${currentRowCount}" value="${attachment.attachmentDescription[descriptionIndex].shortDescription}" />

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 --%>

Save and close the file.
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.

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>

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 --%>

Save and close your file.

Results

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