Change the Look of the Commerce Cloud Endless Aisle App

A common customization is to modify the look of the Endless Aisle app. Often this includes changing app colors and fonts.

Copy Existing Files

Before performing any customization, you first copy the default reference app files, leaving the original files intact.

  1. Determine the name to use for your customization files.

    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.

  2. Create a folder in the app/assets folder that is named using the name you selected in step 1.
  3. Copy the file app/assets/alloy/styles/demandware.js and rename it.

    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.

  4. Create the folder app/themes/<your_organization> to match 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>/*.*

Change App Colors

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.

Change App Fonts and Styles

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.

Change Images

The Endless Aisle app uses images as the background for buttons. Images are also used for icons.

To change an image:

  1. Look in the app/assets/demandware/images folder to determine the name of the image you want to replace.

    For example, you determine that the app/assets/demandware/images/Default-Landscape.png file contains the image you want to replace..

  2. Create the new image and copy it to app/assets/<your_organization>/Default-Landscape.png, overwriting the existing file.

    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.

  3. Edit the app/assets/alloy/styles/<your_organization>.js file to point to <your_organization>/images/Default-Landscape.png instead of demandware/images/Default-Landscape.png.

Change the App Icon

Note: You can change the name of the appicon.png file, but you can't change its location. Titanium expects the images named in the Icon field of tiapp.xml to be in Resources/iphone, which isn't where you put the files, but instead place them in app/assets/iphone. During the Titanium build the app/assets/iphone files are moved to Resources/iphone. Because Endless Aisle is using Alloy, they need to be in app/assets/iphone. The icon can be in the following formats:
  • <name>-72.png' - 72x72px icon for iPad
  1. Create an app icon in PNG format, named appicon.png, that is 57x57 pixels.
  2. Create an app icon in PNG format, named appicon-72.png, that is 72x72px.
  3. Replace the images in app/assets/iphone with these files.

Change the Splash Image

  1. Create a splash image in PNG format, named Default-Landscape.png, that 1024x768pixels.
  2. Create a splash image in PNG format, named [email protected], that is 2048x1536 pixels.
  3. Replace the images in app/assets/iphone with these files.
  4. Update the Default-Landscape.png files in your app/assets/<your_organization>/images/ following the steps in “Change images”.

Specify the Theme to Use

  1. Add the following to app/assets/config/user.js, then save the file: theme : '<your_organization>',
  2. Replace <your_organization> with what you selected as the name to use for your customization files.

Modify the App Layout

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'
},

Related Links

Customize the Endless Aisle App

Setting Category Images for the Endless Aisle Home Page

Enable Address Verification in Endless Aisle

Customize Emails Sent by Endless Aisle

Add Custom Data to Existing Models in Endless Aisle

Debug the Endless Aisle App

Endless Aisle Loggable Categories

Running Endless Aisle in the Simulator