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.
![[Note]](images/note.png) | Note |
|---|---|
You may find your design calls for using the Left Layout on all of the screens that by
default use the store's Basic (full-screen) Layout, or vice-versa. A simple technique for making this
happen is to copy both <jsp:include page="leftLayout.jsp"/> |
There are three layouts employed by the application: Center Layout, Left Layout (default-xhtml layout only), 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.
![[Important]](images/important.png) | Important |
|---|---|
The Center Layout is not applicable to the legacy "default-xhtml" set of templates. To implement a right-hand column for the "default-xhtml" layout, see this forum topic: http://www.softslate.com/forums/viewtopic.php?t=417 |
Table 12.1. SoftSlate Commerce's Core Layouts and Their Screens
| Layout | Template | Description | Screens | |||
|---|---|---|---|---|---|---|
| Center Layout |
core/centerLayout.jsp
| Features a column on the right-hand side of the screen. The right-hand column displays the store's Built-In Categories. | Welcome Screen | |||
| About Screen | ||||||
| Contact Screen | ||||||
| Search Screen | ||||||
| Left Layout (default-xhtml layout only) |
core/leftLayout.jsp
| Features 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 Layout | core/layout.jsp
| Simply displays the screen's content in the middle of the page, between the header and footer. Used in the deafult-html5 templates for all screens other than those listed under Center Layout. | 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 12.2. Customizing the Layout of the Checkout Screens
- 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.jspfile. - Make a copy of the
layout.jspfile that appears in the/WEB-INF/layouts/default-html5/coredirectory and place it in the/WEB-INF/layouts/custom/coredirectory. (As with the other JSP templates, you should place copies in thecustomdirectory because the files in thedefaultdirectory may be overwritten with a future upgrade.) - 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.