1 / 47

SYSPRO CyberStore

SYSPRO CyberStore. Design & Configuration. Who …. Administrator: A designee from your company who is responsible for configuring, and overseeing the overall availability and settings for your online store

gad
Download Presentation

SYSPRO CyberStore

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. SYSPRO CyberStore Design & Configuration

  2. Who … • Administrator: A designee from your company who is responsible for configuring, and overseeing the overall availability and settings for your online store • Manager: A webmaster. A designee from your company who is responsible for the day-to-day maintenance and customer service of the web store • Designer: The person or persons charged with creating and updating: the look and feel of the website experience

  3. Key Design & Configuration Roles • Design • Design overall look and feel for web presence • Build site graphical elements • Establish style guidelines used for formatting page elements • Establish user path through the site • Determine where controls on a page are located • Configuration • Create HTML Templates • Code Controls within Templates • Edit site Configuration file(s)

  4. Key Design Terminology • Page • A web site page of the online store in the e-Commerce System • Page Engine • Application utilized by the e-Commerce System to pull data from multiple locations and render the site pages. • Style • The Look and Feel or formatting of page elements • Control • Controls provide all the functionality of the online store • Examples: • Hot Buy • Featured Item • Content • Product Search • Category Menu • Placeholder • A snippet of code used in pages to indicate where a control is placed

  5. Some Default Pages • Home Page • Search Results Page • Category List Page • Sub Category List Page • Item Detail Page • Registration Pages • Shopping Cart Page • myAccount Page • Login page • Check Out Pages • Printable Receipt Page • Order History Page

  6. Default SitePage Diagram

  7. Design Options • Pre-designed Templates • “Classic” • “Redeye” • “Green Acres” • “Caramel” • Your own Design • Create your own template using standard web tools • HTML • Flash • CSS

  8. Template 1: “Classic”

  9. Template 2: “Caramel”

  10. Template 3: “RedEye”

  11. Template 4: “Green Acres”

  12. Site Control Tour

  13. Configuring Pages & Controls

  14. Introducing SitePages.config • XML Formatted Definition File • Creates page structures • Defines Controls to Utilize • Sets Control Options • Easily Editable Text Format • Changes take effect instantly

  15. Site Configuration – File Locations • Theme File Location • Site Content File Location • Item Images File Location • Default CSS File Location • Error Log File Location • Site Configuration

  16. Site Configuration – Change Site Theme • Run inetmgr • Open Ecommerce Virtual • Select “Site” Directory • Right-click Properties • Virtual Directory Tab • Change “Local Path:” to new YourCompanySite directory

  17. Site Configuration Files • Program Files C:\Program Files\Dovetail\e-Commerce System\ECommerce • System dependant files; should not be edited

  18. Web Files • Theme File Root C:\Program Files\Dovetail\e-Commerce System\YourCompanySite • Customizable theme files • SitePages.Config C:\Program Files\Dovetail\e-Commerce System\YourCompanySite\xml\SitePages.config • Theme Pages C:\Program Files\Dovetail\e-Commerce System\YourCompanySite\Themes • Homepage Theme - EcomHomeTheme.ascx • Insidepage Theme - EcomTheme.ascx • Order Display Theme - EcomThemeOrderDisplay.ascx • Print Order Theme - EcomThemePrintableView.ascx • Blank Theme - EcomBlankTheme.ascx • Cascading Style Sheets C:\Program Files\Dovetail\e-Commerce System\YourCompanySite\Themes\css • Theme Images C:\Program Files\Dovetail\e-Commerce System\YourCompanySite\Themes\images

  19. Templates • Template 1 “Classic” C:\Program Files\Dovetail\e-Commerce System\OutdoorsSite\Template1 • Template 2 “Caramel” C:\Program Files\Dovetail\e-Commerce System\OutdoorsSite\Template2 • Template 3 “Red Eye” C:\Program Files\Dovetail\e-Commerce System\OutdoorsSite\Template3 • Template 4 “Green Acres” C:\Program Files\Dovetail\e-Commerce System\OutdoorsSite\Template4

  20. Item Images • Photo 1 C:\Program Files\Dovetail\e-Commerce System\YourCompanySite\images\photo1 • Photo 2 C:\Program Files\Dovetail\e-Commerce System\YourCompanySite\images\photo2 • Category Photo C:\Program Files\Dovetail\e-Commerce System\YourCompanySite\images\photo1

  21. SitePages.config Structure <SitePages> <Page> <PlaceHolder> <Control> </PlaceHolder> </Page> </SitePages>

  22. SitePages.Config Sample <Page FileName="default.aspx" Themesrc="EcomHomeTheme.ascx" ThemeCss="site/themes/css/DECTHEHome.css“ RequireSSL="false"> <PlaceHolder ctrlID="RightColumnA"> <Control src="CatalogContentDisplayControl.ascx" Name="Content Display" FileLocation="HomepageWelcome.htm" /> <Control src="CatalogCategoryNavigationControl.ascx" Name="MenuList" /> </PlaceHolder> <PlaceHolder ctrlID="RightColumnB"> <Control src="CatalogSearchControl.ascx" Name="Item Search" /> </PlaceHolder> <PlaceHolder ctrlID="ContentArea"> <Control src="CatalogHotbuyControl.ascx" PhotoWidth="100" NumberOfItemsToDisplay="2" LimitedAvailableMessage ="In Stock" UnlimitedAvailableMessage ="In Stock" /> <Control src="CatalogContentDisplayControl.ascx" FileLocation="Disclaimer.htm" /> </PlaceHolder> </Page>

  23. SitePages.Config Sample - Edited <Page FileName="default.aspx" Themesrc="EcomHomeTheme.ascx" ThemeCss="site/themes/css/DECTHEHome.css“ RequireSSL="false"> <PlaceHolderctrlID="RightColumnA"> <Control src="CatalogSearchControl.ascx" Name="Item Search" /> <Control src="CatalogContentDisplayControl.ascx" Name="Content Display" FileLocation="HomepageWelcome.htm" /> <Control src="CatalogCategoryNavigationControl.ascx" Name="MenuList" /> </PlaceHolder> <PlaceHolderctrlID="RightColumnB"> </PlaceHolder> <PlaceHolderctrlID="ContentArea"> <Control src="CatalogHotbuyControl.ascx" PhotoWidth="300" NumberOfItemsToDisplay="1" LimitedAvailableMessage ="In Stock" UnlimitedAvailableMessage ="In Stock" /> <Control src="CatalogContentDisplayControl.ascx" FileLocation="Disclaimer.htm" /> </PlaceHolder> </Page>

  24. Formatting With CSS

  25. About CSS • CSS = Cascading Style Sheet • style sheets when attached to documents describe how the document is displayed or printed, e.g. a CSS sheet is attached to an HTML document, to influence its layout when accessed via a browser • defining a style sheet allows you to set formatting properties and apply it to specific areas within an HTML page • Over 200 pre-defined style sheets have been included in SYSPRO e-Commerce

  26. Typical CSS Properties • Font Style • Text Size • Text Color • Backgrounds • Alignment • Spacing • Borders • Table Structure

  27. Example: Featured Item Styles

  28. A .CSS file Structure #StyleName { Property1:value(s); Property2:value(s); Property3:value(s); Property4:value(s); }

  29. e-Commerce System CSS Sample .CatalogFeaturedItemProductHeadline { font-family: 'Arial, Helvetica'; font-size: 14px; font-weight: bold; COLOR: #E41E1E; text-align: left; } .CatalogFeaturedItemProductSubHeadline { font-family: 'Arial, Helvetica'; font-size: 13px; font-weight: normal; COLOR: #F7CB05; text-align: left; }

  30. e-Commerce System CSS Sample - Edited .CatalogFeaturedItemProductHeadline { font-family: 'Times New Roman'; font-size: 24px; font-weight: bold; COLOR: #E41E1E; text-align: left; } .CatalogFeaturedItemProductSubHeadline { font-family: 'Arial, Helvetica'; font-size: 19px; font-weight: normal; COLOR: #000000; text-align: left; }

  31. Customizing Controls

  32. About Controls • Contain HTML and ASP code snippets • Located in /Ecommerce/Control Folder • Can create Site Specific Versions • Can Modify for Layout and Labels

  33. Control Sample • CheckOutShippingOptions.ascx

  34. Control Sample <%@ Control Language="c#" AutoEventWireup="false" Codebehind="CheckOutShippingOptions.ascx.cs" Inherits="Dovetail.Ecommerce.Control.CheckOutShippingOptions" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %> <script language=javascript type=text/javascript> function textCounter( field, maxlimit ) { if ( field.value.length >= maxlimit ) { field.value = field.value.substring( 0, maxlimit ); alert( 'There is a '+ maxlimit + ' character limit.' ); return false; } else { //countfield.value = maxlimit - field.value.length; } } </script> <P><asp:label id="messageLabel" CssClass="ValidationMessage" runat="server"></asp:label></P> <TABLE class="DefaultTable" id="Table1" style="WIDTH: 477px; HEIGHT: 154px" cellSpacing="1" cellPadding="1" width="477"> <TR> <TD class="FormLabel" style="WIDTH: 184px">Select&nbsp;Shipping Method: </TD> <TD><asp:dropdownlist id="shpmethodsDropDownList" CssClass="FormSelect" runat="server"></asp:dropdownlist><asp:label id="shpoptionLabel" CssClass="FormLabel" runat="server"></asp:label></TD> </TR> <TR> <TD class="FormLabel" style="WIDTH: 184px">Special Instructions(optional):</TD> <TD><asp:textbox id="specialinstructionsTextBox" CssClass="FormTextArea" runat="server" MaxLength="30" Width="266px" Rows="5"></asp:textbox></TD> </TR> <TR id="OrderCommentsRow" runat="server"> <TD class="FormLabel" id="OrderCommentsLabel" style="WIDTH: 184px" vAlign="top" runat="server">Order Comments (optional):</TD> <TD><asp:textbox id="OrderHeaderCommentsTextBox" CssClass="FormTextArea" runat="server" MaxLength="30" Width="266px" Rows="5" TextMode="MultiLine"></asp:textbox></TD> </TR> <TR> <TD class="FormButtonMatte" colSpan="2"><asp:button id="continueButton" CssClass="FormButtonAlternate" runat="server" Text="Continue"></asp:button><asp:button id="cancelorderButton" CssClass="FormButtonAlternate" runat="server" Text="Cancel"></asp:button></TD> <TD></TD> </TR> </TABLE>

  35. Editing a Control <TABLE class="DefaultTable" id="Table1" style="WIDTH: 477px; HEIGHT: 154px" cellSpacing="1" cellPadding="1" width="477"> <TR> <TD class="FormLabel" style="WIDTH: 184px">Select&nbsp;Shipping Method: </TD> <TD><asp:dropdownlist id="shpmethodsDropDownList" CssClass="FormSelect" runat="server"></asp:dropdownlist><asp:label id="shpoptionLabel" CssClass="FormLabel" runat="server"></asp:label></TD> </TR> <TR> <TD class="FormLabel" style="WIDTH: 184px">Special Instructions(optional):</TD> <TD><asp:textbox id="specialinstructionsTextBox" CssClass="FormTextArea" runat="server" MaxLength="30" Width="266px" Rows="5"></asp:textbox></TD> </TR> <TR id="OrderCommentsRow" runat="server"> <TD class="FormLabel" id="OrderCommentsLabel" style="WIDTH: 184px" vAlign="top" runat="server">Order Comments (optional):</TD> <TD><asp:textbox id="OrderHeaderCommentsTextBox" CssClass="FormTextArea" runat="server" MaxLength="30" Width="266px" Rows="5" TextMode="MultiLine"></asp:textbox></TD> </TR> <TR> <TD class="FormButtonMatte" colSpan="2"><asp:button id="continueButton" CssClass="FormButtonAlternate" runat="server" Text="Continue"></asp:button><asp:button id="cancelorderButton" CssClass="FormButtonAlternate" runat="server" Text="Cancel"></asp:button></TD> <TD></TD> </TR> </TABLE>

  36. Editing a Control <TABLE class="DefaultTable" id="Table1" style="WIDTH: 477px; HEIGHT: 154px" cellSpacing="1" cellPadding="1" width="477"> <TR> <TD class="FormLabel" style="WIDTH: 184px">Select&nbsp;Shipping Method: </TD> <TD><asp:dropdownlist id="shpmethodsDropDownList" CssClass="FormSelect" runat="server"></asp:dropdownlist><asp:label id="shpoptionLabel" CssClass="FormLabel" runat="server"></asp:label></TD> </TR> <TR> <TD class="FormLabel" style="WIDTH: 184px">Shipping Requirements:</TD> <TD><asp:textbox id="specialinstructionsTextBox" CssClass="FormTextArea" runat="server" MaxLength="30" Width="266px" Rows="5"></asp:textbox></TD> </TR> <TR id="OrderCommentsRow" runat="server"> <TD class="FormLabel" id="OrderCommentsLabel" style="WIDTH: 184px" vAlign="top" runat="server">Order Comments (optional):</TD> <TD><asp:textbox id="OrderHeaderCommentsTextBox" CssClass="FormTextArea" runat="server" MaxLength="30" Width="266px" Rows="5" TextMode="MultiLine"></asp:textbox></TD> </TR> <TR> <TD class="FormButtonMatte" colSpan="2"><asp:button id="continueButton" CssClass="FormButtonAlternate" runat="server" Text="Continue"></asp:button><asp:button id="cancelorderButton" CssClass="FormButtonAlternate" runat="server" Text="Cancel"></asp:button></TD> <TD></TD> </TR> </TABLE>

  37. Editing a Control

  38. Questions?

More Related