This lesson demonstrates the use of the extended
device detection feature. You configure the smartphone and tablet
starter stores to generate a cookie that contains the device ID. In
this lesson, you update the storefront JSP files with links in the
page footer. Users to select the page layout for a particular device,
for example, desktop, smartphone, or tablet, by setting a cookie.
The page then refreshes, by using the WC_MOBILEDEVICEID cookie value
to demonstrate the extended device detection feature.
About this task
The extended device detection framework provides several
methods to group different devices and methods of device detection.
This framework provides flexibility to select the approach that is
best suited to your current device support. The framework is easily
extensible, you can introduce support for more devices. Additionally,
if the user visits a device storefront home page and the cookie does
not exist, the cookie is set to the device ID corresponding to that storefront.
- Desktop Aurora home page URL: http://hostname/webapp/wcs/stores/servlet/en/aurora
- Smartphone home page URL: http://hostname/webapp/wcs/stores/servlet/m20/en/aurora
- Tablet home page URL: http://hostname/webapp/wcs/stores/servlet/t20/en/aurora
Procedure
To update the storefront JSP files:
- Update the footer JSP in the Aurora starter store:
- In Enterprise Explorer, go to and open Footer_UI.jsp.
- Locate the following code block:
<%@ taglib uri="http://commerce.ibm.com/coremetrics" prefix="cm" %>
<%@page import="com.ibm.commerce.bi.BIConfigRegistry"%>
<%@page import="com.ibm.commerce.command.CommandContext" %>
<%@page import="com.ibm.commerce.server.ECConstants" %>
- Copy the following code into the space below the code
block from step 1.b.
<script type="text/javascript">
function setMobileDeviceCookie(value) {
document.cookie = "WC_MOBILEDEVICEID=" + value + ";path=/";
}
</script>
- Locate the following line of code:
<!--End Footer Content -->
- Copy the following code directly above the line of code
in step 1.d:
<div style="text-align:center;color:#ffffff">Layout: <a href="javascript:history.go(0)"
onClick="setMobileDeviceCookie('0');">Full Site
</a> | <a href="javascript:history.go(0)" onClick="setMobileDeviceCookie('1');
">Smartphone</a> | <a href="javascript:history.go(0)"
onClick="setMobileDeviceCookie('2');">Tablet</a></div>
- Locate and comment out the following code block:
<c:if test="${env_mobileStoreSupport == true}">
<li><a id="FooterVisitMobileStoreLink" href="${mobileHome}">
<fmt:message key="FOOTER_VISIT_MOBILE_STORE"/></a></li>
</c:if>
- Save the file.
- Update the footer JSP in the smartphone starter store:
- Go to and open CachedFooterDisplay.jsp.
- Locate the
following code block:
<%@ include file="../../../../include/parameters.jspf" %>
<%@ include file="../../../include/JSTLEnvironmentSetup.jspf" %>
- Copy the following code snippet into the space below
the code block in step 2.b:
<script type="text/javascript">
function setMobileDeviceCookie(value) {
document.cookie = "WC_MOBILEDEVICEID=" + value + ";path=/";
}
function doesMobileDeviceCookieExist() {
if(document.cookie.indexOf('WC_MOBILEDEVICEID') < 0) {
setMobileDeviceCookie('0');
}
}
window.onload=doesMobileDeviceCookieExist;
</script>
- Locate the
following code block:
<div id="privacy_policy">
…
</div>
- Copy the following code directly below the closing <div>
tag of the code block in step 2.d:
<div style="text-align:center padding:16px;">Layout:
<a href="javascript:history.go(0)" onClick="setMobileDeviceCookie('0');">Full Site</a> |
<a href=" javascript:history.go(0)" onClick="setMobileDeviceCookie('1');">Smartphone</a> |
<a href="javascript:history.go(0)" onClick="setMobileDeviceCookie('2');">Tablet</a>
</div>
- Locate and comment out the following block of code:
<div class="item left divider">
<a id="desktop_site_link" href="${fn:escapeXml(DesktopSiteURL)}"
title="<fmt:message key="FOOTER_NAV_FULL_SITE" bundle="${storeText}"/>">
<fmt:message key="FOOTER_NAV_FULL_SITE" bundle="${storeText}"/>
</a>
</div>
- Save the file.
- Update the footer JSP in the tablet starter store:
- Go to and open CachedFooterDisplay.jsp.
- Locate the following code block:
<!-- BEGIN CachedFooterDisplay.jsp -->
<%@ include file="../../../include/JSTLEnvironmentSetup.jspf" %>
<%@ include file="../../../include/ErrorMessageSetup.jspf" %>
- Copy the following code snippet into the space below
the code block in step 3.b:
<script type="text/javascript">
function setMobileDeviceCookie(value) {
document.cookie = "WC_MOBILEDEVICEID=" + value + ";path=/";
}
function doesMobileDeviceCookieExist() {
if(document.cookie.indexOf('WC_MOBILEDEVICEID') < 0) {
setMobileDeviceCookie('2');
}
}
window.onload=doesMobileDeviceCookieExist;
</script>
- Locate the following code block:
<div class="pageFooterRow2">
…
</div>
- Copy the following code below the closing <div> tag
of the code block in step 3.d:
<div style="text-align:center;padding:16px;">Layout:
<a href="javascript:history.go(0)" onClick="setMobileDeviceCookie('0');">Full Site</a> |
<a href="javascript:history.go(0)" onClick="setMobileDeviceCookie('1');">Smartphone</a> |
<a href="javascript:history.go(0)" onClick="setMobileDeviceCookie('2');">Tablet</a>
</div>
- Locate and comment out the following line of code:
<a id="CachedFooterDisplay_fullSiteLink" href="TopCategories1_${storeId}_${catalogId}_${param.langId}">
<fmt:message key="Footer_Full_Site" bundle="${storeText}"/></a>
- Save the file.
- Go to .
Open index.jsp for editing.
- Locate the following code block:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Refresh" content="0;URL=${tabletHome}"/>
</head>
<body>
</body>
</html>
- Add the following JavaScript snippet to the <head> element
before the </head> tag.
<script type="text/javascript">
function setMobileDeviceCookie(value) {
document.cookie = "WC_MOBILEDEVICEID=" + value + ";path=/";
}
function doesMobileDeviceCookieExist() {
if(document.cookie.indexOf('WC_MOBILEDEVICEID') < 0) {
setMobileDeviceCookie('2');
}
}
window.onload=doesMobileDeviceCookieExist;
</script>
- Save and close the file.