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:

Device Detection

Device detection allows for custom pages to be returned, depending on the device used to access the site. The HCL Commerce service is configured to identify browsers based on their user agent string. It maps the device into one of two groupings: Desktop or mobile.

Through this detection, different pages can be displayed to the user, allowing for a an optimized user experience tailored to the display and capabilities of the user's device.

Specific pages that have both a mobile and desktop equivalent are differentiated, and the browser is forwarded the appropriate version of the page. These pages can act as "branches", forking users into custom flows built only to serve mobile or desktop shoppers. Complex flows can allow for users to enter and exit desktop or mobile-only flows at any time, by returning users to pages with both mobile and desktop views.

The entry URL serves as the branching point between responsive and device-specific pages, where:
  1. Device detection is enabled on the view that serves as the entry point to a device-specific page.
  2. When clicked or tapped, shoppers are redirected to the device-specific page from the responsive page.
  3. Shoppers navigate within the device-specific storefront until a responsive page link is clicked or tapped.
  4. Then, shoppers are placed back into the responsive area of the storefront.
The following storefront pages contain branching points 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:

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 in HCL Commerce Versions 9.0.0.x, or struts-wcs-stores-custom.xml in Versions 9.0.1+) 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.
  • The store Spring MVC controls which store pages are returned to the browser, and can differentiate between devices when the URL is shared between the mobile and base store page. To learn more about the Spring MVC configuration and how to customize it, see Spring MVC and store controller customization.
  • 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);
}