Hitachi Solutions Ecommerce Store Front Designer Guide

Hitachi
Hitachi Solutions
Ecommerce Store Front
Designer Guide
This document is the property of Hitachi Solutions and may not be
redistributed without written permission from Hitachi Solutions. You may
not reproduce this document in any form except for printing it for users of
the Hitachi Solutions Ecommerce system. Any other reproduction will be
considered a violation and is subject to legal action.
HITACHI SOLUTIONS

Hitachi Solutions Ecommerce Store Front Designer Guide
1
TABLE OF CONTENTS
1. Introduction..........................................................................................................................................................3
2. Getting Started with Skinning...............................................................................................................................3
3. Structure of This Document..................................................................................................................................3
4. Folder Structure....................................................................................................................................................4
Templates..................................................................................................................................................................4
Views.........................................................................................................................................................................4
ViewModels...............................................................................................................................................................4
ViewHelpers ..............................................................................................................................................................4
Client_scripts.............................................................................................................................................................4
5. Skin........................................................................................................................................................................5
6. Ecommerce HTML Template Overview ................................................................................................................5
7. HTML Templates – Structure & Content...............................................................................................................6
HTML Structure .........................................................................................................................................................7
HTML Content.......................................................................................................................................................7
Walkthrough of a HTML Template............................................................................................................................7
Master Template...................................................................................................................................................7
Ecommerce Product & Category Templates.......................................................................................................10
8. Widgets...............................................................................................................................................................11
Widget Types...........................................................................................................................................................11
Widget Groups ........................................................................................................................................................12
Widget Invocation & Embedding ............................................................................................................................13
9. HTML Plus Language (Template Models & Template Helpers)...........................................................................14
10. Widget Walkthrough ......................................................................................................................................15
11. Creating your Own Theme..............................................................................................................................19

2
12. Customizing Themes – Modifying Skin CSS Files ............................................................................................21
13. Customizing Themes – Modify HTML Layout .................................................................................................22
Modifying Master Templates..................................................................................................................................22
Modifying Category & Product Templates..............................................................................................................23
14. Customizing Guidelines ..................................................................................................................................24

3
1. INTRODUCTION
Hitachi Solutions Ecommerce Store Front is designed from ground up for ease of skinning your store front &
making UI customizations. You can completely customize the look and feel of the provided store front or even
rebrand the store front to integrate with your existing website design.
This guide is an introduction of the powerful tools & technologies that you have at your hand to make changes to
your store front user interface.
The store front is entirely HTML & CSS based with the user experience getting powered by jQuery. CSS based
layout & skin provides the possibility of getting the desired look and feel without modifying any HTML. Prior
knowledge of HTML, CSS & jQuery is not necessary unless you are working with more advanced concepts defined
in this guide.
2. GETTING STARTED WITH SKINNING
Skinning your store is a multi-step process that requires determining your branding & related communication
along with the purpose of your Ecommerce Store.
3. STRUCTURE OF THIS DOCUMENT
This skinning guide covers below mentioned areas, these topics make up the entire front store skin.
Folder Structure deals with the files that make up your front store skin & where to find them within your front
store.
Skin explains the CSS style sheet that is responsible for giving your front store look & feel. There is a lot you can
achieve by making changes to skin only without making any HTML change.
Ecommerce HTML Template Overview gives an overview of HTML Templating system followed with Hitachi
Solutions Ecommerce.
HTML Templates - Structure & content explains what constitutes an Ecommerce template & how content is
rendered within these templates.
Widgets section explains what widgets are & various available within Ecommerce front store. Sample Usage is also
explained in this section.
HTML Plus Language – Template Models & Template Helpers section explains how Ecommerce HTML Templates
display database content or complex content that requires processing the data in hand.
Template Models contains an overview of different types of models (such as Category Model, Product Model) that
are used in Templates & Widgets. These models are provided by Ecommerce Templating System.
Template Helpers contains an overview of different helpers that are available for use within Templates & Widgets.
These helpers are provided by Ecommerce Templating System.

