There are several UI elements that are reused throughout the CRS-M. Here we will examine the most important of these.
Navigation and the Custom MobilePageContainer.tag
As in Commerce Reference Store, all pages in CRS-M are enclosed within a “page container”. This custom tag automatically includes the content common to every page, including JavaScript and CSS imports, as well as common page elements such as the header and footer.
The tag accepts:
A string parameter—
titleString—that represents the title of the current pageA page fragment parameter—
modalContent—that renders content that may be displayed in a custom modal dialogA Boolean-valued parameter—
displayModal—that flags the modal content to be visible immediately upon page load
Modal Content
The structure of each page that is imposed by the page container tag requires that modal content be specified separately from other page content to ensure full compatibility with the rest of the site. Specifically, CSS constraints require that in order for modal content to display correctly in front of the page content, it must be separated from that content. The following example shows what is meant by “modal content”, that is, the Contact Us menu is modal in this case.
<body> <div id="pageContainer"> <div id="header"> <div class="storeContainer"> <div id="homeTopSlot"> <div id="homeBottomSlot" style="overflow: hidden;"> <script type="text/javascript"> </div> <div id="footer"> <div id="modalOverlay" onclick="CRSMA.global.toggleModal(false);" style="display: none;"> </div> </body>
Additionally, the JavaScript function toggleModal is provided to automate the process of displaying and hiding modal content. By default, when toggleModal is used to show the modal content, it only affects the visibility of the mobile_store_modalOverlay <div>. Any modal content that needs to be displayed must have its visibility set separately in order to be displayed when toggleModal is called. Conversely, when toggleModal is called to hide modal content it will also modify the visibility of all the immediate children of the mobile_store_modalOverlay <div>, setting the CSS display property to “none”, in order to reset the state of the modal display. The following illustration shows an example of what is meant by “modal content”, that is, the Contact Us menu is modal in this case.
Header
The header consists of four components. From left to right, they are: the store logo, the search bar, the browse button, and the cart button. With the exception of the search bar, touching any of these components takes the user to the appropriate page (the homepage for the store logo, the user’s shopping cart for the Cart button, and the Refinement menus for browse button).
Touching the Search bar causes it to expand, at which point the user may enter a search query. Once the search query is submitted, the user is taken to the Search Results page.
Additionally, when there are items in the Cart, a small badge will appear on the Cart button denoting the number of items in the cart.
Footer
The footer contains the site copyright as well as useful links for the user. Touching the “Contact Us” area displays phone and email options, both of which will handoff to the device’s native functionality for making calls or composing email, as shown in the following illustration.
Contact Us Popup
Touching the “Stores” area takes the user to the Stores page, which lists retail locations for the current site, as shown in the following figure.
Stores Page
Touching the “More” area takes the user to a page containing other useful options, including the My Account area, viewing the store’s privacy policy, and selecting a language, as shown in the following figure. CRS-M does not provide map integration out of the box, but implementers can choose and incorporate their chosen map service here.
“More” Area
