• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Pinnacle Cart Design documentation v1.0
 

Pinnacle Cart Design documentation v1.0

on

  • 324 views

Pinnacle Cart Design Documentation

Pinnacle Cart Design Documentation

Statistics

Views

Total Views
324
Views on SlideShare
324
Embed Views
0

Actions

Likes
0
Downloads
5
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Pinnacle Cart Design documentation v1.0 Pinnacle Cart Design documentation v1.0 Document Transcript

    • © 2011 Desert Dog Marketing, LLCPinnacle Cart CoreDesign Manualhttp://www.pinnaclecart.com/Shopping Cart
    • All rights reserved. No parts of this work may be reproduced in any form or by any means - graphic, electronic, ormechanical, including photocopying, recording, taping, or information storage and retrieval systems - without thewritten permission of the publisher.Products that are referred to in this document may be either trademarks and/or registered trademarks of therespective owners. The publisher and the author make no claim to these trademarks.While every precaution has been taken in the preparation of this document, the publisher and the author assume noresponsibility for errors or omissions, or for damages resulting from the use of information contained in this documentor from the use of programs and source code that may accompany it. In no event shall the publisher and the author beliable for any loss of profit or any other commercial damage caused or alleged to have been caused directly orindirectly by this document.Printed: July 2011Pinnacle Cart Core Design Manual© 2011 Desert Dog Marketing, LLCPublisherManaging EditorTechnical EditorsDesert Dog Marketing, LLCMike RoseMike RoseSebi NievasKyle Weiskopfhttp://www.pinnaclecart.com/
    • 3Contents3© 2011 Desert Dog Marketing, LLCTable of Contents0Part I Introduction 6................................................................................................................................... 61 Overview................................................................................................................................... 72 Languages usedPart II Framework 11................................................................................................................................... 111 Base template folder................................................................................................................................... 122 Prebuilt template folder................................................................................................................................... 133 Custom template folder................................................................................................................................... 134 Compiled folderPart III Important notes before you start 15................................................................................................................................... 151 Rebuilding skin cache.......................................................................................................................................................... 15Rebuild via Design Mode.......................................................................................................................................................... 16Rebuild via Dev Mode................................................................................................................................... 182 Suggested pathing................................................................................................................................... 193 Working around Smarty................................................................................................................................... 204 Files to not touchPart IV Building a custom template 22................................................................................................................................... 221 Creating the file structure................................................................................................................................... 232 Creating the skin.xml................................................................................................................................... 253 Where to go from herePart V Useful Tools 28................................................................................................................................... 281 Design tools................................................................................................................................... 282 Page speed checkers................................................................................................................................... 283 CSS compliance tools................................................................................................................................... 284 HTML validation tools................................................................................................................................... 285 Language editorPart VI Appendix 31................................................................................................................................... 311 Examples downloads................................................................................................................................... 312 Skin.xml data................................................................................................................................... 333 Example template layouts................................................................................................................................... 384 CSS reference list................................................................................................................................... 555 Default skin imageshttp://www.pinnaclecart.com/
    • Pinnacle Cart Core Design Manual4© 2011 Desert Dog Marketing, LLC0http://www.pinnaclecart.com/
    • IntroductionIhttp://www.pinnaclecart.com/
    • Pinnacle Cart Core Design Manual6© 2011 Desert Dog Marketing, LLC1 IntroductionWelcome to the Pinnacle Cart design documentation for cart versions 3.7 and above. Within thisdocument we will cover the core principles behind the templating system, how the skinsthemselves are structured, how to construct your own skin, as well provide key things to knowwhen building the skins and also some tools that will assist in the skin creation. It is the intent ofthis documentation to be used by designers who do not wish to use "Design Mode" to create theirskins and strictly plan on using raw file editing and/or managing. We strongly encourage that youcommit to this method 100% to prevent any conflicts that can occur, which we will touch on laterin this document.1.1 OverviewThe templating engine is built around the concept of being able to push core changes to the skintemplates during an update/upgrade without interrupting the design that has been created. Toachieve this, we have created a tiered or "layered" design platform that compiles into one finalskin by essentially stacking on top of each other and getting pushed into a final compilationdirectory.The primary folders used to achieve this are the following:Base template folder: contentenginedesignPrebuilt template folder: contentskins(Prebuilt template name)Custom template folder: contentskins_customCompiled folder: contentcacheskins(Custom template name)The first three skins get layered on top of each other during compilation of the skin then getsaved into the contentcacheskins(Prebuilt template name) folder where (Prebuilt templatename) is equal to the name of your active skin. An example name would look likecontentcacheskinsSimpleGreen . In this process the core design is pulledfrom contentenginedesign then any changes from contentskins(Prebuilt template name)are added on top with a higher priority. After this occurs, any changes fromcontentskins_custom are then added as the final layer with the highest priority and theresulting skin files are then fully published into contentcacheskins(Prebuilt template name)which is what the end user will see. Below is are more visual examples of how this would workwith any files and/or elements:Example ABase says header isgrayPrebuilt says header istealCustom says header ispinkHeader is pink due toCustom having highestpriorityhttp://www.pinnaclecart.com/
    • Introduction 7© 2011 Desert Dog Marketing, LLCExample BBase says header isgrayPrebuilt says header istealCustom does notdeclare a new colorHeader is teal due toPrebuilt having nexthighest priorityExample CBase says header isgrayPrebuilt does notdeclare a new colorCustom says header ispinkHeader is pink due toCustom having highestpriorityExample DBase says header isgrayPrebuilt does notdeclare a new colorCustom does notdeclare a new colorHeader is gray sincePrebuilt and Customdid not have input1.2 Languages usedWhile the templates are generically css and html based, there are a few other languages as well as atemplating engine being utilized to create the look and feel of the Pinnacle Cart application.Below is a summary of the technologies being used in the cart:HTML - Stands for HyperText Markup Language, is the predominant markup language for web pages.HTML is the basic building-blocks of webpages.HTML is written in the form of HTML elements consisting of tags, enclosed in angle brackets (like<html>), within the web page content. HTML tags normally come in pairs like <h1> and </h1>. The firsttag in a pair is the start tag, the second tag is the end tag (they are also called opening tags andclosing tags). In between these tags web designers can add text, tables, images, etc.The purpose of a web browser is to read HTML documents and compose them into visual or audibleweb pages. The browser does not display the HTML tags, but uses the tags to interpret the content ofthe page.http://www.pinnaclecart.com/
    • Pinnacle Cart Core Design Manual8© 2011 Desert Dog Marketing, LLCHTML elements form the building blocks of all websites. HTML allows images and objects to beembedded and can be used to create interactive forms. It provides a means to create structureddocuments by denoting structural semantics for text such as headings, paragraphs, lists, links, quotesand other items. It can embed scripts in languages such as JavaScript which affect the behavior ofHTML webpages.Web browsers can also refer to Cascading Style Sheets (CSS) to define the appearance and layout oftext and other material. The W3C, maintainer of both the HTML and the CSS standards, encouragesthe use of CSS over explicitly presentational HTML markup.For more information on HTML please see http://en.wikipedia.org/wiki/HtmlCSS - Cascading Style Sheets (CSS) is a style sheet language used to describe the presentationsemantics (the look and formatting) of a document written in a markup language. Its most commonapplication is to style web pages written in HTML and XHTML, but the language can also be applied toany kind of XML document, including plain XML, SVG and XUL.CSS is designed primarily to enable the separation of document content (written in HTML or a similarmarkup language) from document presentation, including elements such as the layout, colors, andfonts. This separation can improve content accessibility, provide more flexibility and control in thespecification of presentation characteristics, enable multiple pages to share formatting, and reducecomplexity and repetition in the structural content (such as by allowing for tableless web design). CSScan also allow the same markup page to be presented in different styles for different renderingmethods, such as on-screen, in print, by voice (when read out by a speech-based browser or screenreader) and on Braille-based, tactile devices. While the author of a document typically links thatdocument to a CSS style sheet, readers can use a different style sheet, perhaps one on their owncomputer, to override the one the author has specified.CSS specifies a priority scheme to determine which style rules apply if more than one rule matchesagainst a particular element. In this so-called cascade, priorities or weights are calculated andassigned to rules, so that the results are predictable.For more information on CSS please see http://en.wikipedia.org/wiki/CSSJavaScript - Also known as ECMAScript, is a prototype-based, object-oriented] scripting languagethat is dynamic, weakly typed and has first-class functions. It is also considered a functionalprogramming language like Scheme and OCaml because it has closures and supports higher-orderfunctions.JavaScript is an implementation of the ECMAScript language standard and is primarily used in theform of client-side JavaScript, implemented as part of a web browser in order to provide enhanceduser interfaces and dynamic websites. This enables programmatic access to computational objectswithin a host environment.JavaScripts use in applications outside web pages—for example in PDF documents, site-specificbrowsers and desktop widgets—is also significant. Newer and faster JavaScript VMs and frameworksbuilt upon them (notably Node.js) have also increased the popularity of JavaScript for server-side webapps.For more information on Javascript please see http://en.wikipedia.org/wiki/JavascriptXajax - xajax is an open source PHP class library implementation of AJAX that gives developers theability to create web-based Ajax applications using HTML, CSS, JavaScript, and PHP. Applicationsdeveloped with xajax can asynchronously call server-side PHP functions and update content withoutreloading the page.http://www.pinnaclecart.com/
    • Introduction 9© 2011 Desert Dog Marketing, LLCUnlike some other Ajax frameworks, xajax is designed to allow the programmer to have no priorknowledge of JavaScript.For more information on xajax please see http://en.wikipedia.org/wiki/XajaxjQuery - jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting ofHTML. It was released in January 2006 at BarCamp NYC by John Resig. Used by over 43% of the10,000 most visited websites, jQuery is the most popular JavaScript library in use today.jQuery is free, open source software, dual-licensed under the MIT License and the GNU GeneralPublic License, Version 2. jQuerys syntax is designed to make it easier to navigate a document, selectDOM elements, create animations, handle events, and develop Ajax applications. jQuery also providescapabilities for developers to create plug-ins on top of the JavaScript library. Using these facilities,developers are able to create abstractions for low-level interaction and animation, advanced effectsand high-level, theme-able widgets. This contributes to the creation of powerful and dynamic webpages.For more information on jQuery please see http://en.wikipedia.org/wiki/JqueryXML - Extensible Markup Language (XML) is a set of rules for encoding documents in machine-readable form. It is defined in the XML 1.0 Specification produced by the W3C, and several otherrelated specifications, all gratis open standards.The design goals of XML emphasize simplicity, generality, and usability over the Internet. It is a textualdata format with strong support via Unicode for the languages of the world. Although the design ofXML focuses on documents, it is widely used for the representation of arbitrary data structures, forexample in web services.Many application programming interfaces (APIs) have been developed that software developers use toprocess XML data, and several schema systems exist to aid in the definition of XML-based languages.For more information on XML please see http://en.wikipedia.org/wiki/XMLSmarty - Smarty is a web template system written in PHP. Smarty is primarily promoted as a tool forseparation of concerns. Smarty is intended to simplify compartmentalization, allowing the presentationof a web page to change separately from the back-end. Ideally, this eases the costs and effortsassociated with software maintenance.Smarty generates web content by the placement of special Smarty tags within a document. These tagsare processed and substituted with other code. Tags are directives for Smarty that are enclosed bytemplate delimiters. These directives can be variables, denoted by a dollar sign ($), functions, logicalor loop statements. Smarty allows PHP programmers to define custom functions that can be accessedusing Smarty tags.For more information on Smarty please see http://en.wikipedia.org/wiki/Smartyhttp://www.pinnaclecart.com/
    • FrameworkIIhttp://www.pinnaclecart.com/
    • Framework 11© 2011 Desert Dog Marketing, LLC2 FrameworkAs discussed earlier in this document, the templating engine compiles your template into one afterpulling from three other folders and stacking them on top of each other based upon priority. Here wewill go through the different skin folders and their primary intent in a more in depth fashion.2.1 Base template folderThe base template folder is the central design folder of which all templates are based from includingbackend design templates, email templates, template images, and of course the base skin its self.This is where any updates/upgrades to the templates will get installed during a hotfix release byPinnacle Cart. It currently is housed in the contentenginedesign folder of the default Pinnacle Cartpackage. As the base template folder is the default, unmodified design it is usually very bland inappearance if used by its self. This template folder has the lowest priority in the compilation procedureso you would never want to make any edits here, only copy the files themselves individually to be usedin the Prebuilt template folder.Below is an outline of what each folder is for and what it houses. The base path for all of these files isof course going to be contentenginedesign :images Custom skin imagesjavascript Skin javascript filesstyles Skin CSS filesstyleselements Skin CSS files for specific site elements(used by Styles Editor in Design Mode)templates Smarty templates main foldertemplatesadmin Design mode related templates.templatesemail E-mail templatestemplatesemailelements E-mail templates top and bottomtemplateslayouts Site layoutstemplateslayoutszones Main parts of site layout – site header, footer,navigation bar, side barstemplatespages Site pages templates separated by groupstemplatespagesaccount Pages related to user account – log-in, signup, profile, address book, etctemplatespagesaccountelements Common parts for account templatestemplatespagescatalog Product catalog and product search pagestemplatespagescatalogelements Elements for catalog pages such asnavigation bar, bread crumbs, page breakcontrol and product preview partstemplatespagescatalogviews Custom views for catalog pagestemplatespagescheckout Checkout-relates pageshttp://www.pinnaclecart.com/
    • Pinnacle Cart Core Design Manual12© 2011 Desert Dog Marketing, LLCtemplatespagescheckoutone-page-checkout Includes for one-page-checkouttemplatespagescheckouttraditional-checkout Includes for traditional checkouttemplatespagesgift-certificate Gift certificate pagestemplatespagesgoogle Good conversion and coupon includestemplatespagesnewsletters Newsletter subscribe / unsubscribe pagestemplatespagesproduct Product page views and elementstemplatespagesproductelements Product page peacestemplatespagesproductviews Product page views (different combinationsof product/elements)templatespagessite Common site pages (home page, site map,international settings, etc)templatespageswishlist Wish list management pagestemplatespanels Site panels such as products categories,products search box, bestsellers, etc)templatespanelsincludes Additional files for panelstemplateswrappers Site wrappers (basically wrapper createsenvironment for layout)templateswrapperselements Wrapper shared elements2.2 Prebuilt template folderThe Prebuilt template folder is where you as a designer and/or developer would want to save all ofyour content changes to. In this document we generically refer to this folder as the Prebuilt templatefolder but the actual folder its self will be what you decide to name it. Right now, this folder will alwaysbe located at contentskins(Prebuilt template name) or contentskinsMyNewSkin as an example.It uses the same folder hierarchy as the Base template folder discussed previously to house yourcustomized skin files.As an example on how to properly utilize this folder, say you wanted to edit the header.html file youwould copycontentenginedesigntemplateslayoutszonesheader.htmlintocontentskinsMyNewSkintemplateslayoutszonesheader.htmlthen go in and make your customizations to thecontentskinsMyNewSkintemplateslayoutszonesheader.html file, leaving the original one stored inthe Base template intact.This is the process you would want to consistently follow to edit mostly all of the template files.Keeping them all here will also make packaging of your skin tons easier if you plan to do things likeresell it or provide it to another Pinnacle Cart User.http://www.pinnaclecart.com/
    • Framework 13© 2011 Desert Dog Marketing, LLC2.3 Custom template folderThe Custom template folder is where the Pinnacle Cart feature of Design Mode saves all of itschanges, its current location is contentskins_custom . This folder is exclusively used by DesignMode and should never be used when creating your own design. Since it is the folder being used byDesign Mode, it gets the highest and final priority in the skin compilation process. As this is the folderThe Custom template does follow the same hierarchy as the Base template as well so in the offchance something is built or changed via Design Mode you can always grab the changed file andmove it into your skin. This fact does mean you in theory could side by side design a skin via rawediting and Design Mode but we do not recommend it in order to avoid potential complications.2.4 Compiled folderThe Compiled folder is where the compilation of the previous three templates ends up. This is thetemplate the person visiting the site will see and browse the site on. The current location for this folderis contentcacheskins(Prebuilt template name) where Prebuilt template name is equal to the name ofyour active skin. An example folder would look like contentcacheskinsMyNewSkin . This folder getswritten to every time the cart is told to recompile the templates either through entering Design Mode ornavigating through the site when devmode is active. Due to that, you will never want to save anychanges here as they will promptly get overwritten and your work will get lost unfortunately.http://www.pinnaclecart.com/
    • Important notes before youstartIIIhttp://www.pinnaclecart.com/
    • Important notes before you start 15© 2011 Desert Dog Marketing, LLC3 Important notes before you startBefore we get into template creation, we have some suggestions and rules of sorts that will make lifeeasier overall for you while making your new template. We may expand this section from time to timeso we do suggest checking back every now and then.3.1 Rebuilding skin cacheAs you build your skin, you will need to rebuild the cache folder so that you can see your changes.Within Pinnacle Cart we currently have two ways to accomplish this: entering into Design Mode andenabling Dev Mode. Both have their pros and cons which we will cover next.3.1.1 Rebuild via Design ModeTo rebuild the cart via Design Mode, youll want go through the following steps:1. Log into the admin area of your shopping cart (typically is http://www.yourdomain.tld/login.php)http://www.pinnaclecart.com/
    • Pinnacle Cart Core Design Manual16© 2011 Desert Dog Marketing, LLC2. Click on Activate Cart Designer in the Quick Links section of your admin area, located on the lefthand side.3. Once it has loaded, youll then simply hit the Exit button, located in the bottom right hand corner ofDesign Mode. You dont need to do anything in Design Mode its self, the act of activating it rebuildsthe cache.The drawback to this method is the process can be tiresome to reload your design every time, but itdoes not impact the performance of your site.3.1.2 Rebuild via Dev ModeDev Mode is a pretty useful option as it forces the cart to auto refresh the cache every time the site isnavigated through. It also fully explains the any mysql errors that occur which is something yougenerally wouldnt run into when strictly doing a design but is good to know either way.http://www.pinnaclecart.com/
    • Important notes before you start 17© 2011 Desert Dog Marketing, LLCTo enable Dev Mode, you will want to do the following:1. Connect to your deployed cart via an editor of your choice (FTP, SSH, SFTP, Etc..) For thisexercise we will do it via SFTP .2. Drill down into the contentengine directoryhttp://www.pinnaclecart.com/
    • Pinnacle Cart Core Design Manual18© 2011 Desert Dog Marketing, LLC3. Open up the engine_config.php4. Add in a new line above the php closing tag ( ?> ) with the text of " define(DEVMODE, True); " andthen save the changesThe draw back to this method is that if it is not turned of during "visitor hours" it will slow down theperformance of your site as every visitor will be rebuilding your template consistently. To turn it off youcan set the flag to False instead of True, then change back when needed.3.2 Suggested pathingThe Pinnacle Cart application operates in both a non-secure and secure environment in order tomaintain PA-DSS compliance . Due to this we strongly suggest making sure all of your designs userelative pathing over absolute pathing. If you do not do so, you run a high chance of getting securitywarnings when your site goes into secure mode.http://www.pinnaclecart.com/
    • Important notes before you start 19© 2011 Desert Dog Marketing, LLCAbsolute pathing is commonly seen when calling images and/or other media such as flash and video.An example of this would be something like <a href="http://www.domain.com" >< img src="http://www.domain.com/image.jpg"></a> As you see in this example we use the full image path including thedomain name its self. If you used code like this in say your header or footer, what happens is that yourcart will start throwing errors during checkout. In Internet Explorer you will get an error message rightaway complaining about insecure content being loaded from a non-secure directory.The way to keep this from happening is to use relative pathing wherever possible. An example wouldlook like <a href="http://www.domain.com" >< img src="image.jpg"></a> . Notice that in the image callonly the image is referenced as the image is located in webroot. If it was located in a subdirectory thecall would look something like < img src="images/image.jpg"> . Maintaining this basic design principlewill greatly increase site speeds and keep insecure content warnings from appearing.3.3 Working around SmartyDue to the cart using Smarty as a templating engine, all usage of curly brackets ( { and } ) is assumedto be a Smarty variable. Additionally it does not parse php code properly unless some additional codeis added as we will explain below along with how to get curly brackets to be ignored by Smarty.To get the Smarty engine to treat curly brackets as part of your code and not a Smarty variable, youllwant to use what are called literal tags or {literal} {/literal} which are the open and close tagsrespectively. Ideally you will wrap both tags around any curly bracket being used in your code. Mostcommonly you will see these used inside of javascript chunks as curly brackets are used as part of theregular operators.A working example of this would be as follows:<script type="text/javascript">var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");document.write(unescape("%3Cscript src=" + gaJsHost + "google-analytics.com/ga.js type=text/javascript%3E%3C/script%3E"));</script><script type="text/javascript">try {literal}{{/literal}var pageTracker = _gat._getTracker("UA-xxxxx-x");pageTracker._trackPageview();{literal}}{/literal} catch(err) {literal}{{/literal}{literal}}{/literal}</script>Notice that the curly brackets in pink have been surrounded by the literal tags in green.You also could have done it the following way, but it is considered to be less efficient/proper :{literal}<script type="text/javascript">var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");document.write(unescape("%3Cscript src=" + gaJsHost + "google-analytics.com/ga.js type=text/javascript%3E%3C/script%3E"));</script><script type="text/javascript">try {var pageTracker = _gat._getTracker("UA-xxxxx-x");pageTracker._trackPageview();} catch(err) {}</script>{/literal}http://www.pinnaclecart.com/
    • Pinnacle Cart Core Design Manual20© 2011 Desert Dog Marketing, LLCDoing it that way renders any actual Smarty variables that may be present inside the code chunkuseless.Now with php code, to have Smarty recognize and parse it properly you will want to use the {php} {/php} smarty tags instead of <? ?> or <?php ?> . Below is what an adjusted Hello World would looklike.Not inside a smarty engine:<?phpEcho "Hello, World!";?>Inside a smarty engine:{php}Echo "Hello, World!";{/php}3.4 Files to not touchAs part of best practices with making a compliant skin and helping stay away from getting interruptedfrom a possible update, there are a few files we strongly recommend you never edit.The most important file to mention here would be the default head file orcontentenginedesigntemplateswrapperselement-default-head.html . If you have custom codethat needs to go into the <head> </head> section , you will want to create a file called element-custom-head.html and put it into contentskins(Prebuilt template name)templateswrapperselements .This way the changes are included in your skin when the cache is refreshed and incase we have toupdate contentenginedesigntemplateswrapperselement-default-head.html your custom code isnot lost.Next in line would be the javascript files in contentenginedesignjavascript . Any custom tidbits ofjavascript would want to be passed into contentskins(Prebuilt template name)templatesjavascriptskin.js . There you can put in any new js code needed for the site, or if youneed to pass in variables to override default variables from the existing files incontentenginedesignjavascript .Similarly youll also not want to edit contentenginedesignstylesbase.css when adding in your owncss, regardless of wether you are adding in new elements or overriding existing ones. When you aredropping in your new css, youll add it to contentskins(Prebuilt template name)stylesskin.cssLastly we very strongly recommend you do not edit the opc html files at all wether through direct editsin contentenginedesigntemplatespagescheckoutopc or by copying them into your custom skin.The reason for this is that it is highly sensitive and if we are having to push new skin/js files for thatsection it is likely due to a bug that needed to get fixed and if you have edited them/duplicated themyou may not get the update properly. Editing the css elements for those pages is fine though andhighly encouraged to help create the custom look you are going for.http://www.pinnaclecart.com/
    • Building a custom templateIVhttp://www.pinnaclecart.com/
    • Pinnacle Cart Core Design Manual22© 2011 Desert Dog Marketing, LLC4 Building a custom templateNow that we have discussed how the templating system works, how its laid out, and some commondos and donts, its time to build your template!4.1 Creating the file structureUsing your favorite file managing tool (ssh, sftp, ftp, etc...) go into contentskins and create a folderfor your new skin. Its recommended to name the folder after the name of your skin for ease ofmanagement. For our example, we will us MyNewSkin as the skin name. After completion your pathto the skin should be similar to contentskinsMyNewSkin as discussed in the Prebuilt template sectionAfter you have created the folder, it is recommended you download the defaultfolders zip file to yourdesktop, extract it, then upload the folders into your new template folder. Doing this will make it easierto copy files from the Base template folder in your custom template. After the upload, the structureshould look similar to below:Now that you have the default folders inside of your custom skin, we can move onto the skin.xml whichis what the cart uses to get the information about your skin to output into the admin area.http://www.pinnaclecart.com/
    • Building a custom template 23© 2011 Desert Dog Marketing, LLC4.2 Creating the skin.xmlAs mentioned, the next step in creating your custom skin is to build the Skin Definition file, known asskin.xml . This file is required for the skin to be recognized and be selected in the admin area ofPinnacle Cart.Using a text editor, create a file named skin.xml and paste the code below into the file:<?xml version="1.0" encoding="UTF-8"?><skin><title>Sample Title</title><name>skin_template</name><author>nobody</author><thumbnail>previewThumbnail.jpg</thumbnail><preview>previewFullsize.jpg</preview><images><image title="Catalog View">screenshot1.jpg</image></images><settings><DesignTopMenuAvailable>NO</DesignTopMenuAvailable></settings></skin>This is the default structure of the skin.xml with some default data added into it.After dropping the xml in, youll want to start updating the different variables.To set the title of your skin you change the value of <title></title> to one of you choosing. This variablewill be what is displayed in the admin area for the skin selectors. For our skin, well change it to MyNew Skin, so the end result will look like:<?xml version="1.0" encoding="UTF-8"?><skin><title>My New Skin</title><name>skin_template</name><author>nobody</author><thumbnail>previewThumbnail.jpg</thumbnail><preview>previewFullsize.jpg</preview><images><image title="Catalog View">screenshot1.jpg</image></images><settings><DesignTopMenuAvailable>NO</DesignTopMenuAvailable></settings></skin>To set the name of your skin you change the value of <name></name> to one of you choosing. Thisvalue must match exactly the name of your custom templates folder. For our skin, well change it toMyNewSkin so the end result will look like<?xml version="1.0" encoding="UTF-8"?><skin><title>My New Skin</title><name>MyNewSkin</name><author>nobody</author><thumbnail>previewThumbnail.jpg</thumbnail><preview>previewFullsize.jpg</preview><images><image title="Catalog View">screenshot1.jpg</image></images><settings><DesignTopMenuAvailable>NO</DesignTopMenuAvailable></settings></skin>http://www.pinnaclecart.com/
    • Pinnacle Cart Core Design Manual24© 2011 Desert Dog Marketing, LLCTo set the author of your skin you change the value of <author></author> to one of you choosing. Thisvalue can be anything you like such as your name or your companys name. For our skin well changeit to Pinnacle Cart so the end result will look like<?xml version="1.0" encoding="UTF-8"?><skin><title>My New Skin</title><name>MyNewSkin</name><author>Pinnacle Cart</author><thumbnail>previewThumbnail.jpg</thumbnail><preview>previewFullsize.jpg</preview><images><image title="Catalog View">screenshot1.jpg</image></images><settings><DesignTopMenuAvailable>NO</DesignTopMenuAvailable></settings></skin>One of the things you can do with the skin.xml is set thumbnail and preview images of your skins. Youlikely would not have anything to present right away at the start of the template creation, but once youdid, you would update the <thumbnail> and <preview> fields respectively. The images would go intothe root folder of your skin, for example contentskinsMyNewSkinMyNewSkinThumb,jpg<?xml version="1.0" encoding="UTF-8"?><skin><title>My New Skin</title><name>MyNewSkin</name><author>Pinnacle Cart</author><thumbnail>MyNewSkinThumb.jpg</thumbnail><preview>MyNewSkinPreview.jpg</preview><images><image title="Catalog View">screenshot1.jpg</image></images><settings><DesignTopMenuAvailable>NO</DesignTopMenuAvailable></settings></skin>You can also supply additional images that will get shown in the admin for the skin to show casedifferent areas of your design once it is complete. To do so you would duplicate the <image> sectionfor as many images as you are adding. For our example, we will showcase our footer.<?xml version="1.0" encoding="UTF-8"?><skin><title>My New Skin</title><name>MyNewSkin</name><author>Pinnacle Cart</author><thumbnail>MyNewSkinThumb.jpg</thumbnail><preview>MyNewSkinPreview.jpg</preview><images><image title="Awesome Footer">footer.jpg</image></images><settings><DesignTopMenuAvailable>NO</DesignTopMenuAvailable></settings></skin>http://www.pinnaclecart.com/
    • Building a custom template 25© 2011 Desert Dog Marketing, LLCLastly you can use the <settings> section to control different design elements to be controlled by theskin.xml upon activation. Right now it can control only the top menu but we will be expanding thefunctionality greatly in future releases.<?xml version="1.0" encoding="UTF-8"?><skin><title>My New Skin</title><name>MyNewSkin</name><author>Pinnacle Cart</author><thumbnail>MyNewSkinThumb.jpg</thumbnail><preview>MyNewSkinPreview.jpg</preview><images><image title="Awesome Footer">footer.jpg</image></images><settings><DesignTopMenuAvailable>Yes</DesignTopMenuAvailable></settings></skin>After you have setup your skin.xml, save it, then upload it into the root of your skin folder. For exampleours would go into contentskinsMyNewSkinskin.xmlFor further information on the skin.xml as well as the default example, please see Skin.xml data in theAppendix4.3 Where to go from hereNow that your skin folders have been prepped and the xml file has been established in order to allowyour skin to work with the cart, the only thing left to do is to design! To assist with understanding thatprocess, here are some examples of what you can do.Editing the footerTo edit the footer, youll want to copycontentenginedesigntemplateslayoutszonefooter.htmlinto your skin folder using the same pathing, for example it would be dropped intocontentskinsMyNewSkinNametemplateslayoutszonefooter.htmland then you can start editing the newly created footer.html to make your changes. To see yourchanges, use one of the cache rebuilding methods list in Rebuilding skin cache.Editing the home pageTo edit the home page, youll want to copycontentenginedesigntemplatespagessitehome.htmlinto your skin folder using the same pathing, for example it would be dropped intocontentskinsMyNewSkinNametemplatespagessitehome.htmland then you can start editing the newly created home.html to make your changes. To see yourchanges, use one of the cache rebuilding methods list in Rebuilding skin cache.http://www.pinnaclecart.com/
    • Pinnacle Cart Core Design Manual26© 2011 Desert Dog Marketing, LLCAdding in custom cssSay you wanted to change the default color of your panel headers background color, youll want to editcontentskinsMyNewSkinNamestylesskin.cssand put in the css for that element.panel .title {background-color: #999999;color: white;}and update background color to have your custom color as shown below.panel .title {background-color: #FF55AA;color: white;}and save the change. To see your changes, use one of the cache rebuilding methods list in Rebuildingskin cache.This is basically the whole process for adding in your own code, css, and images. For some helpfulexamples as to how each page is laid out, check out the Example template layouts section of theAppendix.http://www.pinnaclecart.com/
    • Useful ToolsVhttp://www.pinnaclecart.com/
    • Pinnacle Cart Core Design Manual28© 2011 Desert Dog Marketing, LLC5 Useful Tools5.1 Design toolsIn order to facilitate finding the different CSS elements through out a skin, we recommend using someof the various design tools built into the different browsers. Each utility has the ability to inspectsections of a website and give you the HTML and/or CSS controlling that element.Firebug for Firefoxhttp://getfirebug.com/Developer tools for Chromehttp://code.google.com/chrome/devtools/docs/overview.htmlInternet Explorer developer toolshttp://msdn.microsoft.com/en-us/library/dd565628%28v=vs.85%29.aspx5.2 Page speed checkersPage Speed by Googlehttp://code.google.com/speed/page-speed/Web Page Testhttp://www.webpagetest.org/5.3 CSS compliance toolsW3C CSS Validation Servicehttp://jigsaw.w3.org/css-validator/CSSCheckhttp://www.htmlhelp.com/tools/csscheck/CSS Analyserhttp://juicystudio.com/services/csstest.php5.4 HTML validation toolsWDG HTML Validatorhttp://htmlhelp.com/tools/validator/Html Validator for Firefoxhttps://addons.mozilla.org/en-US/firefox/addon/html-validator/W3C Markup Validation Servicehttp://validator.w3.org/5.5 Language editorOne of the more powerful tools in the cart is the Language Editor located in Cart Settings > Global CartSettings > Languages and Currencies > LanguagesFor a quick visual walkthrough on accessing the languages area, check out http://support.pinnaclecart.http://www.pinnaclecart.com/
    • Useful Tools 29© 2011 Desert Dog Marketing, LLCcom/tutorials/languages/languages.htmThis is not directly related to editing the design template, but it does control all of the default text inyour website which is handy to know in case say you wanted to change My Cart to say My ShoppingCart for example.We feel this is definitely one of the most commonly overlooked but very powerful features of the cart.If you have any questions on using it, please feel free to let us know or checkout the Languagessection in our user manual.Of note though, that if you do utilize the feature and plan to send the skin out to another customer, youwill want to include the language file as well for them to deploy. If this does occur, you can get thelanguage file from your contentlanguages folder.http://www.pinnaclecart.com/
    • AppendixVIhttp://www.pinnaclecart.com/
    • Appendix 31© 2011 Desert Dog Marketing, LLC6 Appendix6.1 Examples downloadsDefault folder hierarchy for custom skinshttp://www.cartmanual.com/manuals/defaultfolders.zipExample skin packagehttp://www.cartmanual.com/manuals/SampleSkin.zip6.2 Skin.xml dataExample skin.xml contents<?xml version="1.0" encoding="UTF-8"?><skin><title>Sample Title</title><name>skin_template</name><author></author><thumbnail>previewThumbnail.jpg</thumbnail><preview>previewFullsize.jpg</preview><images><image title="Catalog View">screenshot1.jpg</image><image title="Product Details">screenshot2.jpg</image><image title="View Cart">screenshot3.jpg</image></images><settings><DesignTopMenuAvailable>NO</DesignTopMenuAvailable></settings></skin>http://www.pinnaclecart.com/
    • Pinnacle Cart Core Design Manual32© 2011 Desert Dog Marketing, LLCSkin.xml tag referenceTag Descriptionskin Required. The skin XML definition must begin with this as the roottagname Required. This value should be the same as the custom skin foldername.title Recommended. The title of the skin.author Recommended. The custom skins creator name.thumbnail Recommended. The path to the thumbnail image used as a previewof the custom skin that is relative to the custom skin folder name.preview Recommended. The skin XML definition must begin with this as theroot tagimages Optional. Icon used to view the customer’s “My Cart” page.image Required only if skin/images tag has been set. The value should bethe relative path to the image from the skins directory.image title Optional. The title attribute can be used to set caption text for theskin image.settings Optional. Additional skin settings can be set within this tag block.DesignTopMenuAvailable Optional. Acceptable values are YES or NO. Values are casesensitive.defaultLayoutElements Optional. A serialized array of where the default position of boxesshould appear for this skin.http://www.pinnaclecart.com/
    • Appendix 33© 2011 Desert Dog Marketing, LLC6.3 Example template layoutshttp://www.pinnaclecart.com/
    • Pinnacle Cart Core Design Manual34© 2011 Desert Dog Marketing, LLCFig A - Basic Layouthttp://www.pinnaclecart.com/
    • Appendix 35© 2011 Desert Dog Marketing, LLCFig B - Home pagehttp://www.pinnaclecart.com/
    • Pinnacle Cart Core Design Manual36© 2011 Desert Dog Marketing, LLCFig C - Product Pagehttp://www.pinnaclecart.com/
    • Appendix 37© 2011 Desert Dog Marketing, LLCFig D - Cart Pagehttp://www.pinnaclecart.com/
    • Pinnacle Cart Core Design Manual38© 2011 Desert Dog Marketing, LLC6.4 CSS reference listThe following table lists the CSS selectors that can be used to modify the variousdesign elements found on the storefront.Site global stylesBackgroundSite background .pageCart background .page .container-wrapHeaderSite headercontainer.page .container-headerSite header .page .layout-zone-headerSite header links .page .layout-zone-header aNavigationSite navigationcontainer.page .container-navigationSite navigation .page .layout-zone-navigationSite navigation links .page .layout-zone-navigation aMenuSite menu container .page .container-menuSite menu .page .layout-zone-menuSite menu links .page .layout-zone-menu aContentSite content .page .layout-zone-contentSite content links .page .layout-zone-content aFormsForm header .page h3Field label .page .field labelhttp://www.pinnaclecart.com/
    • Appendix 39© 2011 Desert Dog Marketing, LLCRequired field label .page .field.required labelField comments .page .field .hintFooterSite footer container .page .container-footerSite footer .page .layout-zone-footerSite footer links .page .layout-zone-footer aImagesSite logo .page .image-logoSite slogan .page .image-sloganHome page image .page .image-homeHot deal mark .page .image-hot-dealNo image mark(small).page .image-no-image-smallNo image mark (big) .page .image-no-image-bigCart image in topbar.page .image-cartDelete item from acart.page .image-delete-itemCVV2 Number helpimage.page .image-cvv2Check numbershelp image.page .image-checkClick-to-view .page .image-click-to-viewPrint version .page .image-print-versionGift certificateimage.page .image-gift-certificateButtonsCommon style .page input.button,input.submit,input.resetStart search .page input.button-start-searchCatalog navigation .page input.button-catalog-navigationhttp://www.pinnaclecart.com/
    • Pinnacle Cart Core Design Manual40© 2011 Desert Dog Marketing, LLCAdd to cart .page input.button-add-to-cartCheckout .page input.button-checkoutSubscribe .page input.button-subscribeUnsubscribe .page input.button-unsubscribeContinue .page input.button-continueContinue with order .page input.button-continue-with-orderContinue shopping .page input.button-continue-shoppingLogin .page input.button-loginRegister .page input.button-registerReset .page input.button-resetUpdate .page input.button-update-cartComplete .page input.button-completePurchase .page input.button-purchaseProcess payment .page input.button-process-paymentSave .page input.button-saveAdd address .page input.button-add-addressReset password .page input.button-reset-passwordEmail to a friend .page input.button-email-to-friendGet shipping rates .page input.button-get-shipping-ratesGet shipping quotes .page input.button-get-shipping-quotesGift certificatebalance.page input.button-gift-certificate-balanceAdd wish list .page input.button-add-wishlistUpdate wish list .page input.button-update-wishlistSend wish list .page input.button-send-wishlistSend review .page input.button-review-sendClose review .page input.button-review-closeTestimonial Submit .page input.button-testimonial-submithttp://www.pinnaclecart.com/
    • Appendix 41© 2011 Desert Dog Marketing, LLCBoxesGlobal styles for all boxesBox header .panel .titleBox content .panel .contentLink styles .panel aSearch catalogBox header .panel-catalog-search .titleBox content .panel-catalog-search .contentLink styles .panel-catalog-search aBestsellersBox header .panel-catalog-bestsellers .titleBox content .panel-catalog-bestsellers .contentLink styles .panel-catalog-bestsellers aCatalog categoriesBox header .panel-catalog-categories .titleBox content .panel-catalog-categories .contentLink styles .panel-catalog-categories aManufacturersBox header .panel-catalog-manufacturers .titleBox content .panel-catalog-manufacturers .contentLink styles .panel-catalog-manufacturers aProducts others boughtBox header .panel-catalog-others-bought .titleBox content .panel-catalog-others-bought .contentLink styles .panel-catalog-others-bought aRecently viewedhttp://www.pinnaclecart.com/
    • Pinnacle Cart Core Design Manual42© 2011 Desert Dog Marketing, LLCBox header .panel-catalog-recent .titleBox content .panel-catalog-recent .contentLink styles .panel-catalog-recent aAccount profileBox header .panel-account-profile .titleBox content .panel-account-profile .contentLink styles .panel-account-profile aCheckoutBox header .panel-checkout .titleBox content .panel-checkout .contentLink styles .panel-checkout aView cartBox header .panel-checkout-cart .titleBox content .panel-checkout-cart .contentLink styles .panel-checkout-cart aNewsletter signupBox header .panel-newsletters-subscribe .titleBox content .panel-newsletters-subscribe .contentLink styles .panel-newsletters-subscribe aMenusTop menuMenu background .layout-zone-menu ul.drop-down-menuMenu item .layout-zone-menu a.drop-down-menu-itemMenu item hover .layout-zone-menu a.drop-down-menu-item-hoverSide menuMenu background .panel-catalog-categories ul.drop-down-menuhttp://www.pinnaclecart.com/
    • Appendix 43© 2011 Desert Dog Marketing, LLCMenu item .panel-catalog-categories a.drop-down-menu-itemMenu item hover .panel-catalog-categories a.drop-down-menu-item-hoverCatalog pagesCommon stylesPage header .page-catalog h1Content .page-catalog .layout-zone-contentContent links .page-catalog .layout-zone-content aBread crumbs .page-catalog .catalog-bread-crumbsBread crumbs links .page-catalog .catalog-bread-crumbs aNavigation .page-catalog .catalog-navigationPage breaks .page-catalog .catalog-page-breaksPage breaks links .page-catalog .catalog-page-breaks aPage breaks -current page.page-catalog .catalog-page-breaks .activeSort/View dropdownsMenu background .catalog-navigation ul.drop-down-menuMenu item .catalog-navigation a.drop-down-menu-itemMenu item hover .catalog-navigation a.drop-down-menu-item-hoverCommon product viewProduct title .page .catalog-product-title aProduct titlebackground.page .catalog-product-titleProduct ID .page .catalog-product-idProduct image .page .catalog-product-imageProduct overview .page .catalog-product-overviewProduct price label .page .catalog-product-price .price-labelProduct price .page .catalog-product-price .price-amounthttp://www.pinnaclecart.com/
    • Pinnacle Cart Core Design Manual44© 2011 Desert Dog Marketing, LLCamountProduct sale pricelabel.page .catalog-product-sale-price .sale-price-labelProduct sale priceamount.page .catalog-product-sale-price .sale-price-amountProduct case pack .page .catalog-product-case-packProduct hot deal .page .catalog-product-hot-dealProduct out of stock .page .catalog-product-out-of-stockProduct click to view .page .catalog-product-click-to-view aProduct categorylink.page .catalog-product-more-in-category aText viewProduct title .catalog-view-text .catalog-product-title aProduct titlebackground.catalog-view-text .catalog-product-titleProduct ID .catalog-view-text .catalog-product-idProduct image .catalog-view-text .catalog-product-imageProduct overview .catalog-view-text .catalog-product-overviewProduct price label .catalog-view-text .catalog-product-price .price-labelProduct priceamount.catalog-view-text .catalog-product-price .price-amountProduct sale pricelabel.catalog-view-text .catalog-product-sale-price .sale-price-labelProduct sale priceamount.catalog-view-text .catalog-product-sale-price .sale-price-amountProduct case pack .catalog-view-text .catalog-product-case-packProduct hot deal .catalog-view-text .catalog-product-hot-dealProduct out of stock .catalog-view-text .catalog-product-out-of-stockProduct click to view .catalog-view-text .catalog-product-click-to-view aProduct categorylink.catalog-view-text .catalog-product-more-in-category ahttp://www.pinnaclecart.com/
    • Appendix 45© 2011 Desert Dog Marketing, LLCThumbnails - single columnProduct title .catalog-view-thumb1 .catalog-product-title aProduct titlebackground.catalog-view-thumb1 .catalog-product-titleProduct ID .catalog-view-thumb1 .catalog-product-idProduct image .catalog-view-thumb1 .catalog-product-imageProduct overview .catalog-view-thumb1 .catalog-product-overviewProduct price label .catalog-view-thumb1 .catalog-product-price .price-labelProduct priceamount.catalog-view-thumb1 .catalog-product-price .price-amountProduct sale pricelabel.catalog-view-thumb1 .catalog-product-sale-price .sale-price-labelProduct sale priceamount.catalog-view-thumb1 .catalog-product-sale-price .sale-price-amountProduct case pack .catalog-view-thumb1 .catalog-product-case-packProduct hot deal .catalog-view-thumb1 .catalog-product-hot-dealProduct out of stock .catalog-view-thumb1 .catalog-product-out-of-stockProduct click to view .catalog-view-thumb1 .catalog-product-click-to-view aProduct categorylink.catalog-view-thumb1 .catalog-product-more-in-category aThumbnails - single column cleanProduct title .catalog-view-thumb1-clean .catalog-product-title aProduct titlebackground.catalog-view-thumb1-clean .catalog-product-titleProduct ID .catalog-view-thumb1-clean .catalog-product-idProduct image .catalog-view-thumb1-clean .catalog-product-imageProduct overview .catalog-view-thumb1-clean .catalog-product-overviewProduct price label .catalog-view-thumb1-clean .catalog-product-price .price-labelProduct priceamount.catalog-view-thumb1-clean .catalog-product-price .price-amounthttp://www.pinnaclecart.com/
    • Pinnacle Cart Core Design Manual46© 2011 Desert Dog Marketing, LLCProduct sale pricelabel.catalog-view-thumb1-clean .catalog-product-sale-price .sale-price-labelProduct sale priceamount.catalog-view-thumb1-clean .catalog-product-sale-price.sale-price-amountProduct case pack .catalog-view-thumb1-clean .catalog-product-case-packProduct hot deal .catalog-view-thumb1-clean .catalog-product-hot-dealProduct out of stock .catalog-view-thumb1-clean .catalog-product-out-of-stockProduct click to view .catalog-view-thumb1-clean .catalog-product-click-to-view aProduct categorylink.catalog-view-thumb1-clean .catalog-product-more-in-category aThumbnails - double columnProduct title .catalog-view-thumb2 .catalog-product-title aProduct titlebackground.catalog-view-thumb2 .catalog-product-titleProduct ID .catalog-view-thumb2 .catalog-product-idProduct image .catalog-view-thumb2 .catalog-product-imageProduct overview .catalog-view-thumb2 .catalog-product-overviewProduct price label .catalog-view-thumb2 .catalog-product-price .price-labelProduct priceamount.catalog-view-thumb2 .catalog-product-price .price-amountProduct sale pricelabel.catalog-view-thumb2 .catalog-product-sale-price .sale-price-labelProduct sale priceamount.catalog-view-thumb2 .catalog-product-sale-price .sale-price-amountProduct case pack .catalog-view-thumb2 .catalog-product-case-packProduct hot deal .catalog-view-thumb2 .catalog-product-hot-dealProduct out of stock .catalog-view-thumb2 .catalog-product-out-of-stockProduct click to view .catalog-view-thumb2 .catalog-product-click-to-view aProduct categorylink.catalog-view-thumb2 .catalog-product-more-in-category aTwo column viewhttp://www.pinnaclecart.com/
    • Appendix 47© 2011 Desert Dog Marketing, LLCProduct title .catalog-view-display .catalog-product-title aProduct titlebackground.catalog-view-display .catalog-product-titleProduct ID .catalog-view-display .catalog-product-idProduct image .catalog-view-display .catalog-product-imageProduct overview .catalog-view-display .catalog-product-overviewProduct price label .catalog-view-display .catalog-product-price .price-labelProduct priceamount.catalog-view-display .catalog-product-price .price-amountProduct sale pricelabel.catalog-view-display .catalog-product-sale-price .sale-price-labelProduct sale priceamount.catalog-view-display .catalog-product-sale-price .sale-price-amountProduct case pack .catalog-view-display .catalog-product-case-packProduct hot deal .catalog-view-display .catalog-product-hot-dealProduct out of stock .catalog-view-display .catalog-product-out-of-stockProduct click to view .catalog-view-display .catalog-product-click-to-view aProduct categorylink.catalog-view-display .catalog-product-more-in-category aTwo column box viewProduct title .catalog-view-display .catalog-product-title aProduct titlebackground.catalog-view-display .catalog-product-titleProduct ID .catalog-view-display .catalog-product-idProduct image .catalog-view-display .catalog-product-imageProduct overview .catalog-view-display .catalog-product-overviewProduct price label .catalog-view-display .catalog-product-price .price-labelProduct priceamount.catalog-view-display .catalog-product-price .price-amountProduct sale pricelabel.catalog-view-display .catalog-product-sale-price .sale-price-labelhttp://www.pinnaclecart.com/
    • Pinnacle Cart Core Design Manual48© 2011 Desert Dog Marketing, LLCProduct sale priceamount.catalog-view-display .catalog-product-sale-price .sale-price-amountProduct case pack .catalog-view-display .catalog-product-case-packProduct hot deal .catalog-view-display .catalog-product-hot-dealProduct out of stock .catalog-view-display .catalog-product-out-of-stockProduct click to view .catalog-view-display .catalog-product-click-to-view aProduct categorylink.catalog-view-display .catalog-product-more-in-category aThree column viewProduct title .catalog-view-thumb3 .catalog-product-title aProduct titlebackground.catalog-view-thumb3 .catalog-product-titleProduct ID .catalog-view-thumb3 .catalog-product-idProduct image .catalog-view-thumb3 .catalog-product-imageProduct overview .catalog-view-thumb3 .catalog-product-overviewProduct price label .catalog-view-thumb3 .catalog-product-price .price-labelProduct priceamount.catalog-view-thumb3 .catalog-product-price .price-amountProduct sale pricelabel.catalog-view-thumb3 .catalog-product-sale-price .sale-price-labelProduct sale priceamount.catalog-view-thumb3 .catalog-product-sale-price .sale-price-amountProduct case pack .catalog-view-thumb3 .catalog-product-case-packProduct hot deal .catalog-view-thumb3 .catalog-product-hot-dealProduct out of stock .catalog-view-thumb3 .catalog-product-out-of-stockProduct click to view .catalog-view-thumb3 .catalog-product-click-to-view aProduct categorylink.catalog-view-thumb3 .catalog-product-more-in-category aThree column cleanProduct title .catalog-view-thumb3-clean .catalog-product-title ahttp://www.pinnaclecart.com/
    • Appendix 49© 2011 Desert Dog Marketing, LLCProduct titlebackground.catalog-view-thumb3-clean .catalog-product-titleProduct ID .catalog-view-thumb3-clean .catalog-product-idProduct image .catalog-view-thumb3-clean .catalog-product-imageProduct overview .catalog-view-thumb3-clean .catalog-product-overviewProduct price label .catalog-view-thumb3-clean .catalog-product-price .price-labelProduct priceamount.catalog-view-thumb3-clean .catalog-product-price .price-amountProduct sale pricelabel.catalog-view-thumb3-clean .catalog-product-sale-price .sale-price-labelProduct sale priceamount.catalog-view-thumb3-clean .catalog-product-sale-price.sale-price-amountProduct case pack .catalog-view-thumb3-clean .catalog-product-case-packProduct hot deal .catalog-view-thumb3-clean .catalog-product-hot-dealProduct out of stock .catalog-view-thumb3-clean .catalog-product-out-of-stockProduct click to view .catalog-view-thumb3-clean .catalog-product-click-to-view aProduct categorylink.catalog-view-thumb3-clean .catalog-product-more-in-category aFlexibleProduct title .catalog-view-flexible .catalog-product-title aProduct titlebackground.catalog-view-flexible .catalog-product-titleProduct ID .catalog-view-flexible .catalog-product-idProduct image .catalog-view-flexible .catalog-product-imageProduct overview .catalog-view-flexible .catalog-product-overviewProduct price label .catalog-view-flexible .catalog-product-price .price-labelProduct priceamount.catalog-view-flexible .catalog-product-price .price-amountProduct sale pricelabel.catalog-view-flexible .catalog-product-sale-price .sale-price-labelProduct sale price .catalog-view-flexible .catalog-product-sale-price .sale-price-amounthttp://www.pinnaclecart.com/
    • Pinnacle Cart Core Design Manual50© 2011 Desert Dog Marketing, LLCamountProduct case pack .catalog-view-flexible .catalog-product-case-packProduct hot deal .catalog-view-flexible .catalog-product-hot-dealProduct out of stock .catalog-view-flexible .catalog-product-out-of-stockProduct click to view .catalog-view-flexible .catalog-product-click-to-view aProduct categorylink.catalog-view-flexible .catalog-product-more-in-category aProduct pageCommonProduct title .page-product .product-titleBread crumbs .page-product .product-bread-crumbsBread crumbs links .page-product .product-bread-crumbs aProduct ID .page-product .product-idProduct image .page-product .product-imageProduct price label .page-product .product-price .price-labelProduct priceamount.page-product .product-price .price-amountProduct sale pricelabel.page-product .product-price .sale-price-labelProduct sale priceamount.page-product .product-price .sale-price-amountProduct case pack .page-product .product-case-packProduct hot deal .page-product .product-hot-dealProduct out of stock .page-product .product-out-of-stockOverview .page-product .product-overviewDescription .page-product .product-descriptionSecondary images .page-product .product-secondary-imagesReviews .page-product .product-reviewshttp://www.pinnaclecart.com/
    • Appendix 51© 2011 Desert Dog Marketing, LLCRecommendedproducts.page-product .product-recommendedAccount pagesAccount home pagePage header .page-account h1Content .page-account .layout-zone-contentContent links .page-account .layout-zone-content aAddress bookPage header .page-address-book h1Content .page-address-book .layout-zone-contentContent links .page-address-book .layout-zone-content aAddress editPage header .page-address-edit h1Content .page-address-edit .layout-zone-contentContent links .page-address-edit .layout-zone-content aAuth errorPage header .page-auth-error h1Content .page-auth-error .layout-zone-contentContent links .page-auth-error .layout-zone-content aAccount blocked pagePage header .page-blocked h1Content .page-blocked .layout-zone-contentContent links .page-blocked .layout-zone-content aLogin pagePage header .page-login h1Content .page-login .layout-zone-contenthttp://www.pinnaclecart.com/
    • Pinnacle Cart Core Design Manual52© 2011 Desert Dog Marketing, LLCContent links .page-login .layout-zone-content aOrders pagePage header .page-orders h1Content .page-orders .layout-zone-contentContent links .page-orders .layout-zone-content aOrder pagePage header .page-order h1Content .page-order .layout-zone-contentContent links .page-order .layout-zone-content aPassword resetPage header .page-password-reset h1Content .page-password-reset .layout-zone-contentContent links .page-password-reset .layout-zone-content aProfilePage header .page-profile h1Content .page-profile .layout-zone-contentContent links .page-profile .layout-zone-content aSignupPage header .page-signup h1Content .page-signup .layout-zone-contentContent links .page-signup .layout-zone-content aCheckout pagesBilling and ShippingPage header .page-billing-and-shipping h1Content .page-billing-and-shipping .layout-zone-contentContent links .page-billing-and-shipping .layout-zone-content ahttp://www.pinnaclecart.com/
    • Appendix 53© 2011 Desert Dog Marketing, LLCCart pagePage header .page-cart h1Content .page-cart .layout-zone-contentContent links .page-cart .layout-zone-content aCompletedPage header .page-completed h1Content .page-completed .layout-zone-contentContent links .page-completed .layout-zone-content aInvoicePage header .page-invoice h1Content .page-invoice .layout-zone-contentContent links .page-invoice .layout-zone-content aOne page checkoutPage header .page-opc h1Content .page-opc .layout-zone-contentContent links .page-opc .layout-zone-content aPayment validationPage header .page-payment-validation h1Content .page-payment-validation .layout-zone-contentContent links .page-payment-validation .layout-zone-content aShipping methodPage header .page-shipping-method h1Content .page-shipping-method .layout-zone-contentContent links .page-shipping-method .layout-zone-content aShipping quotePage header .page-shipping-quote h1Content .page-shipping-quote .layout-zone-contenthttp://www.pinnaclecart.com/
    • Pinnacle Cart Core Design Manual54© 2011 Desert Dog Marketing, LLCContent links .page-shipping-quote .layout-zone-content aNewsletters pagesSubscribePage header .page-subscribe h1Content .page-subscribe .layout-zone-contentContent links .page-subscribe .layout-zone-content aUnsubscribePage header .page-unsubscribe h1Content .page-unsubscribe .layout-zone-contentContent links .page-unsubscribe .layout-zone-content aSite pagesNot found pagePage header .page-404 h1Content .page-404 .layout-zone-contentContent links .page-404 .layout-zone-content aHome pagePage header .page-home h1Content .page-home .layout-zone-contentContent links .page-home .layout-zone-content aInternational settingsPage header .page-international h1Content .page-international .layout-zone-contentContent links .page-international .layout-zone-content aSite mapPage header .page-site-map h1http://www.pinnaclecart.com/
    • Appendix 55© 2011 Desert Dog Marketing, LLCContent .page-site-map .layout-zone-contentContent links .page-site-map .layout-zone-content aText pagesPage header .page-text h1Content .page-text .layout-zone-contentContent links .page-text .layout-zone-content aTestimonialsPage header .page-testimonials h1Content .page-testimonials .layout-zone-contentContent links .page-testimonials .layout-zone-content a6.5 Default skin imagesName Element ID DescriptionSite logo image-logo The storefront logo image.Home page image image-home The storefront home page image.Hot deal mark image-hot-deal The product hot deal image.Site slogan image-slogan The storefront slogan image that isusually next to the storefront logo.No image mark(small)image-no-image-small Small version of image used to indicatethat a preview image is not available for aproduct.No image mark (big) image-no-image-big Large version of image used to indicatethat a preview image is not available for aproduct.Cart image in top bar image-cart Icon used to view the customer’s “MyCart” page.Delete item from acartimage-delete-item Icon used on the “My Cart” page and “MyCart” box to remove items from the cart.CVV2 Number helpimageimage-cvv2 Helper icon used in the checkout processto show where the customer can find theCVV2 number on their credit card.Check numbers helpimageimage-check Helper icon used in the checkout processto show the customer an example of acheck.Click-to-view image-click-to-view Icon used on product listings that linksthe customer to the product detail page.Print version image-print-version Icon used for link to a printer-friendlyversion of the current page’s content.http://www.pinnaclecart.com/
    • Pinnacle Cart Core Design Manual56© 2011 Desert Dog Marketing, LLCGift certificate image image-gift-certificate Icon used for the gift certificate page.Start search button-start-search Button used for search forms on thestorefront.Catalog navigation button-catalog-navigation Button used for catalog navigation.Add to cart button-add-to-cart Button used when adding a product tothe shopping cart.Checkout button-checkout Button used to begin checkout.Subscribe button-subscribe Button used to subscribe to the storesnewsletter and product updates.Unsubscribe button-unsubscribe Button used to unsubscribe from thestores newsletter and product updates.Continue button-continue Button used to continue to the next stepin the checkout process.Continue with order button-continue-with-order Button used to proceed to thebilling/shipping page of the checkoutprocess.Continue shopping button-continue-shopping Button used on the My Cart page toreturn to the store’s catalog to continueadding items to the cart.Login button-login Button used on the customer’s loginform.Register button-register Button used on the customer’sregistration form.Reset button-reset Button used to reset the form.Update button-update-cart Button used on the My Cart page toupdate the details of the shopping cart.Complete button-complete Button used to complete orders where apayment is not due at the time, such as afree order or a custom payment gateway.Purchase button-purchase Button used to submit paymentinformation and complete the order.Process payment button-process-payment Button used to submit paymentinformation and complete the order.Save button-save Button used to save a form.Add address button-add-address Button used to submit the add addressform.Reset password button-reset-password Button used to submit the reset passwordform.Email to a friend button-email-to-friend Button used to submit the email to friendform.Get shipping rates button-get-shipping-rates Button used to get shipping rates.Get shipping quotes button-get-shipping-quotes Button used to submit the shippingquotes feature.Gift certificatebalancebutton-gift-certificate-balance Button used to check a gift certificatebalance.Add wish list button-add-wishlist Button used to create a wishlist.http://www.pinnaclecart.com/
    • Appendix 57© 2011 Desert Dog Marketing, LLCUpdate wish list button-update-wishlist Button used to update the wishlist.Send wish list button-send-wishlist Button used to submit the wishlist form tosend.Send review button-review-send Button used on the product reviews formto submit a review.Close review button-review-close Button used on the product reviews formto close the form.Testimonial Submit button-testimonial-submit Button used to submit the testimonialform.http://www.pinnaclecart.com/