The product details page of CRS-M displays a large product image that can be further enlarged by touch, drop-down menus for SKU selection, a product description and two horizontal sliders containing related products and recently viewed products, where available. The following illustration shows the product details page displaying a clothing SKU.

Product Details page displaying Clothing SKU

The product details page should be flexible enough to display many different types of product and SKU. Since it is an essential component in the flow of a commerce application, additional goals set out for the page were for it to be intuitive and performant. The task of achieving these goals presented an interesting design choice: while the general product data needed to be available upon page load (performant), SKU configuration information (price, availability) was only relevant once that SKU had been selected (intuitive). In keeping with Commerce Reference Store’s design, the initial design iteration called for loading such information via AJAX only after a SKU had been selected by the user.

However, this became a performance issue in the mobile environment where round trips to the server are often the most expensive operation. While waiting for data from the server on SKU selection, the UI of the product details page would be in an indeterminate state until the AJAX request was complete. For this reason it was decided to use a design similar to the homepage whereby all SKU data for the given product was fetched on the initial page load. This would increase initial load time slightly but eliminate awkward UI pauses during SKU selection, caused by multiple server round trips.