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.

About this task

The procedure for adding image map support to an existing e-Marketing Spot JSP file can differ depending on whether your store is based on the Aurora or the Madions starter store model. If you are adding support for existing AuroraESite starter store e-Marketing Spot JSP files, see tsbaddimagemapsupportmad.html

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.