hitachi solutions ecommerce store front designer guide

26
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

Upload: hitachi-solutions-america-ltd

Post on 06-Jan-2017

113 views

Category:

Software


1 download

TRANSCRIPT

Page 1: 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

Page 2: Hitachi Solutions Ecommerce Store Front Designer Guide

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

Page 3: Hitachi Solutions Ecommerce Store Front Designer Guide

Hitachi Solutions Ecommerce Store Front Designer Guide

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

Page 4: Hitachi Solutions Ecommerce Store Front Designer Guide

Hitachi Solutions Ecommerce Store Front Designer Guide

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.

Page 5: Hitachi Solutions Ecommerce Store Front Designer Guide

Hitachi Solutions Ecommerce Store Front Designer Guide

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.

Page 6: Hitachi Solutions Ecommerce Store Front Designer Guide

Hitachi Solutions Ecommerce Store Front Designer Guide

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.

Page 7: Hitachi Solutions Ecommerce Store Front Designer Guide

Hitachi Solutions Ecommerce Store Front Designer Guide

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

Page 8: Hitachi Solutions Ecommerce Store Front Designer Guide

Hitachi Solutions Ecommerce Store Front Designer Guide

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

Page 9: Hitachi Solutions Ecommerce Store Front Designer Guide

Hitachi Solutions Ecommerce Store Front Designer Guide

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

Page 10: Hitachi Solutions Ecommerce Store Front Designer Guide

Hitachi Solutions Ecommerce Store Front Designer Guide

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

Page 11: Hitachi Solutions Ecommerce Store Front Designer Guide

Hitachi Solutions Ecommerce Store Front Designer Guide

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 wwwroot\Views\category\html_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

Page 12: Hitachi Solutions Ecommerce Store Front Designer Guide

Hitachi Solutions Ecommerce Store Front Designer Guide

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

Most Popular Products

Featured Products

Static Content

Page 13: Hitachi Solutions Ecommerce Store Front Designer Guide

Hitachi Solutions Ecommerce Store Front Designer Guide

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.

Page 14: Hitachi Solutions Ecommerce Store Front Designer Guide

Hitachi Solutions Ecommerce Store Front Designer Guide

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/

Page 15: Hitachi Solutions Ecommerce Store Front Designer Guide

Hitachi Solutions Ecommerce Store Front Designer Guide

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.

Page 16: Hitachi Solutions Ecommerce Store Front Designer Guide

Hitachi Solutions Ecommerce Store Front Designer Guide

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.

Most Popular Products

Featured Products

Static Content

Featured Products

Page 17: Hitachi Solutions Ecommerce Store Front Designer Guide

Hitachi Solutions Ecommerce Store Front Designer Guide

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

Page 18: Hitachi Solutions Ecommerce Store Front Designer Guide

Hitachi Solutions Ecommerce Store Front Designer Guide

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

Page 19: Hitachi Solutions Ecommerce Store Front Designer Guide

Hitachi Solutions Ecommerce Store Front Designer Guide

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.

Page 20: Hitachi Solutions Ecommerce Store Front Designer Guide

Hitachi Solutions Ecommerce Store Front Designer Guide

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 wwwroot\Templates 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 wwwroot\App_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.

Page 21: Hitachi Solutions Ecommerce Store Front Designer Guide

Hitachi Solutions Ecommerce Store Front Designer Guide

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

Page 22: Hitachi Solutions Ecommerce Store Front Designer Guide

Hitachi Solutions Ecommerce Store Front Designer Guide

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

Page 23: Hitachi Solutions Ecommerce Store Front Designer Guide

Hitachi Solutions Ecommerce Store Front Designer Guide

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.

Page 24: Hitachi Solutions Ecommerce Store Front Designer Guide

Hitachi Solutions Ecommerce Store Front Designer Guide

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

Page 25: Hitachi Solutions Ecommerce Store Front Designer Guide

Hitachi Solutions Ecommerce Store Front Designer Guide

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

Page 26: Hitachi Solutions Ecommerce Store Front Designer Guide

Hitachi Solutions Ecommerce Store Front Designer Guide

25

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

Class Names.