The home page in CRS-M is managed using Experience Manager cartridges, which use ATG targeters to fetch data and JSP pages to render the data. These cartridges are shared with Commerce Reference Store, CRS-M, and IUA. The base configuration for all is in Commerce Reference Store.
There are two cartridges, one for managing the promotional content, such as hero images, and another for managing detail of featured products.
To execute the targeters, cartridges are configured to make MVC Framework calls and the results are then contained in an Endeca content item and passed along to the JSP renderers. The JSP renderers format the promotional data into a specialized horizontal slider and the featured products below it in another specialized slider.
Targeters
For the promotional content, the HomeTheme targeter component defines the rules for fetching the data. The component path is
/atg/registry/RepositoryTargeters/ProductCatalog/HomeTheme
The base HomeTheme in Commerce Reference Store defines the default ruleset and the site ruleset for the homeSite in the Store.Storefront.NoPublishing module. Store.Mobile overrides the HomeTheme component configuration and replaces it with the same rulesets plus site rulesets for mobileHomeSite, mobileStoreSiteUS and mobileStoreSiteDE. Since the configuration are properties of the HomeTheme component and are defined as a XML string, the mobile HomeTheme configuration completely overrides the base HomeTheme configuration since it cannot add to it via layering.
For the product content, the FeaturedProducts targeter component defines the rules for fetching the data. The component path is
/atg/registry/RepositoryTargeters/ProductCatalog/FeaturedProducts
The base FeaturedProducts configuration in Commerce Reference Store desktop defines the rulesets for all sites and is not overrides by Mobile.
Renderers
The promotional content is processed by this JSP page:
/mobile/cartridges/ScrollablePromotionalContent-ATGSlot/ScrollablePromotionalContent-ATGSlot.jsp
This page iterates over the promotionalContent items contained in the Endeca Content Item returned from the cartridge. Each promotionalContent item is in turn rendered by the /mobile/promo/gadgets/homePagePromotionalCell.jsp.
On document ready, the ScrollablePromotionalContent-ATGSlot.jsp calls the initPromoSlider() function in promo.js which creates the special slider for the images using the functions in slider.js and adding support for the circles at the bottom the images indicating the index of the current image and number of images in the slider.
The featured products, shown below the promotional content, are processed by:
/mobile/cartridges/ScrollablePromotionalContent-ATGSlot/ScrollableProductSpotlight-ATGSlot.jsp
The product collection from the Endeca Content Item returned from the cartridge and passes the collection to the /mobile/global/gadgets/productsHorizontalList.jsp JSP page The productsHorizontalList page renders the images and links for each product and if applicable, the site the product belongs to (if different that the current site) and the price of the item. On document ready, the productsHorizontalList.jsp calls the initHorizontalListSliders() function in horizontal-list.js which creates the special slider for the product images.
