E-Commerce: Theming your site Best practices and tips on theming E-Commerce Intermediate. Mike Poling & Erin Gannon

Size: px

Start display at page:

Download "E-Commerce: Theming your site Best practices and tips on theming E-Commerce Intermediate. Mike Poling & Erin Gannon"

Rodney Morris
5 years ago
Views:

1 Best practices and tips on theming E-Commerce Intermediate Mike Poling & Erin Gannon

2 Objectives This class will: Give you a better understanding of the architecture of E-Commerce Teach some basic editable areas in E-Commerce Show you how to customize your while keeping your markup clean. Give you a basic understanding of selectors Show you some possibilities that you may not have been aware of. 2

3 Seminar Demo Sites Your Seminar installation includes 4 complete E-Commerce s this year Four different industry examples are now represented: Ski Museum Attractions Transportation Keep these s as reference examples as to how they these themes were executed 3

4 Getting Started Make a backup!! Editing Tools Microsoft Visual Studio Adobe Dreamweaver Notepad ++ Firebug Pixlr Reference s 4

5 Using the Admin Panel for Theming Use well designed banners to tie the theme together The image carousel and help_info can be utilized to for theming (if you reference images or video be sure it is local or https) LongItemDescriptions Thumbnails Custom XSLT view Open XMLFiles/XSLT/items0.xslt To view available fields, set a node in the admin panel to XSLT-Test 5

6 Which files can I edit? Preserve the default files as much as possible for easy updating 6

7 Copies & Overrides Copied Files.master files AppThemes/ThemeName Overrides CSS files Copy the original, and rename descriptively Ex. MasterPageMike.master Create a new file appending -override to the original style sheet name Ex. style-override.css 7

8 Comments and UpdateReadMe.txt UpdateReadMe.txt should be included into your root folder if you have made an changes to any of the.aspx files Comments should also wrap around the markup that you included so that they can be easily identified. <!--///////// -- Begin Hidden Field -- ////////////-> <asp:hiddenfield id= HiddenField /> <!--///////// -- End Hidden Field -- ////////////-> 8

9 MasterPages, how do they work? The masterpage acts as a template to hold common markup across pages. Desktop, Mobile & Responsive Copy the masterpage.master and rename descriptively Use the admin panel to assign the correct theme or masterpage. The aspx pages are loaded into the <contentplaceholder> tags. 9

10 Editing Markup Do not add any markup inside the contentplaceholder MasterPage, Header and Footer can be edited (preferably only master) Do not edit any Server-Side code (<asp: ) Do not delete any Server- Side code - if you want to hide a server-side element, wrap a div around it and set the style to (display:none) 0

11 AppThemes, how do they work? AppThemes folders hold the css, fonts & images for the assigned theme Any CSS file in the assigned theme folder will be included into the page at runtime You can create as many themes as you like and assign them via the Admin Panel The sirius and sirius_mobile themes are there to copy, template.

12 Style.css and Style-override.css Css is loaded from the AppThemes alphabetically. The css file that loads last will override any of the same classes that are loaded first. Create a new, empty file named style-override.css. Only include the classes that you want to override. (we have boilerplate style-override.css by request) The previous class is still read, if you want to override it, you must give it a value, even it if is none. Ex. body{background:none} Style.css is organized with comments /* --- COLUMNS AND WIDTHS */ You should also comment the additions you make to styleoverride.css as well. 2

13 Style-override.css & Firebug Firebug is a Firefox plug-in for web developers. Easily finds selectors, css classes, highlights DOM elements and allows you to preview changes in real-time. 3

14 And now for a quick CSS tutorial body{ background:#fff; } #ILCalendar{ display:none; } ul li.thumbli a img.thumbimage { display:block; background:red; color:#fff; }. prcnt67 { width:960px } 4

15 Mobile.css and Mobile-override.css Mobile.css is responsive. It will adjust to the screen resolution. If you want to style the different breakpoints, the breakpoints must be copied into mobile-override.css 5

16 jquery and Page Includes Page includes can be used to dynamically assign client-side script files to specific pages. It is usually best to assign them to Foot Ask about the Script Library Open the Admin Panel and click Page Includes (configure to move itemlist-replace.js to the foot) Open scripts/customplugins/itemlist-replace.js Like CSS, jquery also uses selectors Use FireBug to locate the selectors. 6

17 Anatomy of a simple jquery function $(document).ready(function () { }); $("#ILDataGrid").hide(); 7

18 Move an element $(document).ready(function () { }); $("#ILCalendar").appendTo("#ILDataGrid"); 8

19 Events $('#ILDataGrid').mouseover(function() { $(this).hide(); }); 9

20 jquery Resources stackoverflow.com 2 0

21 Please fill out the course evaluations provided. Your opinion matters and helps us provide the best seminar experience possible. Mike Poling & Louis Aguila

5 Snowdonia. 94 Web Applications with C#.ASP

5 Snowdonia. 94 Web Applications with C#.ASP 94 Web Applications with C#.ASP 5 Snowdonia In this and the following three chapters we will explore the use of particular programming techniques, before combining these methods to create two substantial