Testing device detection and redirection to device-specific storefronts

In this lesson, the device detection and redirection are tested in the storefront on a desktop browser to simulate mobile device usage. The new links in the page footer sets the cookie to the value corresponding to the target device and displays the page from the corresponding storefront layout.

About this task

Three page views were changed while completing this tutorial, corresponding to the home page, categories pages, and products pages. Visit each of the pages within the desktop, smartphone, and tablet storefronts. Select the layout corresponding to each of the devices to determine whether redirection is functioning correctly.

Procedure

  1. In a Safari or Google Chrome browser, navigate to the store home page. Enter the following URL:

    http://host_name/webapp/wcs/stores/servlet/en/store_name.

    Screen capture of Aurora starter store home page
  2. Click the Tablet link at the base of the page. This link changes the page layout to the tablet device layout. The cookie is set to identify itself as a tablet device and refresh the page in the tablet storefront.
    Screen capture of Aurora footer that shows different layout options.
  3. If the page does not refresh automatically, refresh the page. The home page for tablet devices displays.
    Note: The URL does not change. This is the expected result.

    Screen capture of home page on a tablet.
  4. Click the Smartphone link at the base of the page. This link changes the page layout to the smartphone device layout and displays the top categories page.

    Since the smartphone starter store has an additional index page, it results in different topology than the desktop and tablet starter stores. The struts forward mapping is set up to redirect users to the smartphone top categories page.

    Screen capture of the home page on a smartphone.
  5. While on the smartphone home page, click the Apparel category. The category page displays.
    Screen capture of the category page on a smartphone.
  6. Click the Tablet link at the base of the page. This link changes the page layout to the tablet device layout. The Apparel category page displays for a tablet device.
    Screen capture of category page on a tablet device.
  7. Click Full Site at the base of the page. This link changes the page layout to the full page layout. The Apparel category page displays.
  8. In the Category section, navigate to Women > Dresses.
  9. Select Hermitage Ruched Bodice Cocktail Dress. The product page displays.
    Screen capture of product page for the full site.
  10. Click the Smartphone link at the base of the page to change the layout to the smartphone device. The Hermitage Ruched Bodice Cocktail Dress product page displays using the smartphone-specific storefront styling.
    Note: The URL does not change.

    Screen capture of the product page on a smartphone device.
  11. Click the Tablet link at the base of the page. The product page displays using the tablet-specific storefront styling.

    Screen capture of product page on a tablet device.