Creating a cookie to override device detection

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 Stores > WebContent > Aurora > Widgets > Footer 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:
```

```

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 Stores > WebContent > Aurora > mobile20 > include > styles > style1 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 Stores > WebContent > Aurora > tablet > include > styles > style1 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 Stores > WebContent > Aurora > tablet. 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.