Adding the contact tooltip store feature to the Madisons starter store.

In this lesson, the contact tooltip is added to the storefront by editing the store JSP code. The tooltip feature code is wrapped in tags to indicate that the code is enabled only if the contact tooltip feature is enabled.

Procedure

  1. Create a JSP file to contain the new feature JSP code:
    1. In the Enterprise Explorer view, navigate to Stores > WebContent > Madisons > Snippets.
    2. Right click the Snippets directory; create a folder called ContactTooltip.
    3. Right click the ContactTooltip folder and create a ContactTooltip.jsp file.
    4. Open ContactTooltip.jsp for editing.
    5. Add the following lines of code to the file:
      <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
      <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
      <%@ taglib uri="http://commerce.ibm.com/base" prefix="wcbase" %>
      <%@ taglib uri="http://commerce.ibm.com/foundation" prefix="wcf" %>
      <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
      <%@ taglib uri="flow.tld" prefix="flow" %>
      
      <div id="contactTooltipContainer" style="display:none">
       <div id="contactTooltip" dojoType="wc.widget.Tooltip" connectId="ContactTooltipURL" style="display: none;">
        <div id="tooltip_popup">
         <div class="header" id="WC_contactTooltip_div_1">
          <div class="close" id="WC_contactTooltip_div_2">
           <fmt:message key="CONTACT_TITLE" bundle="${storeText}"/>
          </div>
         </div>
         <div class="bodyarea" id="WC_contactTooltipy_div_3">
          <div class="bodycontent" id="WC_contactTooltip_div_4">
           <div class="address" id="WC_contactTooltip_div_5">
            <wcf:getData type="com.ibm.commerce.infrastructure.facade.datatypes.OnlineStoreType" var="onlineStore" expressionBuilder="findByUniqueID">
            <wcf:param name="storeId" value="${param.storeId}" />
            </wcf:getData>
            <c:set var="contact" value="${onlineStore.onlineStoreContactInfo[0]}" />
            <%@ include file="../../Snippets/ReusableObjects/AddressDisplay.jspf"%>
           </div>
          </div>
         </div>
         <div class="footer" id="WC_contactTooltip_div_6"> </div>
        </div>
       </div>
      
       <script type="text/javascript">
        dojo.addOnLoad(function() { 
        parseWidget("contactTooltip");
        });
       </script>
      </div>		
    6. Save your changes and close the file.
  2. Edit the CachedHeaderDisplay.jsp file to include the ContactTooltip.jsp file.
    1. In the Enterprise Explorer view, navigate to Stores > WebContent > Madisons > include > styles > style1.
    2. Open CachedHeaderDisplay.jsp for editing.
      Note: If your store is configured to support multiple styles, use the CachedHeaderDisplay.jsp file in the style directory you are associating with the new feature. The style directory should be in the Stores\WebContent\Madisons\include\styles\ directory.
    3. Find the following line of code:
      	<%@ include file="CachedHeaderDisplayExt.jspf"%>
    4. Append the following code snippet:
      <%-- Contact Tooltip --%>
       <flow:ifEnabled feature="ContactDisplayToolTip">
       <%@ include file="../../../Snippets/ContactTooltip/ContactTooltip.jsp" %>
      </flow:ifEnabled>
    5. Find the following code snippet:
      <c:choose>
       <c:when test="${userType != 'G'}">
        <a href="<c:out value="${LogoffURL}"/>" class="h_tnav_but" id="headerLogout">fmt:message key="HEADER_LOGOUT" bundle="${storeText}" /></a>
       </c:when>
      	 <c:otherwise>
        <a href="<c:out value="${LogonFormURL}"/>" class="h_tnav_but" id="headerLogin">fmt:message key="HEADER_LOGIN" bundle="${storeText}" /	></a>
       </c:otherwise>
      </c:choose>
    6. Append the following code to add a link to Madisons storefront header:
      <%-- Contact Tool tip --%>
       <flow:ifEnabled feature="ContactDisplayToolTip">
        <fmt:message key="DIVIDING_BAR" bundle="${storeText}" />
        <a href="" class="h_tnav_but" id="ContactTooltipURL"><fmt:message key="CONTACT_LINK" bundle="${storeText}"/></a>
       </flow:ifEnabled>
    7. Save your changes and close the file.

Results