Updating store JSP files to add Facebook buttons
In this lesson, the JSTLEnvironmentSetupExtForFacebook.jspf is
created to add the Connect to Facebook link
on product pages of the tablet store.
Procedure
- Open WebSphere Commerce Developer. In the Enterprise Explorer view, navigate to Stores/WebContent/storedir/tablet/include
- Prepare the environment so that the Facebook ID is accessible
from any product page.
- Right-click include. Select New > File. name the file JSTLEnvironmentSetupExtForFacebook.jspf. This JSPF file will be included on every page in your store front, so that the Facebook application ID is accessible on all product pages.
- Open the created file for editing. Add the following
code to the file.
The above code first tests if the<%@ taglib uri="flow.tld" prefix="flow" %> <%@ taglib uri="http://commerce.ibm.com/foundation" prefix="wcf" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ page import="com.ibm.commerce.context.preview.PreviewContext" %> <%@ page import="com.ibm.commerce.foundation.server.services.businesscontext.ContextService" %> <%@ page import="com.ibm.commerce.foundation.server.services.businesscontext.ContextServiceFactory" %> <flow:ifEnabled feature="FacebookIntegration"> <c:if test = "${empty facebookAppId}"> <wcf:getData type="com.ibm.commerce.infrastructure.facade.datatypes.OnlineStoreType" var="onlineStore" expressionBuilder="findByUniqueID"> <wcf:param name="storeId" value="${storeId}" /> <wcf:param name="accessProfile" value="IBM_Details" /> </wcf:getData> <% // Determine if we are in preview mode ContextService cs = ContextServiceFactory.getContextService(); PreviewContext previewCtx = (PreviewContext) cs.findContext(PreviewContext.CONTEXT_NAME); if (previewCtx!= null) { request.setAttribute("inPreview", "true"); } %> <c:choose> <c:when test="${inPreview == 'true'}"> <c:set var="facebookAppId" value="${onlineStore.userData.userDataField['wc.facebook.preview_application_id']}" scope="request"/> </c:when> <c:otherwise> <c:set var="facebookAppId" value="${onlineStore.userData.userDataField['wc.facebook.application_id']}" scope="request"/> </c:otherwise> </c:choose> </c:if> </flow:ifEnabled>
facebookAppId
is already defined. If not, it will query thefacebook_application_id
orpreview_application_id
which were configured in the prerequisites for this tutorial, from the database.The code includes the flex flow control tag for
FacebookIntegration
which applies only to Madisons based stores. If you do not have or want the Facebook integration store function option in Management Center, it is not necessary to add the<flow:ifEnabled feature="FacebookIntegration">
tag in your customized JSPs.
- Add the following line at the bottom of JSTLEnvironmentSetup.jspf to
include JSTLEnvironmentSetupExtForFacebook.jspf:
This makes the Facebook application ID accessible from any product page.<%@ include file="JSTLEnvironmentSetupExtForFacebook.jspf" %>
- Add the Connect to Facebook button
to the footer of your store. This allows shoppers to login to Facebook
as well as authorize the Facebook application for your store, enabling
the marketing engine to track 'Like' events on the tablet
store. For the tablet store, modify tablet/include/styles/style1/CachedHeaderDisplay.jsp and tablet/include/styles/style1/CachedFooterDisplay.jsp.
Once the Shopper logs in and authorizes the Facebook application,
the shopper will stay logged in until Disconnect from Facebook is
clicked.
- Navigate to Stores/WebContent/Madisons storeName/tablet/include/styles/style1. Open CachedHeaderDisplay.jsp for editing
- Add the following code to the end of CachedHeaderDisplay.jsp:
<flow:ifEnabled feature="FacebookIntegration"> <script type="text/javascript" src="<c:out value="${jsAssetsDir}tablet/javascript/FBintegration.js"/>?locale=<c:out value="${locale}"/>&appId=<c:out value="${facebookAppId}"/>"></script> </flow:ifEnabled>
- In the style1 folder, open CachedFooterDisplay.jsp for editing.
- Add the following code to the end of CachedFooterDisplay.jsp:
<flow:ifEnabled feature="FacebookIntegration"> <a href="javascript:void(0);" onclick="javascript:fbIntegrationJS.onClickFacebookLogin();return false;" id="FooterFBlogin" ><fmt:message key="HEADER_CONNECT_TO_FACEBOOK" bundle="${storeText}" /></a> <a href="javascript:void(0);" onclick="javascript:fbIntegrationJS.onClickFacebookLogout();return false;" id="FooterFBlogoff" style="display:none"><fmt:message key="HEADER_DISCONNECT_FROM_FACEBOOK" bundle="${storeText}" /></a> </flow:ifEnabled>
- Add message entries for Connect to Facebook and Disconnect
from Facebook to the message resource bundle. If needed,
these message entries could be translated to other languages:
- For the tablet store, navigate to Stores.war\WEB-INF\classes\storedir\tablet\storetext.properties
- Open storetext.properties for editing
- Add the following lines to define the messages created
in the previous step:
HEADER_CONNECT_TO_FACEBOOK = Connect to Facebook HEADER_DISCONNECT_FROM_FACEBOOK = Disconnect from Facebook
- Rebuild the Stores project in order to allow the test server to pick up the message bundle changes. If deployed on your WebSphere Commerce server, the server will need to be restarted to pick up this change.