4
Widget Walkthrough explains one widget in detail while taking the user through HTML & HTML Plus Language
syntax.
Creating & Customizing your own themes explains how you can create a new theme & then customize it as per
your needs.
4. FOLDER STRUCTURE
Once Ecommerce site is installed you would see a folder structure as
shown on right hand side. Same structure is available whether you have
FTP access or a local installation.
There are a few folders that contain files responsible for generating Store
Front User Interface. These folders are
TEMPLATES
This folder contains the CSS skin definition & master layouts used in each
skin. Master Layouts define the overall structure of the page and contain
HTML for common layout elements such as header & footer.
VIEWS
This folder contains all the templates & widget HTMLs arranged in their
own folders.
VIEWMODELS
This folder contains all the template models. You would usually not be
making a change to these but these are available as a reference to
understand various models.
VIEWHELPERS
This folder contains all the template helpers. You would usually not be
making a change to these but these are available as a reference to
understand various helpers.
CLIENT_SCRIPTS
This folder contains JavaScript libraries utilized on the front store. You
would usually not be making a change to these but these are available as a
reference to understand user interface behavior.

5
5. SKIN
Ecommerce Skins are contained inside “Templates” folder. Each skin has its own folder verified by a name. By
default you get:
1. Basketball Theme (available in version 5.0 & higher)
2. Global Apparel Theme (available in version 5.0 & higher)
3. Gadget Online Theme (available in version 5.2 & higher)
4. Serenity Cosmetics Theme (available in version 6.0 & higher)
5. B2B Basketball Theme (available in version 6.0 & higher)
6. B2B Global Apparel Theme (available in version 6.0 & higher)
7. B2B Serenity Cosmetics Theme (available in version 6.0 & higher)
Each skin has three folders called CSS, images & Views. These three folders contain the style sheet, images used in
style sheets & HTML Templates.
1. CSS folder – This folder contains the stylesheets used by store front pages.
2. Images – This folder contains the images used by stylesheets. There are four sprite images that contain all
of the design images used by the store front. It is recommended that these four sprite files be maintained
as you redesign the front store skin.
3. Views – This folder by default contains a folder called “shared”. Shared folder contains the Master
Templates1
. This folder can also be used to override any template or widget HTML declared in
wwwroot/Views folder. If your store front requires a widget to be made slightly different than standard
HTML, you can copy the template or widget in exactly the same location using same file name. Now the
store front would use the modified HTML in this folder & not the HTML present in wwwroot/Views folder.
6. ECOMMERCE HTML TEMPLATE OVERVIEW
Each catalog page in Ecommerce store front is driven by HTML Templates. The templates provide the structural
block needed to construct the page. These structural blocks contain one or more widgets – widgets are responsible
for actual display of the content.
Templates are assigned to respective products or categories as shown below (to assign the template goto Product
Catalog -> Site Structure & browse the catalog tree to assign the template).
1
Master Templates define common layout among multiple pages. For ex: Header & Footer of the catalog pages are
defined in master templates. Master Templates also initialize/declare javascript variables that are used across
multiple pages.

6
Figure 2 – Assigning Templates (1) & Mini Templates (2) to Ecommerce Products.
Figure 3 – Assigning Templates (1) to Ecommerce Categories.
Products have two templates that can be assigned to them
 HTML “Template” that drives the HTML content of the page whenever a product link is clicked & the
shopper goes to Product Detail Page.
 Mini “Product Template” that drives the mini view (also called as quick view) popup in store front.
Categories on the other hand only have a single Template that is assigned for driving the category landing page.
Category landing page may contain the list of the products, list of sub categories or a combination.
Note that the templates are assigned in the context of a category so if you want to
show the same product differently depending on which category it is displayed under,
you can do that by assigning a different HTML template.
There is a default template available on Product Detail & Category Detail respectively. This template would be used
in case there is no template available in the site structure.
Figure 4 – Assigning default product template (1) & default category template (2) via Detail Pages.
7. HTML TEMPLATES – STRUCTURE & CONTENT
1 2
1
1 2

