Store templates make usage of JSTL (http://www.oracle.com/technetwork/java/index-jsp-135995.html), Struts 2 tag libraries (http://struts.apache.org/2.0.14/docs/tag-reference.html) and custom Shopizer’s tag libraries. Anyone familiar with JSTL and having minimal Struts 2 knowledge will be able to understand how store front templates are rendered.
The system uses mainly Struts 2 tags <s: tags for getting objects in the HttpRequest, HttpSession and in the current action class. It also uses forms and logic tasks to interact with business entities exposed through the current Action class. The system will use JSTL tags <c: for display logic in the JSP and finally Shopizer’s tags <sm: where Struts 2 and JSTL does not apply such as retrieving objects from the cache etc…
Store front template files can be found in sm-shop\WebContent\catalog\templates\<TEMPLATE MODULE NAME>. There are exactly 15 files used in the template plus portlets files specific to the template that can be found in sm-shop\WebContent\catalog\templates\<TEMPLATE MODULE NAME>\portlets. There are approximately 5 portlet files per template.
Store layout
All pages are assembled following a specific layout that can be found in sm-shop\WebContent\layout\catalogDefault.jsp and pages compositions are defined in sm-shop\WebContent\WEB-INF\tiles-catalog.xml. There are 6 important page compositions which make the whole store front which are:
landing : Store front landing Page. The url to this page is **http://<host>/shop/landing**
category : Main categories and sub category pages. The url to this page is **http://<host>/shop/catagory/SEO-FRIENDLY-URL**
product : Product detail Page. The url to this page is **http://<host>/shop/product/SEO-FRIENDLY-URL**
search : Search results Page. The url to this page is **http://<host>/shop/page?search=<query string>**
contact : Contact us page. The url to this page is **http://<host>/shop/contact**
contentpage : Custom page holder. The url to this page is **http://<host>/shop/content/SEO-FRIENDLY-URL**
<definition name="landing" template="/layout/catalogDefault.jsp">
<put-attribute name="page" value="landing" type="string"/>
<put-attribute name="openWrapper" value="/layout/catalog/openWrapper.jsp"/>
<put-attribute name="header" value="/layout/catalog/header.jsp"/>
<put-attribute name="openBody" value="/layout/catalog/openBody.jsp" />
<put-attribute name="body" value="/layout/catalog/landing.jsp"/>
<put-attribute name="closeBody" value="/layout/catalog/closeBody.jsp"/>
<put-attribute name="closeWrapper" value="/layout/catalog/closeWrapper.jsp"/>
<put-attribute name="footer" value="/layout/catalog/footer.jsp"/>
</definition>
<definition name="category" template="/layout/catalogDefault.jsp">
<put-attribute name="page" value="category" type="string"/>
<put-attribute name="openWrapper" value="/layout/catalog/openWrapper.jsp"/>
<put-attribute name="header" value="/layout/catalog/header.jsp"/>
<put-attribute name="openBody" value="/layout/catalog/openBody.jsp"/>
<put-attribute name="body" value="/layout/catalog/category.jsp"/>
<put-attribute name="closeBody" value="/layout/catalog/closeBody.jsp"/>
<put-attribute name="closeWrapper" value="/layout/catalog/closeWrapper.jsp"/>
<put-attribute name="footer" value="/layout/catalog/footer.jsp"/>
</definition>
<definition name="product" template="/layout/catalogDefault.jsp">
<put-attribute name="page" value="product" type="string"/>
<put-attribute name="openWrapper" value="/layout/catalog/openWrapper.jsp"/>
<put-attribute name="header" value="/layout/catalog/header.jsp"/>
<put-attribute name="openBody" value="/layout/catalog/openBody.jsp"/>
<put-attribute name="body" value="/layout/catalog/product.jsp"/>
<put-attribute name="closeBody" value="/layout/catalog/closeBody.jsp"/>
<put-attribute name="closeWrapper" value="/layout/catalog/closeWrapper.jsp"/>
<put-attribute name="footer" value="/layout/catalog/footer.jsp"/>
</definition>
<definition name="search" template="/layout/catalogDefault.jsp">
<put-attribute name="page" value="search" type="string"/>
<put-attribute name="openWrapper" value="/layout/catalog/openWrapper.jsp"/>
<put-attribute name="header" value="/layout/catalog/header.jsp"/>
<put-attribute name="openBody" value="/layout/catalog/openBody.jsp"/>
<put-attribute name="body" value="/layout/catalog/search.jsp"/>
<put-attribute name="closeBody" value="/layout/catalog/closeBody.jsp"/>
<put-attribute name="closeWrapper" value="/layout/catalog/closeWrapper.jsp"/>
<put-attribute name="footer" value="/layout/catalog/footer.jsp"/>
</definition>
<definition name="search" template="/layout/catalogDefault.jsp">
<put-attribute name="page" value="search" type="string"/>
<put-attribute name="openWrapper" value="/layout/catalog/openWrapper.jsp"/>
<put-attribute name="header" value="/layout/catalog/header.jsp"/>
<put-attribute name="openBody" value="/layout/catalog/openBody.jsp"/>
<put-attribute name="body" value="/layout/catalog/search.jsp"/>
<put-attribute name="closeBody" value="/layout/catalog/closeBody.jsp"/>
<put-attribute name="closeWrapper" value="/layout/catalog/closeWrapper.jsp"/>
<put-attribute name="footer" value="/layout/catalog/footer.jsp"/>
</definition>
<definition name="contentpage" template="/layout/catalogDefault.jsp">
<put-attribute name="page" value="pagelink" type="string"/>
<put-attribute name="openWrapper" value="/layout/catalog/openWrapper.jsp"/>
<put-attribute name="header" value="/layout/catalog/header.jsp"/>
<put-attribute name="openBody" value="/layout/catalog/openBody.jsp"/>
<put-attribute name="body" value="/layout/catalog/page.jsp"/>
<put-attribute name="closeBody" value="/layout/catalog/closeBody.jsp"/>
<put-attribute name="closeWrapper" value="/layout/catalog/closeWrapper.jsp"/>
<put-attribute name="footer" value="/layout/catalog/footer.jsp"/>
</definition>
Layout assembly
Page Header
The page header (header.jsp) contains usually the store logo or the store name. It also contains top level categories, sometimes a header banner, account links, mini shopping cart information, informational links and language toggling functionalities.
Thi code block contains the logic for displaying the store logo
<a href="<sm:url scheme="http" namespace="/" action="landing" />"
<s:if test="#request.STORE.storelogo!= null && #request.STORE.storelogo!= ''">
<!-- TL TO REPLACE MERCHANT LOGO IF ANY -->
<div class="<YOUR CSS CLASS FOR LOGO>">
<img src="<s:property value="#request.STORE.logoPath" />" border="0"
alt="<s:property value="#request.STORE.storeName" />"></div>
</s:if>
<s:else>
<div class="<YOUR CSS CLASS FOR STORE NAME>"><s:property value="#request.STORE.storename" /></div>
</s:else>
</a>
Portlets
The notion of portlets exist for custom boxed content that can be added to specific places in store front pages. Portlets can be custome or can be specific to the template. The administration panel (sm-central) allows the creation of custom portlets that can be assigned to spcific place holders or positions on the store front generated site. There are also pre-built portlets configured specificaly for the template. Those portlets can be enabled / disabled from the administration panel (sm-central) in the portlet area. Those pre-built portlets are :
-
Mini shopping cart portlet : This mini shopping cart is used in the store front as a summary to the system complete shopping cart
-
Logon portlet : Displays credentials logon box and system registration links
-
Accepted payments portlet : Gathers payment information configured in the administration panel and displays a summary of accepted payments
-
Shipping portlet : Gathers shipping information and determines an esimate based on geo-location. Will also display shipping carrier
-
Search portlet : Displays a search box
A list of pre-built portlet can be displayed using the following code
<jsp:include page="/common/stockportletlist.jsp" />
Custom Portlets can be grouped to be displayed in a given position. This code can be used to display a list of custom portlet configured for a specific position
<s:set name="PORTLETS_POSITION" scope="request" value="2"/>
<jsp:include page="/common/customportletlist.jsp" />
//here are the positions available
//public final static int LABEL_POSITION_LEFT = 1;
//public final static int LABEL_POSITION_RIGHT = 2;
//public final static int LABEL_POSITION_BOTTOM_LANDING = 3;
//public final static int LABEL_POSITION_BOTTOM_CATEGORY = 4;
//public final static int LABEL_POSITION_BOTTOM_PRODUCTS = 5;
It is possible to check if a pre-built portlet has been selected from the administration tool (sm-central)
<s:if test="#request.STORE_FRONT_PORTLETS_MAP['minicartportlet']!=null">
Your html code
</s:if>
//prebuilt portlets are minicartportlet, logonportlet, acceptedpaymentsportlet, searchportlet and shippingportlet
Top main categories
Top main categories are 'usualy' displayed in the header of a web site. The following code will iterate and display childs of ROOT category
<sm:topcategories merchantId="${merchantId}" maxCategories="8">
<c:choose>
<c:when test="${session.mainUrl != null && category.categoryId==session.mainUrl.categoryId}">
<a href="${unSecuredDomain}${contextPath}/category/${category.categoryDescription.url}"
class="class="nav-link-selected">
</c:when>
<c:otherwise>
<a href="${unSecuredDomain}${contextPath}/category/${category.categoryDescription.url}" class="nav-link">
</c:otherwise>
</c:choose>
<div class="nav-left"><div class="nav-right">${category.name}</div></div></a>
${break}
</sm:topcategories>
Left menu categories
Sub categories of a root category are usually displayed on the left menu on each listing page. The following block of code will display a selected menu item sub categories.
<div class="side-nav">
<s:if test="categories!=null && categories.size>0" >
<ul>
<s:iterator value="categories" status="count">
<s:if test="lineage==categoryLineage">
<li>
<s:if test="#session.subCategory!=null && #session.subCategory.categoryId==id.categoryId">
<a href="<%=request.getContextPath()%>/category/${categoryDescription.url}" class="selected"> class="selected">
</s:if>
<s:else>
<a href="<%=request.getContextPath()%>/category/${categoryDescription.url}">
</s:else>
<s:property value="name" /></a>
</li>
</s:if>
</s:iterator>
</ul>
</s:if>
</div>
More details will be available soon