Responsive and device-specific store pages

Responsive store pages and store pages are device-specific by default. The transition between responsive and device-specific pages is controlled by the device detection framework.

The following store pages are responsive by default:

Fluid and mobile fallback store pages

The following store pages are fully responsive and fluid, but are not managed by using the Commerce Composer tool:
  • Product Compare
  • Advanced Search
  • Store Locator
When you publish the Aurora starter store as a consumer direct store, the following mobile pages are used as a fallback in the responsive storefront:
  • All pages that belong to the mobile checkout flows.
  • The Wish List and Change Password pages that belong to the mobile account flows.

Configuration changes that facilitate transitions

The following configurations are updated to enable transitions between responsive and device-specific store pages:
  • The Struts configuration file (struts-config-ext.xml) is updated to include more entries. The entries for mobile store pages are remapped to share view names that are common to the base store. The device IDs defined in the wc-devices.xml file are appended to the view names in the Struts configuration file. These views point to the pages where the site branches from desktop to smartphone store pages based on the device that is used by the shopper. For the pages identified as branching points into a mobile-specific JSP file, where the URL is shared between the mobile and base store page, caching is performed only on the JSP file, rather than the page.
  • SEO pattern definitions are updated to use the updated view names and structure reflected in the base store. That is, the m20 token for smartphone is removed.
    Note: The updated SEO pattern definitions typically apply to the product details page. That is, not all smartphone starter store URLs are SEO-friendly URLs.
  • Smartphone JSP files are updated to use the updated view names and SEO patterns. These instances include those where base store view names are required, and where SEO pattern names are changed. For example, product details.
  • Internet Explorer 8 uses different CSS files behaves differently than other web browsers. Resizing of the header is disabled in Internet Explorer 8 with the following code, due to a limitation where the screen blacks out when resizing:
    
window.setTimeout(updateDepartmentsMenu, 200);
if (!(has("ie") < 9)) { // Disabled due to an IE8 bug causing the page to go partially black
on(window, "resize", updateDepartmentsMenu);
}