7
Before you can understand Ecommerce HTML Templates, it is important to understand the concept of “HTML
structure” & “HTML content”. Both HTML Structure & HTML Content use HTML & Javascript as the programming
language.
HTML STRUCTURE
HTML Structure is the foundation on which every Ecommerce catalog page (or part of a page) is built. Structure
plays a few important roles for user interface rendering:
1. Structure provides layout of the page or an area within the page.
2. Structure provides the containers for the actual HTML content.
3. Structure provides the necessary Javascript variables & functionality to act upon actual HTML content. It
enables a rich user interface that is highly interactive for the shoppers.
HTML CONTENT
HTML Content is provided by Ecommerce widgets. Widgets are html files that you can edit, which act as building
blocks for the overall page. These widgets play a slightly different role for user interface rendering:
1. Widgets are the “actual content” that the shopper & search engines are interested in.
2. There are a number of Widgets that are interactive, these widgets not only contain the HTML required for
UI Rendering but also the necessary Javascript functionality for rich interaction.
3. Sometimes these widgets can interact with each other on a single page leading to a richer & more
meaningful experience. For ex: When you select a color or size, the image HTML as well as SKU HTML
changes dynamically to show appropriate color and stock / price information respectively.
Widgets may have pre-requisites before they would run. Not all widgets fit into all containers, you can use out of
the box HTML Templates to understand widget usage before using them.
WALKTHROUGH OF A HTML TEMPLATE
To explain the HTML Template Structure, we would walk through a sample page to explain how template structure
is defined. And how widgets provide the HTML content inside the template structure. We will be using home page
of Global Apparel Skin as a sample to do this walk through.
MASTER TEMPLATE
As explained earlier Master Template defines the common elements that are used across multiple pages. Given
below is the home page of Global Apparel Skin. The structure of Master Template is shown on the right hand side.
Global Apparel Home Page

8
Figure 5 – Global Apparel Home Page (left) & Master Template Structure (right).
Master Template provides the common layout structure across multiple pages. This structure is then bound to
widgets that provide the actual HTML content. In the example shown above, header & footer would be common
across multiple catalog pages; hence these have been defined in the Master Template.
Given below is the HTML for Master Template.
Global Apparel Catalog Master Page HTML2
2
This HTML template is present in wwwroot/Templates/GlobalApparel/Views/shared/Catalog.Master file.
Header
Footer
Page Body
Header
Footer
Page Body

9
Figure 6 – Global Apparel Catalog Master Template HTML (left) & Master Template Structure (right).
You would notice that this is a simple HTML structure defining header & footer. HTML defines the basic layout
structure & containers for the actual content.
The concept of Structure & Content is followed at every level of HTML Template definition. Let’s look at header in
detail to understand this better.
Global Apparel Catalog Master Page HTML
Header User Interface
Header User Interface Structure
Header User Interface Structure HTML
Figure 7 – Header HTML Structure Explained in Detail
Header Structure is rather simple containing multiple HTML lists & HTML DIVs. You would notice that
1. Header Structure HTML is defined using HTML elements.
2. The widgets are invoked using a command called as “Html.RenderAction”.
3. There is a widget - “live chat” that is conditional depending on store setup.
4. There is a widget – “newsletter” that is present in HTML but not shown in User Interface. In this case, this
Logo Search My Acc. Nav.
Cart Links
Catalog Nav
Logo
Search
My Account Nav
Catalog Nav
Cart Links

10
widget has been hidden using style sheet but it is present in HTML.
5. Catalog NAV is present first & then the rest of header. The reason for the same being the relevance of
Catalog Navigation for search engines. Rest of the header contains not so relevant HTML & hence is
placed below. Javascript is then used to reposition the header at its appropriate place.
ECOMMERCE PRODUCT & CATEGORY TEMPLATES
Once the master template has defined the common areas of the page, there is the question of the actual body &
its rendering. The body of the page is rendered via individual product or category HTML templates. These HTML
templates are assigned to individual products or categories – as explained in “Ecommerce HTML Template
Overview” chapter.
The actual template files are present in wwwroot/Views/category or wwwroot/Views/product folders. All template
files have a prefix “html_c_” that makes it easy to identify them. Home page of Global Apparel Skin has been
assigned wwwrootViewscategoryhtml_c_home4.ascx as the template.
Global Apparel Home Page HTML3
Home Page Body User Interface Structure
Home Page Body HTML Structure
3
This HTML template is present in wwwroot/Views/Category/html_c_home4.ascx file.
Most Popular Products
Featured Products
Static
Content
Static
Content
Static
Conten
t
Static
Content

