Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Hitachi Solutions Ecommerce Store Front Designer Guide

This is Hitachi Solutions Ecommerce's store front designer guide.

  • Identifiez-vous pour voir les commentaires

  • Soyez le premier à aimer ceci

Hitachi Solutions Ecommerce Store Front Designer Guide

  1. 1. 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
  2. 2. 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
  3. 3. 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
  4. 4. 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.
  5. 5. 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.
  6. 6. 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.
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. 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 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
  12. 12. 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
  13. 13. 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.
  14. 14. 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/
  15. 15. 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.
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. 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.
  20. 20. 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 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.
  21. 21. 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
  22. 22. 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
  23. 23. 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.
  24. 24. 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
  25. 25. 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
  26. 26. 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.

×