the affordable java shopping cart   

Customizing the Core Layout Files

Customizing a particular screen to add your own HTML, text, or graphics is one thing. But to implement a complete design, you will no doubt need to customize the core layout files that control the layout of each of the various screens in SoftSlate Commerce. These files provide the overall structure of each of the screen, while the other files in the application fill in the "guts" of the screens' content.

To customize one of the core layout files, use the same method as customizing any other JSP template: copy the default template from the default directory to the custom directory, and then make whatever changes you need to.


You may find your design calls for using the Center Layout on all of the screens that by default use the store's Left Layout, or vice-versa. A simple technique for making this happen is to copy both centerLayout.jsp and leftLayout.jsp into the custom directory. Then, if you want to use the Center Layout in place of the Left Layout, you can simply replace the contents of leftLayout.jsp with the following:

<jsp:include page="centerLayout.jsp"/>

There are three layouts employed by the application: Center Layout, Left Layout, and Basic Layout. These layouts are produced by core/centerLayout.jsp, core/leftLayout.jsp, and core/layout.jsp respectively. Use the following table to find out which layout file corresponds to which screens.

Table 11.1. SoftSlate Commerce's Core Layouts and Their Screens

Center Layoutcore/centerLayout.jspFeatures a column on both the left-hand and right-hand side of the screen. By default the left-hand side displays the store's category tree, a search box, and the user's cart. The right-hand column displays the store's Built-In Categories.Welcome Screen
About Screen
Contact Screen
Search Screen
Cart Item Edit Screen
Left Layoutcore/leftLayout.jspFeatures a column on the left-hand of the screen. By default the left-hand side displays the store's category tree, a search box, and the user's cart.Category Screen
Product Screen
Product List Screen
Search Results Screen
Cart Screen
Login Screen
Register Screen
Lost Password Screen
Checkout Invite Login Screen
Checkout Force Login Screen
Checkout Invite Register Screen
Basic Layoutcore/layout.jspSimply displays the screen's content in the middle of the page, between the header and footer. Used by default for the store's checkout screens and the customer account screens.Error Screen
Order Form Screen
Account Addresses Screen
Account Password Screen
Account History Screen
Account History Details Screen
Checkout Addresses Screen
Checkout Payment Screen
Checkout Combo Screen
Checkout ConfirmScreen
Checkout Thank You Screen

Example 11.2. Customizing the Layout of the Checkout Screens

  1. If you need to change the layout of the all screens in the checkout process, refer to the above table. As you can see the layout to customize is the Basic Layout, which is controlled by the layout.jsp file.
  2. Make a copy of the layout.jsp file that appears in the /WEB-INF/layouts/default/core directory and place it in the /WEB-INF/layouts/custom/core directory. (As with the other JSP templates, you should place copies in the custom directory because the files in the default directory may be overwritten with a future upgrade.)
  3. Now, feel free to make whatever changes you need to to the copied file. Upload the file into the SoftSlate Commerce application, and you're changes should take effect immediately, on all the screens that correspond to the layout file.

Home  |   Features  |   Pricing  |   Demo Store  |   Documentation  |   About Us  |   Contact Us

Copyright © 2005 SoftSlate, Inc. All Rights Reserved.