11
Figure 8 – Home Page Body HTML Structure Explained in Detail
Body Structure is a collection of DIV elements holding the relevant content. You would notice that
1. Structure HTML is defined using semantic HTML elements.
2. The widgets are invoked using a command called as “Html.RenderAction” as well as another command
called “Html.RenderPartial”.
3. Featured Products is invoked as Html.RenderPartial(“html_a_featuredproducts1”). Html_a prefix indicates
that the file should be loaded via AJAX after the page has completed loading.
4. Most Popular is invoked as Html.RenderAction(“gethtml_mostpopular”…). Gethtml prefix indicates that
the file should be loaded along with the page load.
Two different ways in which featured products & most popular products have been invoked is for demonstrating
the ease of AJAX or non-AJAX loading of widget in Hitachi Solutions Ecommerce UI framework.
8. WIDGETS
HTML Templates typically have multiple widgets that contain the actual HTML content &
Ecommerce functionality. Some widgets are more HTML centric while others are more
functionality centric, usually it is a combination of the two.
All widgets offered by Hitachi Solutions Ecommerce are located in wwwroot/Views folder.
These widgets are grouped into a few categories based on the content/functionality that
the widgets expose.
WIDGET TYPES
Widgets can be of different types, all widget types have a different prefix making it easy to identify the purpose for
the widget.
1. Product or Category HTML Template (files prefixed with html_c) – These files are templates that can
directly be assigned to a product or category.
2. AJAX Widgets (files prefixed with html_a) – These files offer an easy AJAXified mechanism to load any
other HTML widget. Usually there is a one to one relationship between an AJAX widget & the
corresponding widget. AJAX widget has a file name html_a_[filename].ascx & it invokes a HTML widget
Featured Products
Static Content

12
html_[filename].ascx.
3. HTML Widgets (files prefixed with html_) – These files contain the actual widgets that provide the content
& functionality to Ecommerce catalog. There is a large variety of widgets available with out of the box
installation.
4. Complex Components generating HTML (files prefixed with component_) – In rare cases, the HTML
generation requires complex programming & in those cases component files are used. Component HTMLs
are similar to Widget HTMLs except that they are not as designer friendly as widgets.
WIDGET GROUPS
Widgets have several groups, each group is represented as a separate folder in wwwroot/Views. These groups are
explained below.
S. No. Widget Group What it contains?
1. Article It contains User Interface rendering of “Articles”. These widgets are HTML
only providing the Content Management capability. There is no Ecommerce
functionality present in them.
2. Cart It contains User Interface rendering of shopping cart & comparison cart.
These widgets are highly functional providing a rich set of functional
features for Shopping Cart & Comparison Cart operation.
3. Category It contains widgets that render category content. These widgets are highly
functional providing various merchandizing & advertising options.
All category templates can be found here.
4. Checkout It contains the checkout wizard container HTML. The actual Checkout Steps
are not present here. The container provides the checkout flow & user
interface HTML. The flow is controlled via Javascript.
5. ecomforms It contains simple forms such as newsletter, search etc.
6. Editor This folder contains Store Editor related files. You should not change any of
these files as they provide browser based editor functionality for store front
Templates.
7. Nav It contains various navigation htmls as relevant to Ecommerce Shoppers.
Nav widgets are usually hyperlinks based & do not contain much
Ecommerce functionality.
8. Product It contains widgets that render product detail content. These widgets are
highly functional providing various product shopping options.
All product templates can be found here.

13
9. Store It contains widgets that render store related content. These are widgets like
banner, newsfeed, social media etc. These are usually HTML content
without much Ecommerce functionality.
WIDGET INVOCATION & EMBEDDING
Widgets are small HTML snippets pre-built with needed functionality. For example: html_apparel1sku widget
generates the HTML needed for SKU price, inventory availability. But it also enables Add to Cart button by
interacting with it.
All widgets can be invoked by two commands as explained below. These commands are provided by ASP.NET MVC
framework4
.
Command Explanation
RenderAction(method, controller,
parameters)
RenderAction command takes three parameters.
1. The first parameter is the method (a method that would
return the needed widget in our case)
2. Second parameter is the controller (widget group in our
case)
3. Third parameter is a set of input values for the widget to
load – for ex: product id to load a product detail.
RenderAction is useful in situations where additional database calls
are needed because some information that is not directly
contained in the business object is needed. Ex – To display
breadcrumb a full path of current navigation is needed & this
information would be not be available in Product Object.
RenderPartial(widgetname) RenderPartial command takes a single parameter.
1. Parameter contains the name of widget file name that
needs to be rendered.
RenderPartial is useful to split the HTML in multiple pieces. The
data available to the container HTML widget/template is passed
automatically to the called widget.
4
More information for ASP.NET MVC framework can be obtained from http://www.asp.net/mvc or
http://wiki.asp.net/page.aspx/286/aspnet-mvc-framework/

