A common customization is to modify the look of the Endless Aisle app. Often this includes changing app colors and fonts.
Before performing any customization, you first copy the default reference app files, leaving the original files intact.
You should choose a name to use for all customization files and folders. For example, if your organization is Sample Company and Sons, you might decide to name all files for customization “scs”. In that case, the copy of the demandware.js file would be scs.js. In these steps, the file name is <your_organization>, as in <your_organization>.js.
The copy of the file should be in the same directory as the original file. Name it using the name you selected in step 1.
See http://docs.appcelerator.com/platform/latest/#!/guide/Alloy_Styles_and_Themes-section-src-35621526_AlloyStylesandThemes-Themes for more information.
When you have completed these steps, the items in the right column are created.| Default file/folder structure | Customization files / folder structure |
| app/assets/demandware app/assets/demandware/images/*.* |
app/assets/<your_organization> app/assets/<your_organization>/images/*.* |
| app/assets/alloy/styles/demandware.js | app/assets/alloy/styles/<your_organization>.js |
| app/themes/<your_organization>/*.* |
You can change the colors in the Endless Aisle app. There are three places where colors are defined:
The file app/assets/alloy/styles/demandware.js contains the style definitions for colors and fonts. All of the colors and fonts in the app are based on these definitions.
In addition, some colors come from images; you might need to update those.
To customize the fonts, you modify the file app/assets/alloy/styles/<your_organization>.js. You can also add new font definitions and use those in the app. You add new fonts in app/assets/fonts.
The Endless Aisle app uses images as the background for buttons. Images are also used for icons.
To change an image:
For example, you determine that the app/assets/demandware/images/Default-Landscape.png file contains the image you want to replace..
You don't change the contents of the app/assets/demandware/images folder. Also, ensure that the file name is the same as the original file, with the same file extension.
theme :
'<your_organization>',
The elements that comprise the UI are placed on the screen in a layout, either horizontal or vertical. Although you can change the layout, you should be aware of the impact on other UI elements.
An example of a horizontal layout is defined in the XML file app/views/customerSearch/index.xml, in which the secondary navigation bar contains a Back button, a divider, and the search results.
<View class="customer_results_header">
<Button id="breadcrumbs_back_button" class="breadcrumbs_back_button" accessibilityValue="breadcrumbs_back_button"/>
<View class="vertical_separator"/>
<Label id="search_results_count" accessibilityValue="search_results_count"/>
</View>As specified in the TSS file by layout: ‘horizontal’, the elements of the customer results header appear horizontally within the customer_results_header.
back button | separator | search results count
'.customer_results_header': {
backgroundColor: Alloy.Styles.color.background.medium,
width: '100%',
height: 44,
layout: 'horizontal'
},An example of a vertical layout is defined in the XML file app/views/customerSearch/index.xml, in which the customer search results container contains at least one customer result row.
<View id="results_table_container">
<TableView id="results_container" dataCollection="$.customers" dataTransform="transformCustomer">
<Require src="customer/components/customerResultRow"/>
</TableView>
</View>
As specified in the TSS file by layout: ‘vertical’, the customerResultRows appear vertically within the customer results_container.
'#results_table_container': {
layout: 'vertical',
height: 475,
width: '100%',
top: 0
},
'#results_container': {
separatorStyle: 'transparent',
layout: 'vertical'
},