Home

Pinnacle Cart Core Design Manual

1. Box header Box content Link styles Account profile Box header Box content Link styles Checkout Box header Box content Link styles View cart Box header Box content Link styles Newsletter signup Box header Box content Link styles Menus Top menu Menu background Menu item Menu item hover Side menu Menu background panel catalog recent title panel catalog recent content panel catalog recent a panel account profile title panel account profile content panel account profile a panel checkout title panel checkout content panel checkout a panel checkout cart title panel checkout cart content panel checkout cart a panel newsletters subscribe title panel newsletters subscribe content panel newsletters subscribe a layout zone menu ul drop down menu layout zone menu a drop down menu item layout zone menu a drop down menu item hover panel catalog categories ul drop down menu 2011 Desert Dog Marketing LLC Appendix 43 Menu item panel catalog categories a drop down menu item Menu item hover panel catalog categories a drop down menu item hover Catalog pages Common styles Page header page catalog h1 Content page catalog layout zone content Content links page catalog layout zone content a Bread crumbs page catalog catalog bread crumbs Bread crumbs links page catalog catalog bread crumbs a Navigation page ca
2. pinnaclecarl Q 0 Pinnacle Cart Core Design Manual 2011 Desert Dog Marketing LLC Pinnacle Cart Core Design Manual O 2011 Desert Dog Marketing LLC All rights reserved No parts of this work may be reproduced in any form or by any means graphic electronic or mechanical including photocopying recording taping or information storage and retrieval systems without the written permission of the publisher Products that are referred to in this document may be either trademarks and or registered trademarks of the respective 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 no responsibility for errors or omissions or for damages resulting from the use of information contained in this document or from the use of programs and source code that may accompany it In no event shall the publisher and the author be liable for any loss of profit or any other commercial damage caused or alleged to have been caused directly or indirectly by this document Printed July 2011 Contents 3 Table of Contents Part I Part Il A O N Part III 1 4 Part IV 0 Introduction 6 OVERVIEW Alogge a A o Re Cd ste 6 Languages used 544 7 Framework 11 Base template TO iaa 11 Prebullttemplate e e LT cuina aca adds 12 custom template 10 1d use 13 ele BT E 13 Important n
3. Computer Parts Desktop PCs LCD Display Your Shoppi SAMSUNG SpinPoint 400GB Hard Drive Dell APS M2010 m Product ID ARE DR i 584 99 1 Add to Cart Browse more in Hard Produ ID oe ITO 2 799 00 1 Addto Car Browse more in Dell Drives HDD category Notebooks category PowerMate USB Volume Control Apple MacBook 13 inch White 2 0GHz a IL Se 0155 10 LITE TOR IL PG amero gt 39 95 51 049 99 adie Ca een Browse more in Es Browse more in Apple s Keyboards Mice amp Notebooks category d ER Tablets category Bb N 1 ms pk Fa R Site Map About Us Terms and Conditions Contact Us Powered by Pinnacle Cart Ecommerce Software 1 templates pages site home html 2011 Desert Dog Marketing LLC 36 Pinnacle Cart Core Design Manual Fig C Product Page Categories Mobebocio Laptops Barebone PCs Computer Parts Desktop PCs ELCO Displays Newsletter Email Address My Profile Login Register Hand gt C os uigr Fans gt Meson Upgrades US Modular Dual Channel 1024MB DDR Memory Price 39 99 Praduei ID wen USMDOCS12 Waighi Free Shipping D revir Email io a bigno Description US Modular Dual Channel 1024MB PC4300 DOR 513MHz Memory i Looking for high quality memory with performance at blistering speeds US Modular is the hot rw soa
4. If this does occur you can get the language file from your VcontentV languages folder 2011 Desert Dog Marketing LLC Appendix 6 Appendix 6 1 Examples downloads Default folder hierarchy for custom skins http www cartmanual com manuals defaultfolders zip Example skin package http www cartmanual com manuals SampleSkin zip 6 2 Skin xml data Example skin xml contents lt xml version 1 0 encoding UTF 8 gt lt skin gt lt title gt Sample Title lt title gt lt name gt skin template lt name gt lt author gt lt author gt lt thumbnail gt previewThumbnail jpg lt thumbnail gt lt preview gt previewFullsize jpg lt preview gt lt images gt lt image title Catalog View gt screenshotl jpg lt image gt lt image title Product Details gt screenshot2 jpg lt image gt lt image title View Cart gt screenshot3 jpg lt image gt lt images gt lt settings gt lt DesignTopMenuAvailable gt NO lt DesignTopMenuAvailable gt lt settings gt lt skin gt 31 2011 Desert Dog Marketing LLC 32 Pinnacle Cart Core Design Manual Skin xml tag reference skin name title author thumbnail preview images image image title settings Design TopMenuAvailable defaultLayoutElements Required The skin XML definition must begin with this as the root tag Required This value should be the same as the custom skin folder name Recom
5. add address page input button reset password page input button email to friend page input button get shipping rates page input button get shipping quotes page input button gift certificate balance page input button add wishlist page input button update wishlist page input button send wishlist page input button review send page input button review close page input button testimonial submit 2011 Desert Dog Marketing LLC Appendix 41 Boxes Global styles for all boxes Box header panel title Box content panel content Link styles panel a Search catalog Box header panel catalog search title Box content panel catalog search content Link styles panel catalog search a Bestsellers Box header panel catalog bestsellers title Box content panel catalog bestsellers content Link styles panel catalog bestsellers a Catalog categories Box header panel catalog categories title Box content panel catalog categories Content Link styles panel catalog categories a Manufacturers Box header panel catalog manufacturers title Box content panel catalog manufacturers content Link styles panel catalog manufacturers a Products others bought Box header panel catalog others bought title Box content panel catalog others bought content Link styles panel catalog others bought a Recently viewed 2011 Desert Dog Marketing LLC 42 Pinnacle Cart Core Design Manual
6. catalog view thumb2 catalog product click to view a catalog view thumb2 catalog product more in category a 2011 Desert Dog Marketing LLC Appendix 47 Product title Product title background Product ID Product image Product overview Product price label Product price amount Product sale price label Product sale price amount Product case pack Product hot deal Product out of stock Product click to view Product category link catalog view display catalog product title a catalog view display catalog product title catalog view display catalog product id catalog view display catalog product image catalog view display catalog product overview catalog view display catalog product price price label catalog view display catalog product price price amount catalog view display catalog product sale price sale price label catalog view display catalog product sale price sale price amount catalog view display catalog product case pack catalog view display catalog product hot deal catalog view display catalog product out of stock catalog view display catalog product click to view a catalog view display catalog product more in category a Two column box view Product title Product title background Product ID Product image Product overview Product price label Product price amount Product sale price label catalog view display catalog
7. item from a cart CVV2 Number help image Check numbers help image Click to view Print version Element ID image logo image home image hot deal image slogan image no image small image no image big image cart image delete item image cvv2 image check image click to view image print version Description The storefront logo image The storefront home page image The product hot deal image The storefront slogan image that is usually next to the storefront logo Small version of image used to indicate that a preview image is not available for a product Large version of image used to indicate that a preview image Is not available for a product Icon used to view the customer s My Cart page Icon used on the My Cart page and My Cart box to remove items from the cart Helper icon used in the checkout process to show where the customer can find the CVV2 number on their credit card Helper icon used in the checkout process to show the customer an example of a check Icon used on product listings that links the customer to the product detail page Icon used for link to a printer friendly version of the current page s content 2011 Desert Dog Marketing LLC 56 Pinnacle Cart Core Design Manual Gift certificate image Start search Catalog navigation Add to cart Checkout Subscribe Unsubscribe Continue Continue with order Continue shopp
8. lists links quotes and other items lt can embed scripts in languages such as JavaScript which affect the behavior of HTML webpages Web browsers can also refer to Cascading Style Sheets CSS to define the appearance and layout of text and other material The W3C maintainer of both the HTML and the CSS standards encourages the use of CSS over explicitly presentational HTML markup For more information on HTML please see hitp en wikipedia org wiki Html CSS Cascading Style Sheets CSS is a style sheet language used to describe the presentation semantics the look and formatting of a document written in a markup language lts most common application is to style web pages written in HTML and XHTML but the language can also be applied to any 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 similar markup language from document presentation including elements such as the layout colors and fonts This separation can improve content accessibility provide more flexibility and control in the specification of presentation characteristics enable multiple pages to share formatting and reduce complexity and repetition in the structural content such as by allowing for tableless web design CSS can also allow the same markup page to be presented in different styles for different rendering methods such as on screen in print by voice when read o
9. managing tool ssh sftp ftp etc go into content skins and create a folder for your new skin li s recommended to name the folder after the name of your skin for ease of management For our example we will us MyNewSkin as the skin name After completion your path to the skin should be similar to content skins MyNewSkin as discussed in the Prebuilt template section Marne 2 di _custom A BigDesign de BlueGreen di Modernista MyNewSkin sj A NewOrange A SimpleGreen de Template3700 de Template gt 701 Je Template3702 A Template3703 de Template3704 pa EE After you have created the folder it is recommended you download the defaultfolders zip file to your desktop extract it then upload the folders into your new template folder Doing this will make it easier to copy files from the Base template folder in your custom template After the upload the structure should look similar to below Mame image A javascript de styles templates Now that you have the default folders inside of your custom skin we can move onto the skin xml which is what the cart uses to get the information about your skin to output into the admin area 2011 Desert Dog Marketing LLC Building a custom template 23 4 2 Creating the skin xml As mentioned the next step in creating your custom skin is to build the Skin Definition file known as skin xml This file is required for the skin to be recognized
10. php E engine fedex php E engine functions php E engine Images php E engine label php E engine localization php engine logic php 4 Add in a new line above the php closing tag gt with the text of define DEVMODE True and then save the changes Rw Gan HAA BE lt php define DB HOST 1 define DB USER 11 define DB PASSWORD s define DB NAME Pie define DB PREFIX define LICENSE NUMBER Pie define DEVMODE r True r j Za The draw back to this method is that if it is not turned of during visitor hours it will slow down the performance of your site as every visitor will be rebuilding your template consistently To turn it off you can set the flag to False instead of True then change back when needed Suggested pathing The Pinnacle Cart application operates in both a non secure and secure environment in order to maintain PA DSS compliance Due to this we strongly suggest making sure all of your designs use relative pathing over absolute pathing lf you do not do so you run a high chance of getting security warnings when your site goes into secure mode 2011 Desert Dog Marketing LLC Important notes before you start 19 Absolute pathing is commonly seen when calling images and or other media such as flash and video An example of this would be something like lt a href http www domain com gt lt img src http ww
11. previewFullsize jpg lt preview gt lt images gt lt image title Catalog View gt screenshotl jpg lt image gt lt images gt lt settings gt lt DesignTopMenuAvailable gt NO lt DesignTopMenuAvailable gt lt settings gt lt skin gt One of the things you can do with the skin xml is set thumbnail and preview images of your skins You likely would not have anything to present right away at the start of the template creation but once you did you would update the lt thumbnail gt and lt preview gt fields respectively The images would go into the root folder of your skin for example content skins MyNewskin MyNewSkinThumb jpg lt xml version 1 0 encoding UTF 8 gt lt skin gt lt title gt My New Skin lt title gt lt name gt MyNewSkin lt name gt lt author gt Pinnacle Cart lt author gt lt thumbnail gt MyNewSkinThumb jpg lt thumbnail gt lt preview gt MyNewSkinPreview jpg lt preview gt lt images gt lt image title Catalog View gt screenshotl jpg lt image gt lt images gt lt settings gt lt DesignTopMenuAvailable gt NO lt DesignTopMenuAvailable gt lt settings gt lt skin gt You can also supply additional images that will get shown in the admin for the skin to show case different areas of your design once it is complete To do so you would duplicate the lt image gt section for as many images as you are adding For our example we will showcase our footer lt xml version 1 0 e
12. see your changes Within Pinnacle Cart we currently have two ways to accomplish this entering into Design Mode and enabling Dev Mode Both have their pros and cons which we will cover next 3 1 1 Rebuild via Design Mode To rebuild the cart via Design Mode you ll want go through the following steps 1 Log into the admin area of your shopping cart typically is http www yourdomain tld login php pinnaclecart making e commerce wor ka Pinnacle Cart Administrator Area Ines eet oom AE Car com Please enter your username and password Username Password admin sesesesso 2011 Desert Dog Marketing LLC 16 Pinnacle Cart Core Design Manual 2 Click on Activate Cart Designer in the Quick Links section of your admin area located on the left hand side Quick Links Admin Area Browse Categories Browse Products Browse Orders Browse Users Admin Area Home Update Your Profile Activate Cart Designer Cart Information Help amp Support User Manual Support Area Pinnacle Cart http aww pinnaclecart com 3 Once it has loaded you ll then simply hit the Exit button located in the bottom right hand corner of Design Mode You don t need to do anything in Design Mode its self the act of activating it rebuilds the cache outline Save Exit Hide The drawback to this method is the process can be tiresome to reload your design every time but it does not impact the performance of your
13. site 3 1 2 Rebuild via Dev Mode Dev Mode is a pretty useful option as it forces the cart to auto refresh the cache every time the site is navigated through It also fully explains the any mysal errors that occur which is something you generally wouldn t run into when strictly doing a design but is good to know either way 2011 Desert Dog Marketing LLC Important notes before you start 17 To 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 this exercise we will do it via SFTP de content de ecc de engine de Images di install de loncube 3 em e Ha E admin php E download php E index php E login php readme txt robots txt 2 Drill down into the content engine directory E engine accelerate php engine ajax processor php engine browser php engine canada post php engine cardinal commerce php engine config php engine design mode php engine fedex php engine functions php engine Images php engine label php engine localization php engine logic php 2011 Desert Dog Marketing LLC 18 Pinnacle Cart Core Design Manual 3 2 3 Open up the engine config php A payment E engine accelerate php E engine ajax processor php E engine browser php E engine Canada post php E engine cardinal commerce php E E ngi ne co nfig a D h p ln E engine design mode
14. special Smarty tags within a document These tags are processed and substituted with other code Tags are directives for Smarty that are enclosed by template delimiters These directives can be variables denoted by a dollar sign functions logical or loop statements Smarty allows PHP programmers to define custom functions that can be accessed using Smarty tags For more information on Smarty please see http en wikipedia org wiki Smarty 2011 Desert Dog Marketing LLC Framework Framework 11 2 Framework As discussed earlier in this document the templating engine compiles your template into one after pulling from three other folders and stacking them on top of each other based upon priority Here we will go through the different skin folders and their primary intent in a more in depth fashion 2 1 Base template folder The base template folder is the central design folder of which all templates are based from including backend 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 by Pinnacle Cart It currently is housed in the content engine design folder of the default Pinnacle Cart package As the base template folder is the default unmodified design it is usually very bland in appearance if used by its self This template folder has the lowest priority in the compilation procedu
15. text catalog view text catalog view text catalog view text catalog view text catalog view text catalog view text catalog view text catalog view text catalog view text page catalog product sale price sale price label page catalog product sale price sale price amount page catalog product case pack page catalog product hot deal page catalog product out of stock page catalog product click to view a page catalog product more in category a catalog product title a catalog product title catalog product id catalog product image catalog product overview catalog product price price label catalog product price price amount catalog product sale price sale price label catalog product sale price sale price amount catalog product case pack catalog product hot deal catalog product out of stock catalog product click to view a catalog product more in category a 2011 Desert Dog Marketing LLC Appendix 45 Thumbnails single column Product title catalog view thumb1 Product title log background catalog view thumb1 Product ID catalog view thumb1 Product image catalog view thumb1 Product overview catalog view thumb1 Product price label catalog view thumb1 Product price catalog view thumb1 amount Product sale price catalog view thumb1 label 9 Product sale price catalog view thumb1 amount Product case pack cat
16. uses the same folder hierarchy as the Base template folder discussed previously to house your customized skin files As an example on how to properly utilize this folder say you wanted to edit the header html file you would copy content engine design templates layouts zones header html into content skins MyNewSkin templates layouts zones header html then go in and make your customizations to the content skins MyNewSkin templates layouts zones header html file leaving the original one stored in the 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 like resell it or provide it to another Pinnacle Cart User 2011 Desert Dog Marketing LLC Framework 12 2 3 2 4 Custom template folder The Custom template folder is where the Pinnacle Cart feature of Design Mode saves all of its changes its current location is content skins _custom This folder is exclusively used by Design Mode and should never be used when creating your own design Since it is the folder being used by Design Mode it gets the highest and final priority in the skin compilation process As this is the folder The Custom template does follow the same hierarchy as the Base template as well so in the off chance something is built or changed via Design Mode you can alway
17. Pinnacle Cart Core Design Manual 6 4 CSS reference list The following table lists the CSS selectors that can be used to modify the various design elements found on the storefront site global styles Background site background page Cart background page container wrap Header site header on ler page container header Site header page layout zone header Site header links page layout zone header a Navigation Site navigation container page container navigation Site navigation page layout zone navigation Site navigation links page layout zone navigation a Menu Site menu container page container menu Site menu page layout zone menu Site menu links page layout zone menu a Content Site content page layout zone content Site content links page layout zone content a Forms Form header page h3 Field label page field label 2011 Desert Dog Marketing LLC Appendix 39 Required field label Field comments Footer Site footer container Site footer Site footer links Images Site logo Site slogan Home page image Hot deal mark No image mark small No image mark big Cart image in top bar Delete item from a cart CVV2 Number help image Check numbers help image Click to view Print version Gift certificate image Buttons Common style Start search Catalog navigation page field required label page field bunt page container footer
18. al 2 2 templates pages checkout one page checkout Includes for one page checkout templates pages checkout traditional checkout Includes for traditional checkout templates pages gift certificate templates pages google templates pages newsletters templates pages product templates pages product elements templates pages product views templates pages site templates pages wishlist templates panels templates panels includes templates wrappers templates wrappers elements Prebuilt template folder Gift certificate pages Good conversion and coupon includes Newsletter subscribe unsubscribe pages Product page views and elements Product page peaces Product page views different combinations of product elements Common site pages home page site map international settings etc Wish list management pages Site panels such as products categories products search box bestsellers etc Additional files for panels Site wrappers basically wrapper creates environment for layout Wrapper shared elements The Prebuilt template folder is where you as a designer and or developer would want to save all of your content changes to In this document we generically refer to this folder as the Prebuilt template folder but the actual folder its self will be what you decide to name it Right now this folder will always be located at content skins Prebuilt template name Of content skins MyNewSkin as an example lt
19. alog view thumb1 Product hot deal catalog view thumb1 Product out of stock catalog view thumb1 Product click to view catalog view thumb1 Product category link catalog view thumb1 Thumbnails single column clean Product title catalog view thumb1 Product title catalog view background catalog view thumb1 Product ID catalog view thumb1 Product image Product overview Product price label Product price amount catalog view thumb1 catalog view thumb1 catalog view thumb1 catalog view thumb1 catalog product title a catalog product title catalog product id catalog product image catalog product overview catalog product price price label catalog product price price amount catalog product sale price sale price label catalog product sale price sale price amount catalog product case pack catalog product hot deal catalog product out of stock catalog product click to view a catalog product more in category a clean catalog product title a clean catalog product title clean catalog product id clean catalog product image clean catalog product overview clean catalog product price price label clean catalog product price price amount 2011 Desert Dog Marketing LLC 46 Pinnacle Cart Core Design Manual Product sale price label Product sale price amount sale price amount Product case pack Product hot deal Prod
20. and be selected in the admin area of Pinnacle Cart Using a text editor create a file named skin xml and paste the code below into the file lt xml version 1 0 encoding UTF 8 gt lt skin gt lt title gt Sample Title lt title gt lt name gt skin template lt name gt lt author gt nobody lt author gt lt thumbnail gt previewThumbnail jpg lt thumbnail gt lt preview gt previewFullsize jpg lt preview gt lt images gt lt image title Catalog View gt screenshotl jpg lt image gt lt images gt lt settings gt lt DesignTopMenuAvailable gt NO lt DesignTopMenuAvailable gt lt settings gt lt skin gt This is the default structure of the skin xml with some default data added into it After dropping the xml in you ll want to start updating the different variables To set the title of your skin you change the value of lt title gt lt title gt to one of you choosing This variable will be what is displayed in the admin area for the skin selectors For our skin we ll change it to My New Skin so the end result will look like lt xml version 1 0 encoding UTF 8 gt lt skin gt lt title gt My New Skin lt title gt lt name gt skin template lt name gt lt author gt nobody lt author gt lt thumbnail gt previewThumbnail jpg lt thumbnail gt lt preview gt previewFullsize jpg lt preview gt lt images gt lt image title Catalog View gt screenshotl jpg lt image gt lt images gt lt se
21. cle Cart Core Design Manual 3 4 Doing it that way renders any actual Smarty variables that may be present inside the code chunk useless Now with php code to have Smarty recognize and parse it properly you will want to use the php php smarty tags instead of lt gt or lt php gt Below is what an adjusted Hello World would look like Not inside a smarty engine lt php Echo Hello World gt Inside a smarty engine php Echo Hello World php Files to not touch As part of best practices with making a compliant skin and helping stay away from getting interrupted from 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 or content engine design templates wrappers element default head html If you have custom code that needs to go into the lt head gt lt head gt section you will want to create a file called element custom head html and put It into content skins Prebuilt template name Vtemplateslwrapperslelements This way the changes are included in your skin when the cache is refreshed and incase we have to update content engine design templates wrappers element default head html your custom code is not lost Next in line would be the javascript files in content engine design javascript Any custom tidbits of javascript would want to be passed Into content skins Prebuilt tem
22. duct sale price sale price amount catalog product case pack catalog view display catalog product hot deal catalog product out of stock catalog product click to view a catalog product more in category a catalog product title a catalog product title catalog product id catalog product image catalog product overview catalog product price price label catalog product price price amount catalog product sale price sale price label catalog product sale price sale price amount catalog product case pack catalog product hot deal catalog product out of stock catalog product click to view a catalog product more in category a clean catalog product title a 2011 Desert Dog Marketing LLC Appendix 49 Product title background Product ID Product image Product overview Product price label Product price amount Product sale price label Product sale price amount Product case pack Product hot deal Product out of stock Product click to view Product category link Flexible Product title Product title background Product ID Product image Product overview Product price label Product price amount Product sale price label Product sale price catalog view flexible catalog view flexible catalog view flexible catalog view flexible catalog view flexible catalog view flexible catalog view flexible catalog view flexible catalo
23. el headers background color you ll want to edit content skins MyNewSkinName styles skin css and put in the css for that element Panel title background color HB color white and update background color to have your custom color as shown below panel title background color ON color white and save the change TO see your changes use one of the cache rebuilding methods list in Rebuilding skin cache This is basically the whole process for adding in your own code css and images For some helpful examples as to how each page is laid out check out the Example template layouts section of the Appendix 2011 Desert Dog Marketing LLC Useful Tools 28 Pinnacle Cart Core Design Manual 5 1 5 2 5 3 5 4 5 5 Useful Tools Design tools In order to facilitate finding the different CSS elements through out a skin we recommend using some of the various design tools built into the different browsers Each utility has the ability to inspect sections of a website and give you the HTML and or CSS controlling that element Firebug for Firefox http getfirebug com Developer tools for Chrome http code google com chrome devtools docs overview html Internet Explorer developer tools http msdn microsoft com en us library dd565628 28v vs 85 29 aspx Page speed checkers Page Speed by Google http code google com speed page speed Web Page Test http www webpaget
24. est org CSS compliance tools W3C CSS Validation Service http jigsaw w3 org css validator CSSCheck http www htmlhelp com tools csscheck CSS Analyser http juicystudio com services csstest php HTML validation tools WDG HTML Validator http htmlhelp com tools validator Html Validator for Firefox https addons mozilla org en US firefox addon html validator W3C Markup Validation Service http validator w3 org Language editor One of the more powerful tools in the cart is the Language Editor located in Cart Settings gt Global Cart Settings gt Languages and Currencies gt Languages For a quick visual walkthrough on accessing the languages area check out http support pinnaclecart 2011 Desert Dog Marketing LLC Useful Tools 29 com tutorials languages languages htm This is not directly related to editing the design template but it does control all of the default text in your website which is handy to know in case say you wanted to change My Cart to say My Shopping Cart 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 Languages section in our user manual Of note though that if you do utilize the feature and plan to send the skin out to another customer you will want to include the language file as well for them to deploy
25. g product out of stock catalog view flexible catalog product click to view a catalog view flexible catalog product more in category a Product page Common Product title Bread crumbs Bread crumbs links Product ID Product image Product price label Product price amount Product sale price label Product sale price amount Product case pack Product hot deal Product out of stock Overview Description secondary images Reviews page product page product page product page product page product page product page product page product page product page product page product page product page product page product page product page product product title product bread crumbs product bread crumbs a product id product image product price price label product price price amount product price sale price label product price sale price amount product case pack product hot deal product out of stock product overview product description product secondary images product reviews 2011 Desert Dog Marketing LLC Appendix 51 Recommended products page product product recommended Account pages Account home page Page header Content Content links Address book Page header Content Content links Address edit Page header Content Content links Auth error Page header Content Content links page account h1 page accoun
26. g view flexible catalog view thumb3 clean catalog view thumb3 clean catalog view thumb3 clean catalog view thumb3 clean catalog view thumb3 clean catalog view thumb3 clean catalog view thumb3 clean catalog view thumb3 clean Sale price amount catalog view thumb3 clean catalog view thumb3 clean catalog view thumb3 clean catalog view thumb3 clean catalog view thumb3 clean catalog product title catalog product id catalog product image catalog product overview catalog product price price label catalog product price price amount catalog product sale price sale price label catalog product sale price catalog product case pack catalog product hot deal catalog product out of stock catalog product click to view a catalog product more in category a catalog product title a catalog product title catalog product id catalog product image catalog product overview catalog product price price label catalog product price price amount catalog product sale price sale price label catalog product sale price sale price amount 2011 Desert Dog Marketing LLC 50 Pinnacle Cart Core Design Manual amount Product case pack Product hot deal Product out of stock Product click to view Product category link catalog view flexible catalog product case pack catalog view flexible catalog product hot deal catalog view flexible catalo
27. gnup layout zone content a Checkout pages Billing and Shipping Page header Content Content links page billing and shipping h1 page billing and shipping layout zone content page billing and shipping layout zone content a 2011 Desert Dog Marketing LLC Appendix 53 Cart page Page header page cart h1 Content page cart layout zone content Content links page cart layout zone content a Completed Page header page completed h1 Content page completed layout zone content Content links page completed layout zone content a Invoice Page header page invoice h1 Content page invoice layout zone content Content links page invoice layout zone content a One page checkout Page header page opc h1 Content page opc layout zone content Content links page opc layout zone content a Payment validation Page header page payment validation h1 Content page payment validation layout zone content Content links page payment validation layout zone content a Shipping method Page header page shipping method h1 Content page shipping method layout zone content Content links page shipping method layout zone content a Shipping quote Page header page shipping quote hi Content page shipping quote layout zone content 2011 Desert Dog Marketing LLC 54 Pinnacle Cart Core Design Manual Content links page shipping quote layout zone content a Newsletter
28. in this document Overview The templating engine is built around the concept of being able to push core changes to the skin templates during an update upgrade without interrupting the design that has been created To achieve this we have created a tiered or layered design platform that compiles into one final skin by essentially stacking on top of each other and getting pushed into a final compilation directory The primary folders used to achieve this are the following Base template folder 1contentlengine design Prebuilt template folder content skins Prebuilt template name Custom template folder content skins _custom Compiled folder content cache skins Custom template name The first three skins get layered on top of each other during compilation of the skin then get saved into the content cache skins Prebuilt template name folder where Prebuilt template name is equal to the name of your active skin An example name would look like content cache skins SimpleGreen In this process the core design is pulled from content engine design then any changes from content skins Prebuilt template name are added on top with a higher priority After this occurs any changes from content skins _custom are then added as the final layer with the highest priority and the resulting skin files are then fully published into content cache skins Prebuilt template name which is what the end user will see Below is are more visual exa
29. ing Login Register Reset Update Complete Purchase Process payment Save Add address Reset password Email to a friend Get shipping rates Get shipping quotes Gift certificate balance Add wish list image gift certificate button start search button catalog navigation button add to cart button checkout button subscribe button unsubscribe button continue button continue with order button continue shopping button login button register button reset button update cart button complete button purchase button process payment button save button add address button reset password button email to friend button get shipping rates button get shipping quotes button gift certificate balance button add wishlist Icon used for the gift certificate page Button used for search forms on the storefront Button used for catalog navigation Button used when adding a product to the shopping cart Button used to begin checkout Button used to subscribe to the stores newsletter and product updates Button used to unsubscribe from the stores newsletter and product updates Button used to continue to the next step in the checkout process Button used to proceed to the billing shipping page of the checkout process Button used on the My Cart page to return to the store s catalog to continue adding items to the cart Button used on the customer s login form Button used on the c
30. mended The title of the skin Recommended The custom skins creator name Recommended The path to the thumbnail image used as a preview of the custom skin that is relative to the custom skin folder name Recommended The skin XML definition must begin with this as the root tag Optional Icon used to view the customer s My Cart page Required only if skin images tag has been set The value should be the relative path to the image from the skin s directory Optional The title attribute can be used to set caption text for the skin image Optional Additional skin settings can be set within this tag block Optional Acceptable values are YES or NO Values are case sensitive Optional A serialized array of where the default position of boxes should appear for this skin 2011 Desert Dog Marketing LLC Appendix 6 3 Example template layouts Skin Files Map Wrapper templates wrappers default html Head part templates wrappers elements element default head html Layout templates layouts default html 33 2011 Desert Dog Marketing LLC 34 Pinnacle Cart Core Design Manual Fig A Basic Layout BOSS You Can t Find a Better deal Categoria Me Cart NO 7 7 Bw bons ECH Cemputer Fart T Degtee Pos 5 LED D se a Miel Newsbiter Email Address 2011 Desert Dog Marketing LLC Appendix 35 Fig B Home page
31. mples of how this would work with any files and or elements Example A Base says header is Prebuilt says header is Custom says header is Header is pink due to gray teal pink Custom having highest priority Categories Categories Categories Categories D Aprael shoes amp jewelry rApparel shoes amp jewelry T App arel shoes amp jewelry T App arel shoes amp jewelry Gift Certificates i i i Gift Certificates Gift Certificates Gift Certificates 2011 Desert Dog Marketing LLC Introduction 7 1 2 Example B Base says header is Prebuilt says headeris Custom does not Header is teal due to gray teal declare a new color Prebuilt having next highest priority Categories Categories Categories Apparel shoes amp jewelry Apparel shoes amp jewelry EApparel shoes amp jewelry Gift Certificates Gift Certificates Gift Certificates Example C Base says header is Prebuilt does not Custom says header is Header is pink due to gray declare a new color pink Custom having highest priority Categories Categories Categories T Apparel shoes amp jewelry El Apparel shoes amp jewelry ES Apparel shoes amp jewelry Gift Certificates Gift Certificates Gift Certificates Example D Base says header is Prebuilt does not Custom does not Header is gray since gray declare a new color declare a new color Prebuilt and Custom did not have input Categories Categories Apparel shoes amp jewelr
32. n xml For further information on the skin xml as well as the default example please see Skin xml data in the Appendix 4 3 Where to go from here Now that your skin folders have been prepped and the xml file has been established in order to allow your skin to work with the cart the only thing left to do is to design To assist with understanding that process here are some examples of what you can do Editing the footer To edit the footer you ll want to copy Ncontent ens le deston rene eres ler outs zone fooucr heu into your skin folder using the same pathing for example it would be dropped into content skins MyNewSkinName templates layouts zone footer html and then you can start editing the newly created footer html to make your changes To see your changes use one of the cache rebuilding methods list in Rebuilding skin cache Editing the home page To edit the home page you ll want to copy content engine design templates pages site home html into your skin folder using the same pathing for example it would be dropped into content skins MyNewSkinName templates pages site home html and then you can start editing the newly created home html to make your changes To see your changes use one of the cache rebuilding methods list in Rebuilding skin cache 2011 Desert Dog Marketing LLC 26 Pinnacle Cart Core Design Manual Adding in custom css Say you wanted to change the default color of your pan
33. ncoding UTF 8 gt lt skin gt lt title gt My New Skin lt title gt lt name gt MyNewSkin lt name gt lt author gt Pinnacle Cart lt author gt lt thumbnail gt MyNewSkinThumb jpg lt thumbnail gt lt preview gt MyNewSkinPreview jpg lt preview gt lt images gt lt image title Awesome Footer gt footer jpg lt image gt lt images gt lt settings gt lt DesignTopMenuAvailable gt NO lt DesignTopMenuAvailable gt lt settings gt lt skin gt 2011 Desert Dog Marketing LLC Building a custom template 25 Lastly you can use the lt settings gt section to control different design elements to be controlled by the skin xml upon activation Right now it can control only the top menu but we will be expanding the functionality greatly in future releases lt xml version 1 0 encoding UTF 8 gt lt skin gt lt title gt My New Skin lt title gt lt name gt MyNewSkin lt name gt lt author gt Pinnacle Cart lt author gt lt thumbnail gt MyNewSkinThumb jpg lt thumbnail gt lt preview gt MyNewSkinPreview jpg lt preview gt lt images gt lt image title Awesome Footer gt footer jpg lt image gt lt images gt lt settings gt lt DesignTopMenuAvailable gt Yes lt DesignTopMenuAvailable gt lt settings gt lt skin gt After you have setup your skin xml save it then upload it into the root of your skin folder For example ours would go into content skins MyNewSkin ski
34. ncreased the popularity of JavaScript for server side web apps For more information on Javascript please see http en wikipedia org wiki Javascript Xajax xajax is an open source PHP class library implementation of AJAX that gives developers the ability to create web based Ajax applications using HTML CSS JavaScript and PHP Applications developed with xajax can asynchronously call server side PHP functions and update content without reloading the page 2011 Desert Dog Marketing LLC Introduction 9 Unlike some other Ajax frameworks xajax is designed to allow the programmer to have no prior knowledge of Javascript For more information on xajax please see http en wikipedia org wiki Xajax Query Query is a cross browser JavaScript library designed to simplify the client side scripting of HTML It was released in January 2006 at BarCamp NYC by John Resig Used by over 43 of the 10 000 most visited websites Query is the most popular JavaScript library in use today Query is free open source software dual licensed under the MIT License and the GNU General Public License Version 2 Query s syntax is designed to make it easier to navigate a document select DOM elements create animations handle events and develop Ajax applications Query also provides capabilities for developers to create plug ins on top of the JavaScript library Using these facilities developers are able to create abstractions f
35. or low level interaction and animation advanced effects and high level theme able widgets This contributes to the creation of powerful and dynamic web pages For more information on Query please see http en wikipedia org wiki Jquery XML 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 other related specifications all gratis open standards The design goals of XML emphasize simplicity generality and usability over the Internet It is a textual data format with strong support via Unicode for the languages of the world Although the design of XML focuses on documents it is widely used for the representation of arbitrary data structures for example in web services Many application programming interfaces APIs have been developed that software developers use to process 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 XML Smarty Smarty is a web template system written in PHP Smarty is primarily promoted as a tool for separation of concerns Smarty is intended to simplify compartmentalization allowing the presentation of a web page to change separately from the back end Ideally this eases the costs and efforts associated with software maintenance Smarty generates web content by the placement of
36. otes before you start 15 SC le le ELI Ie ei mm ene 15 Rebulld via Design Mode nent ee 15 Rebuild via Dev Mode Sn nn nan rene 16 Suggested pathing DEE 18 Working around Smaa 19 HE GT On 20 Building a custom template 22 Creating the TNS SEET seas 22 Creating the SKIN T rana Dadas 23 Wnere 10 90 from E 25 Useful Tools 28 Design ele EE 28 Ste EE E We aud 28 CSS complance E 28 FUE MILs Validation is Le EE 28 EAN GUAGE ENO E 28 Appendix 31 Examples e le e uanmeldt EN SKIN ML d E 31 Example template la y tlS ssr cia 33 CSS reference NS E 38 DeTaUIL SKIN e LE 55 2011 Desert Dog Marketing LLC Pinnacle Cart Core Design Manual 2011 Desert Dog Marketing LLC Introduction Pinnacle Cart Core Design Manual 1 1 Introduction Welcome to the Pinnacle Cart design documentation for cart versions 3 7 and above Within this document we will cover the core principles behind the templating system how the skins themselves are structured how to construct your own skin as well provide key things to know when building the skins and also some tools that will assist in the skin creation It is the intent of this documentation to be used by designers who do not wish to use Design Mode to create their skins and strictly plan on using raw file editing and or managing We strongly encourage that you commit to this method 100 to prevent any conflicts that can occur which we will touch on later
37. page layout zone footer page layout zone footer a page image logo page image slogan page image home page image hot deal page image no image small page image no image big page image cart page image delete item page image cvv2 page image check page image click to view page image print version page image gift certificate page input button input submit input reset page input button start search page input button catalog navigation 2011 Desert Dog Marketing LLC 40 Pinnacle Cart Core Design Manual Add to cart Checkout Subscribe Unsubscribe Continue Continue with order Continue shopping Login Register Reset Update Complete Purchase Process payment Save Add address Reset password Email to a friend Get shipping rates Get shipping quotes Gift certificate balance Add wish list Update wish list Send wish list Send review Close review Testimonial Submit page input button add to cart page input button checkout page input button subscribe page input button unsubscribe page input button continue page input button continue with order page input button continue shopping page input button login page input button register page input button reset page input button update cart page input button complete page input button purchase page input button process payment page input button save page input button
38. plate name templates javascript skin js There you can put in any new js code needed for the site or if you need to pass in variables to override default variables from the existing files in icontentengineldesign javascript Similarly you ll also not want to edit content engine design styles base css when adding in your own css regardless of wether you are adding in new elements or overriding existing ones When you are dropping in your new CSS you ll add it to content skins Prebuilt template name styles skin css Lastly we very strongly recommend you do not edit the opc html files at all wether through direct edits IN content engine design templates pages checkout opc Of 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 that section it is likely due to a bug that needed to get fixed and if you have edited them duplicated them you may not get the update properly Editing the css elements for those pages is fine though and highly encouraged to help create the custom look you are going for 2011 Desert Dog Marketing LLC Building a custom template 22 Pinnacle Cart Core Design Manual 4 1 Building a custom template Now that we have discussed how the templating system works how its laid out and some common do s and dont s it s time to build your template Creating the file structure Using your favorite file
39. product title a catalog view display catalog product title catalog view display catalog product id catalog view display catalog product image catalog view display catalog product overview catalog view display catalog product price price label catalog view display catalog product price price amount catalog view display catalog product sale price sale price label 2011 Desert Dog Marketing LLC 48 Pinnacle Cart Core Design Manual Product sale price Catalog view display amount 9 pay Product case pack catalog view display Product hot deal Product out of stock catalog view display Product click to view catalog view display Product category catalog view display link Three column view Product title catalog view thumb3 Product title background Product ID catalog view thumb3 catalog view thumb3 Product image catalog view thumb3 Product overview catalog view thumb3 Product price label catalog view thumb3 Product price catalog view thumb3 amount Product sale price catalog view th label alog view thumb3 Product sale price catalog view thumb3 amount Product case pack catalog view thumb3 Product hot deal catalog view thumb3 Product out of stock catalog view thumb3 Product click to view catalog view thumb3 Product category catalog view thumb3 link Three column clean Product title catalog view thumb3 catalog pro
40. rd for high Gugllte high speed memory modules US Modular modules undergo the Med rgequs being and qualilicalicn Goradur 15 nur complalabality ard Quality LIS Modular has quid made nara for bel as baing ha tee chois for PC anitrusiari Loceipe bo increase Pilen performanros Product Reviews Login or Register to arie ihe fest review Products You May Like OCI Dual Channel EL PHY Dual Channel Corsair Dual Channel Platinum XTC 2D43M5 043 MB TMINE 2018MB Memory DOR 200MH1 Memory gas ga einni os 84 49 82 559 95 5109 57 1 templates pages product views style1 htm 2 templates pages product elements element blocks html 2011 Desert Dog Marketing LLC Your Shopping Cart is Empty Arno arg Appendix 37 Fig D Cart Page BOSS You Can t Find Better deal Categories Your Cart My Cart i y K US Medular Dual Channel uni tartas EE Pree 2866 AL army Ee pay i Subtotal Amount 539 93 Price Guantity Total Empty Car Checaut US Modular Dual Channel 10 24MB 20A2 33888 1 333 149 Memory search Predue ID ven USMOGS12 Weight Free Shipping Remove Hewstemter Email Adora 1 Go Kl Ceninge Shopping Update Advanoed remah My Profile Login Aegista Subtotal Amount 539 99 Bo rater aor Ro So pors 1 templates pages checkout cart html 2011 Desert Dog Marketing LLC 38
41. re so you would never want to make any edits here only copy the files themselves individually to be used in 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 is of course going to be content engine design images javascript styles styles elements templates templates admin templates email templates email elements templates layouts templates layouts zones templates pages templates pages account templates pages account elements templates pages catalog templates pages catalog elements templates pages catalog views templates pages checkout Custom skin images Skin javascript files Skin CSS files Skin CSS files for specific site elements used by Styles Editor in Design Mode Smarty templates main folder Design mode related templates E mail templates E mail templates top and bottom Site layouts Main parts of site layout site header footer navigation bar side bars Site pages templates separated by groups Pages related to user account log in sign up profile address book etc Common parts for account templates Product catalog and product search pages Elements for catalog pages such as navigation bar bread crumbs page break control and product preview parts Custom views for catalog pages Checkout relates pages 2011 Desert Dog Marketing LLC 12 Pinnacle Cart Core Design Manu
42. s grab the changed file and move it into your skin This fact does mean you in theory could side by side design a skin via raw editing and Design Mode but we do not recommend it in order to avoid potential complications Compiled folder The Compiled folder is where the compilation of the previous three templates ends up This is the template the person visiting the site will see and browse the site on The current location for this folder is content cache skins Prebuilt template name where Prebuilt template name is equal to the name of your active skin An example folder would look like content cache skins MyNewSkin This folder gets written to every time the cart is told to recompile the templates either through entering Design Mode or navigating through the site when devmode is active Due to that you will never want to save any changes here as they will promptly get overwritten and your work will get lost unfortunately 2011 Desert Dog Marketing LLC Important notes before you start Important notes before you start 15 3 Important notes before you start Before we get into template creation we have some suggestions and rules of sorts that will make life easier overall for you while making your new template We may expand this section from time to time so we do suggest checking back every now and then 3 1 Rebuilding skin cache As you build your skin you will need to rebuild the cache folder so that you can
43. s pages Subscribe Page header Content Content links Unsubscribe Page header Content Content links Site pages Not found page Page header Content Content links Home page Page header Content Content links page subscribe h1 page subscribe layout zone content page subscribe layout zone content a page unsubscribe h1 page unsubscribe layout zone content page unsubscribe layout zone content a page 404 h1 page 404 layout zone content page 404 layout zone content a page home h1 page home layout zone content page home layout zone content a International settings Page header Content Content links Site map Page header page international h1 page international layout zone content page international layout zone content a page site map h1 2011 Desert Dog Marketing LLC Appendix 55 6 5 Content Content links Text pages Page header Content Content links Testimonials Page header Content Content links page site map layout zone content page site map layout zone content a page text h1 page text layout zone content page text layout zone content a page testimonials h1 page testimonials layout zone content page testimonials layout zone content a Default skin images Name Site logo Home page image Hot deal mark Site slogan No image mark small No image mark big Cart image in top bar Delete
44. t layout zone content page account layout zone content a page address book h1 page address book layout zone content page address book layout zone content a page address edit h1 page address edit layout zone content page address edit layout zone content a page auth error h1 page auth error layout zone content page auth error layout zone content a Account blocked page Page header Content Content links Login page Page header Content page blocked bi page blocked layout zone content page blocked layout zone content a page login h1 page login layout zone content 2011 Desert Dog Marketing LLC 52 Pinnacle Cart Core Design Manual Content links Orders page Page header Content Content links Order page Page header Content Content links Password reset Page header Content Content links Profile Page header Content Content links Signup Page header Content Content links page login layout zone content a page orders h1 page orders layout zone content page orders layout zone content a page order h1 page order layout zone content Page order layout zone content a page password reset h1 page password reset layout zone content page password reset layout zone content a page profile h1 page profile layout zone content page profile layout zone content a page signup h1 page signup layout zone content page si
45. talog catalog navigation Page breaks page catalog catalog page breaks Page breaks links page catalog catalog page breaks a Page breaks current page page catalog catalog page breaks active Sort View dropdowns Menu background catalog navigation ul drop down menu Menu item catalog navigation a drop down menu item Menu item hover catalog navigation a drop down menu item hover Common product view Product title page catalog product title a Product title background page catalog product title Product ID page catalog product id Product image page catalog product image Product overview page catalog product overview Product price label page catalog product price price label Product price page catalog product price price amount 2011 Desert Dog Marketing LLC a4 Pinnacle Cart Core Design Manual amount Product sale price label Product sale price amount Product case pack Product hot deal Product out of stock Product click to view Product category link Text view Product title Product title background Product ID Product image Product overview Product price label Product price amount Product sale price label Product sale price amount Product case pack Product hot deal Product out of stock Product click to view Product category link catalog view text catalog view text catalog view text catalog view text catalog view
46. ttings gt lt DesignTopMenuAvailable gt NO lt DesignTopMenuAvailable gt lt settings gt lt skin gt To set the name of your skin you change the value of lt name gt lt name gt to one of you choosing This value must match exactly the name of your custom templates folder For our skin we ll change it to MyNewsSkin so the end result will look like lt xml version 1 0 encoding UTF 8 gt lt skin gt lt title gt My New Skin lt title gt lt name gt MyNewSkin lt name gt lt author gt nobody lt author gt lt thumbnail gt previewThumbnail jpg lt thumbnail gt lt preview gt previewFullsize jpg lt preview gt lt images gt lt image title Catalog View gt screenshotl jpg lt image gt lt images gt lt settings gt lt DesignTopMenuAvailable gt NO lt DesignTopMenuAvailable gt lt settings gt lt skin gt 2011 Desert Dog Marketing LLC 24 Pinnacle Cart Core Design Manual To set the author of your skin you change the value of lt author gt lt author gt to one of you choosing This value can be anything you like such as your name or your company s name For our skin well change it to Pinnacle Cart so the end result will look like lt xml version 1 0 encoding UTF 8 gt lt skin gt lt title gt My New Skin lt title gt lt name gt MyNewSkin lt name gt lt author gt Pinnacle Cart lt author gt lt thumbnail gt previewThumbnail jpg lt thumbnail gt lt preview gt
47. uct out of stock Product click to view Product category link Thumbnails double column Product title Product title background Product ID Product image Product overview Product price label Product price amount Product sale price label Product sale price amount Product case pack Product hot deal Product out of stock Product click to view Product category link Two column view catalog view thumb1 clean catalog product sale price sale price label catalog view thumb1 clean catalog product sale price catalog view thumb1 clean catalog product case pack catalog view thumb1 clean catalog product hot deal catalog view thumb1 clean catalog product out of stock catalog view thumb1 clean catalog product click to view a catalog view thumb1 clean catalog product more in category a catalog view thumb2 catalog product title a catalog view thumb2 catalog product title catalog view thumb2 catalog product id catalog view thumb2 catalog product image catalog view thumb2 catalog product overview catalog view thumb2 catalog product price price label catalog view thumb2 catalog product price price amount catalog view thumb2 catalog product sale price sale price label catalog view thumb2 catalog product sale price sale price amount catalog view thumb2 catalog product case pack catalog view thumb2 catalog product hot deal catalog view thumb2 catalog product out of stock
48. ustomer s registration form Button used to reset the form Button used on the My Cart page to update the details of the shopping cart Button used to complete orders where a payment is not due at the time such as a free order or a custom payment gateway Button used to submit payment information and complete the order Button used to submit payment information and complete the order Button used to save a form Button used to submit the add address form Button used to submit the reset password form Button used to submit the email to friend form Button used to get shipping rates Button used to submit the shipping quotes feature Button used to check a gift certificate balance Button used to create a wishlist 2011 Desert Dog Marketing LLC Appendix 57 Update wish list Send wish list Send review Close review Testimonial Submit button update wishlist button send wishlist button review send button review close button testimonial submit Button used to update the wishlist Button used to submit the wishlist form to send Button used on the product reviews form to submit a review Button used on the product reviews form to close the form Button used to submit the testimonial form 2011 Desert Dog Marketing LLC
49. ut by a speech based browser or screen reader and on Braille based tactile devices While the author of a document typically links that document to a CSS style sheet readers can use a different style sheet perhaps one on their own computer to override the one the author has specified CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element In this so called cascade priorities or weights are calculated and assigned to rules so that the results are predictable For more information on CSS please see http en wikipedia org wiki CSS JavaScript Also known as ECMAScript is a prototype based object oriented scripting language that is dynamic weakly typed and has first class functions It is also considered a functional programming language like Scheme and OCaml because it has closures and supports higher order functions JavaScript is an implementation of the ECMAScript language standard and is primarily used in the form of client side JavaScript implemented as part of a web browser in order to provide enhanced user interfaces and dynamic websites This enables programmatic access to computational objects within a host environment JavaScript s use in applications outside web pages for example in PDF documents site specific browsers and desktop widgets is also significant Newer and faster JavaScript VMs and frameworks built upon them notably Node js have also i
50. w domain com image jpg gt lt a gt As you see in this example we use the full image path including the domain name its self If you used code like this in say your header or footer what happens is that your cart will start throwing errors during checkout In Internet Explorer you will get an error message right away 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 would look like lt a href http www domain com gt lt img src image jpg gt lt a gt Notice that in the image call only the image is referenced as the image is located in webroot If it was located in a subdirectory the call would look something like lt img src images image jpg gt Maintaining this basic design principle will greatly increase site speeds and keep insecure content warnings from appearing 3 3 Working around Smarty Due to the cart using Smarty as a templating engine all usage of curly brackets 1 and is assumed to be a Smarty variable Additionally it does not parse php code properly unless some additional code is 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 you ll want to use what are called literal tags or literal literal which are the open and close tags respectively Ideally you
51. will wrap both tags around any curly bracket being used in your code Most commonly you will see these used inside of javascript chunks as curly brackets are used as part of the regular operators A working example of this would be as follows lt script type text javascript gt var gadsHost https document location protocol https ssl http www document write unescape 3Cscript src gaJsHost google analytics com ga js type text javascript 3E 3C scriptY 3E lt script gt lt script type text javascript gt try literal literal var pageTracker _gat _getT racker UA xxxxx x page Tracker trackPageview literal literal catch err literal literal literal literal lt script gt 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 lt script type text javascript gt 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 lt script gt lt script type text javascript gt try var pageTracker gat getTracker UA xxxxx x page Tracker trackPageview I catch err lt script gt literal 2011 Desert Dog Marketing LLC 20 Pinna
52. y Apparel shoes amp jewelry Gift Certificates Gift Certificates Languages used While the templates are generically css and html based there are a few other languages as well as a templating 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 lt html gt within the web page content HTML tags normally come in pairs like lt h1 gt and lt h1 gt The first tag in a pair is the start tag the second tag is the end tag they are also called opening tags and closing 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 audible web pages The browser does not display the HTML tags but uses the tags to interpret the content of the page 2011 Desert Dog Marketing LLC Pinnacle Cart Core Design Manual HTML elements form the building blocks of all websites HTML allows images and objects to be embedded and can be used to create interactive forms It provides a means to create structured documents by denoting structural semantics for text such as headings paragraphs

Pinnacle Cart Core Design Manual

Contents

Download Pdf Manuals

Related Search

Related Contents