14
HTML Template
Widget A
Widget A1 Widget A2
Widget B
Widget B1
In general widgets in the same group can be invoked using
RenderPartial while going to a different group requires
RenderAction. There are instances where a widget from the
same category is invoked using RenderAction too. This would
be true if the widget we want to render needs data that is not
available in the current business object or “Model” and if it
needs to make some database calls to get that additional,
required information.
Widgets can be embedded inside a template as well as within
another widget. See diagram to understand this. There is no limit in terms of depth of embedding within Widgets.
9. HTML PLUS LANGUAGE (TEMPLATE MODELS & TEMPLATE HELPERS)
HTML language though great for writing web based content is limited in its use of business logic or database
technology. While HTML allows you to write any content, it does not offer any solution for showing content that
requires logic or showing any content that comes from your database.
Hitachi Solutions Ecommerce provides HTML Plus Language5
for displaying database content as well as Business
Logic oriented content. HTML Plus Language allows designers to access Ecommerce database & framework using
simple commands. The technology used for these commands is a part of ASP.NET MVC Framework. Note that the
commands in HTML Plus Language do not return HTML instead they return strings or other complex data types. A
beginner level C# language knowledge is required for using HTML Plus commands.
All commands are invoked as [CommandName].[subcommandname]. If you are using Visual Studio & have Hitachi
Solutions Ecommerce store project file open then you would be able to see available sub commands when you
press dot. These commands are:
S. No. Command6
Explanation Examples
1. Model Model command provides the database content
for any widget. Depending on the widget group
the database content may belong to a product
or category entity. On any HTML Widget you
can write <%=Model.[fieldname]%> to get the
value of the field name.
Ex: <%=Model.Name%> to get
product name on a product widget.
2. Store “store” command provides a variety of facilities
for the storefront that you are working with. A
few popular commands are
On any HTML Widget you can write
<%=store.gettext(“[label
name]”)%> to get the label for
5
HTML Plus Language internally uses View Model & View Helpers provided by ASP.NET MVC Framework. To know
more about View Model & View Helpers, refer to MSDN.
6
Commands are case sensitive.

15
1. store.gettext to get the label of the
relevant field
2. store.getlink to get the hyperlink for
any store object.
3. store.setup([parameter name]) to get
the store setup value.
displaying it on HTML.
3. product “product” command provides a variety of
facilities for the product you are working with.
The most popular command is
product.resizeimage(Model, imagedimension)
to get a resized image of the product.
On a product HTML Widget you can
write below command to get a
resized image of 240 x 360 pixels.
<%=product.resizeimage(Model,
“240x360”)%>
10. WIDGET WALKTHROUGH
We had earlier seen the page structure of Global Apparel Home Page & its corresponding HTML (shown below). In
this chapter, we would walk through “Featured Product” widget.
Global Apparel Home Page HTML7
Home Page Body User Interface Structure
Home Page Body HTML Structure
Featured Product Widget is invoked using a command Html.RenderPartial. This command calls
html_a_featuredproduct1.ascx widget file, which internally calls html_featuredproducts1.ascx file.
A step by step explanation of html_featuredproducts1.ascx (featured product widget) is given below:
7
This HTML template is present in wwwroot/Views/Category/html_c_home4.ascx file.
Featured Products
Static Content
Featured Products

16
1. store.gettext(“FEATURED_PRODUCT_TITLE”, store.name) is used to get the label for Featured Products
heading.
2. Inside the carousel DIV, there is a loop that runs through Model.productViewModelList. This list contains
the list of featured products & their corresponding Models.
3. The first element displays an anchor tag on the product image. Note that instead of Model,
productViewModel is used since Model is needed inside the loop.
4. If there are any ratings for the product then html_reviewrating widget is called using Html.RenderAction
method. The parameters passed are
a. gethtml_reviewrating – This is a method name to return html_reviewrating widget.
b. product – Widget group name for the review rating widget.
c. new RouteValueDictionary({ { "productViewModel", productViewModel } } – This passes the
1
2
3
4
5
6
6.a.
6.b.
6.c.
7
8

17
entire product record to review rating widget so review rating widget can then use this record to
display review rating without making another call to the database.
5. Product name is displayed inside an anchor tag. The anchor tag is identical to the product image anchor
tag.
6. Product Price is displayed in the next para element
a. If product has multiple SKUs or multi- quantity pricing then “As Low As” price is displayed.
b. Else if product has discounts then list price as well as discounted price / retail price is displayed.
List price in such cases has a strike through font style.
c. Else List Price is displayed.
7. Product Description is displayed for SEO purposes. This description is hidden using CSS to maintain the
look & feel of the widget.
8. If product has a mini/quick view template assigned then a hyperlink for launching mini template /quick
view is displayed.
Widgets may have dependencies, much like there is a dependency between an LI tag and a UL or OL tag. The LI tag
cannot be used by itself or with any other tag except UL or OL tags. Similarly, certain widgets are dependent on
other widgets for either or all of the following :
a. HTML Dependency - An HTML container (like a DIV or SPAN or any other HTML container with a particular
ID or class)
b. Data Dependency - Data (which is called as “Model” or “ViewModel”)
c. Context Dependency - Context in which it is to be rendered.
HTML DEPENDENCY
For HTML container dependency, we can look at html_c_productsearchoutput1.ascx. This widget is used to display
search results or a list of products in a category. Apart from other widgets, it also contains a call to invoke and
display the actual product list widget. The call for the product list, is wrapped within a DIV whose id is
“productlistcontainer”.
1
2

18
This ID (Marker 1 in the figure) is important for the product list (Marker 2) to function correctly because within the
product list view (html_productlist.ascx), we specify this ID for the ajax call when it retrieves the list of products.
This DIV with this id acts as a container whose innetHTML property is changed as the user moves from one page to
another page of products, or applies filters or changes the Sorting of the products.
DATA DEPENDENCY
In the example above (html_featuredproducts1.ascx), RATING widget is within FEATURED products widget and is
displayed for each product in the list. The RATING widget cannot be used without having a ProductViewModel
passed to it. The ProductViewModel is the DATA that it uses to determine how many rating stars to display for a
product. Hence it cannot be used by itself. It needs the context of the product for which to display the rating and it
needs the data related to the product.
Another example of data dependency is sku attributes, sku details and product details page. The product details
page will fire the ajax call for retrieving SKU details. Once these detaisl are downloaded via ajax, then a javascript
event (IgnSkuLoadedEvent) is fired which is results in the SKU id and Product code being passed to the server to
get attributes like various colors, sizes etc for that product (if there are variations).
CONTEXT DEPENDENCY
Context dependency is related to business. For example, the search page has two portions.
a. Filters
b. Product List
Filters and product list are separate widgets but they share a common business role, which is to allow the user the
search and view products in an efficient manner. This common role, is context dependency in that even though the
filters can exist without the product list widget, they never will because they become meaningless list of values
when not accompanied by the product list.
As stated in data dependency and context dependency above, there is an event driven structure for certain
widgets. For this, there are eight custom javascript events defined in Hitachi Solutions Ecommerce.

19
a. IgnAddToComparisonEvent – Fired when a user clicks “Compare” button/link on a product view.
b. IgnAttributeChangedEvent – Fired when a user select an option on product details page like color or size.
c. IgnItemAddedToCartEvent – Fired when a user clicks “Add Item To Cart” button/link
d. IgnProductSortEvent – Fired when user sorts the product list.
e. IgnSearchEvent – Fired when search is performed or when user navigates to another page of the product
list.
f. IgnSelectionChangedEvent – Fired when a user changes a drop down value.
g. IgnSkuLoadedEvent – Fires when a sku is loaded.
h. IgnViewComparisonEvent – Fired when user clicks on “View Comparison” button/link
An event may have a listener attached to it like you would write a javascript function for onclick event of an INPUT
Button element. Certain widgets may complete their processing and fire one or more of the above stated events to
notify any registered listeners to do their own processing. This is done so that if one widget is removed the other
widget should not break the functionality.
11. CREATING YOUR OWN THEME
Hitachi Solutions Ecommerce has several inbuilt themes & usually you would start with a theme that already has a
significant overlap with what your own Ecommerce Store Front. This chapter helps you understand the steps
involved in creating your own theme. These steps assume that you have a working Ecommerce Storefront8
&
access to the “Templates” folder residing on Store Front website root folder.
Templates folder contains necessary files required for you create your own theme. The steps to be followed for
creating your own theme are:
1. Create a new folder containing your theme name. For ex: Contoso.
a. “Contoso” folder should be created under wwwrootTemplates folder where wwwroot is the
root of your store front. Other theme folders such as Basketball, GlobalApparel and
GadgetsOnline are also present here.
b. “Contoso” folder should also be created under wwwrootApp_Themes folder where wwwroot is
the root of your store front. Other theme folders such as Basketball, GlobalApparel and
GadgetsOnline are also present here.
2. Find out which existing theme comes closes to your business needs. We will assume GlobalApparel theme
to be closest to your business requirements.
3. Copy the contents of wwwroot/Templates/GlobalApparel folder to the new folder created called
wwwroot/Templates/Contoso. As mentioned earlier this folder would contain three folders called CSS,
images & Views.
8
Refer Hitachi Solutions Ecommerce Installation Manual for instructions on how to get a working Ecommerce
Storefront.

20
a. Each Theme contains three folders called CSS, images & Views.
b. CSS folder contains the stylesheet for the chosen theme.
c. Images folder contains the imagery required by CSS.
d. Views folder contains the HTML templates and widgets that have been customized for the
chosen theme.
4. Modify Combres.xml - Hitachi Solutions Ecommerce uses a file wwwroot/App_Data/Combres.xml to
create sets of multiple Javascript & CSS files. Since we have created our own CSS & HTML files, we need to
tell Combres.xml the location of our new files. Given below is the relevant screenshot from Combres.xml.
a. All resource sets with the name prefixed with GlobalApparel should be copied & pasted just
below this section.
b. Change name of the copied resourceSet by modifying prefix “GlobalApparel” to “Contoso”.
c. All references to ~/Templates/GlobalApparel/… need to be modified to ~/Templates/Contoso/…
d. Open the master templates located in wwwroot/Templates/Contoso/Views/shared/. In each
template file modify the Combres Set Reference to the new name by replacing the word
GlobalApparel with Contoso. The line to be edited is shown as highlighted below. Make sure that

21
this change is made across all Master Templates located in
wwwroot/Templates/Contoso/Views/shared/ folder.
5. Goto your Hitachi Solutions Ecommerce Manager Panel & goto Basic Settings -> Settings -> Store Setup
and change “Store Theme” field to Contoso. The field is shown below.
6. Refresh the home page of your store front. It would look like Global Apparel Store Front & would be fully
operational.
7. At this point you have created your own theme though it is identical to Global Apparel Theme provided by
Hitachi Solutions Ecommerce.
12. CUSTOMIZING THEMES – MODIFYING SKIN CSS FILES
Congratulations! Now that you have created your own Theme – some of the very first changes you would do
involve CSS modifications. Manipulating the Skin via CSS files is a very effective & efficient way to customize the
theme.
Hitachi Solutions Ecommerce has lots of functionality built
into variety of HTML templates & HTML widgets. Until you get
fairly experienced with all Hitachi Solutions Ecommerce
Templates & Widgets, it would be best to start with existing
CSS files & modify them as per your requirements.
CSS files are arranged with a numbered naming convention.
Each number has explanation as given below:
 1 is Core CSS used across the site. Common elements
such as hyperlinks, font styling etc is contained here.
 2 is CSS required by Home Page HTML Template.
 3 is CSS required by Other Category Page HTML
Templates. There can be multiple templates &
corresponding CSS files.
 4 is CSS required by Product Detail Page HTML

22
Template. There can be multiple product detail page templates & corresponding CSS files.
 5 is CSS required by Checkout & Quick Order Entry Pages.
 6 is CSS required by My Account Section.
Note that the CSS file names do not have to match the template name. These names can be whatever you want as
long as they are referred correctly in Combres.xml file explained in Section 11. For making them intuitive, standard
Hitachi Solutions Ecommerce CSS files use template names.
If you do start working with existing CSS and images, you should download and install a tool like Firebug plug-in
(http://getfirebug.com/whatisfirebug ) for Firefox, which will help you see which CSS is controlling the display of
each HTML element on the page. As you make changes to your theme files & save them in
wwwroot/Templates/Contoso/ folder, these changes would be immediately reflected on your store front.
13. CUSTOMIZING THEMES – MODIFY HTML LAYOUT
There would be situations where the existing HTML layout may not fit your business requirements & you would
want to change the HTML layout of the existing pages. As explained earlier in Structure & Content, layouts or
HTML Structure is maintained separately than actual HTML Content. That makes changing HTML Structure or
Layout a breeze.
HTML Structure is contained in two sets of files – Master Templates & HTML Templates (assigned to Category or
Product)
MODIFYING MASTER TEMPLATES
Master Templates are HTML layout files that impact a full section of the site. This is helpful since there are many
common areas such as header, footer & any common navigation that can be easily managed by modifying Master
Templates.
Master Templates are located in wwwroot/Templates/[Your Template Name]/Views/shared folder. All Master
Templates have an extension .master. Each Master Template file is HTML file sprinkled with some directives within
<% %>. These would appear as shown below. These directives are instructions to the Ecommerce platform to do a
specific task for the HTML.
<%@ Import Namespace="Hitachi.Ecommerce.Web.Store.ViewHelper" %>
These directives are also used to include other templates or widgets as explained earlier in Widget Invocation &
Embedding Chapter. You should be changing only the directives that embed a page or a widget & not others. All
HTML Templates have a heading on top explaining what the HTML template does & some details of the HTML
Structure or Content. Global Apparel Catalog Master Template header is shown below as an example.

23
Individual master files & their purpose is explained below.
S. No. Master File Name Explanation
1. Account.Master This files lays out all pages used in My Account with the exception of Login &
Registration Page
2. Catalog.Master This master template defines the master layout for all the catalog pages. This
includes home page, category, product & search pages that make up the store
front catalog.
3. Checkout.Master This master template defines the master layout for all the checkout pages &
quick order entry page.
4. MasterTemplate.Master This master template defines the master layout for Virtual Pages & Error
Handler page.
5. Popup.Master This master template defines the master layout for popup pages – send to
friend, send wish list to friend, print order & print invoice page.
6. Profile.Master This master template defines the master layout for Login, Registration &
Forgot Password Page.
7. QuickView.Master This master template defines the layout for all Quick View Product Templates.
Based on your requirements you can edit the master template HTML layout.
MODIFYING CATEGORY & PRODUCT TEMPLATES

24
Hitachi Solutions Ecommerce allows you to control landing page of each category, product & search results via its
own HTML templates. You can assign HTML templates to these products or categories in Hitachi Solutions
Ecommerce Manager Panel.
Shown below is the screenshot where you can assign catalog to individual categories:
All the product and category HTML templates are located in wwwroot/Views/ folder. Category templates are
available in wwwroot/Views/category folder. Similarly product templates are located in wwwroot/Views/product
folder. Article Templates are available in wwwroot/Views/article folder.
All templates have a prefix “html_c_” in their file names. wwwroot/Views folder is the base package for all html
templates used across all themes. If you want to change a HTML template or create a new template you can copy
the template from wwwroot/Views/ to wwwroot/Templates/[Theme Name]/Views as shown below.
wwwroot/Views/ wwwroot/Templates/[Theme Name]/Views
+ product/ + product/
+ category/ + category/
Ensure that the folder structure within /Views/ folder remains same between base folder & template folder. As
long as you copy the files at exactly the same location, you would be able to customize the HTML templates as per
your needs.
If you need to add new templates, those templates can be added wwwroot/Templates/[Theme Name]/Views/
folder and then assigned to individual categories or templates.
14. CUSTOMIZING GUIDELINES
There are certain customization guidelines that you need to follow to ensure that your store front remains
upgradable without any significant efforts:
1. As a general thumb rule, do not modify any existing file provided by standard Hitachi Solutions Ecommerce
Product. All of your CSS & HTML work should be done in new files as explained earlier.
2. Follow the same naming conventions as have been followed by existing Themes. This makes your theme
comply with existing standards, making utilizing future themes easier.
3. While working with HTML Templates, do not modify any jQuery scripts unless you have experience with
jQuery.
4. While editing HTML or CSS, do not change HTML element id names or CSS class names – these names are used

25
by jQuery framework. Changing these names may introduce bugs. You can always add new IDs or new CSS
Class Names.

Hitachi Solutions Ecommerce Store Front Designer Guide

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Similaire à Hitachi Solutions Ecommerce Store Front Designer Guide

Similaire à Hitachi Solutions Ecommerce Store Front Designer Guide (20)

Plus de Hitachi Solutions America, Ltd.

Plus de Hitachi Solutions America, Ltd. (14)

Dernier

Dernier (20)

Hitachi Solutions Ecommerce Store Front Designer Guide