Template Customization Guide

Download Template Customization Guide

Post on 11-Apr-2015

1.871 views

Category:

Documents

11 download

Embed Size (px)

TRANSCRIPT

<p>InterspireShoppingCartDeveloperDocumentationTemplateCustomizationGuide</p> <p>TableofContentsIntroduction .................................................................................................1 TemplateDirectoryStructure ........................................................................2 TemplateFileTypes ......................................................................................3 LayoutFiles..........................................................................................................................3 Panels ..................................................................................................................................3 Snippets...............................................................................................................................3 PageStructure..............................................................................................4 TemplateVariables .......................................................................................7 GlobalVariables ...................................................................................................................7 LanguageVariables..............................................................................................................7 PanelReferences ................................................................................................................ 8 SnippetReferences ............................................................................................................. 8 FileIncludes ........................................................................................................................ 8 CreatingaNewTemplate ..............................................................................9 MaintainingaModifiedTemplate................................................................. 10 MoreInformationandResources.................................................................. 11 (X)HTML,DesignandWebStandards ................................................................................ 11 DevelopmentTools............................................................................................................ 11 AdditionalResources ......................................................................................................... 11 Appendix1:LayoutFilesandPanels............................................................. 12 Appendix2:SampleLayoutFiles.................................................................. 22 1ColumnLayoutFile......................................................................................................... 22 2Column(Left+Content)LayoutFile............................................................................... 22 2Column(Right+Content)LayoutFile..............................................................................23 3ColumnLayoutFile..........................................................................................................23 Appendix3:StoreWideGlobalVariables ...................................................... 24 </p> <p>INTERSPIRESHOPPINGCARTTEMPLATECUSTOMIZATIONGUIDE 1 </p> <p>InterspireShoppingCartTemplateCustomizationGuideIntroductionInterspireShoppingCartcontainsapowerfultemplatesystemthatcanbeusedto completelycustomizethelookandfeelofyourstoretoyourneedstointegrateit withanexistingwebsitedesign. InterspireShoppingCarttemplatesareentirelyHTMLbasedandmakeuseof extensiveCSStostylepagedesigns.DuetotheflexibledesignoftheHTML templatesinInterspireShoppingCart,itspossibletocreatebrandnewstore designsonlythroughcustomizationofthestylesheetsandlittleHTMLmodification. ThisguideservesasanintroductionintotheInterspireShoppingCarttemplate system.</p> <p> Thecustomdesignsbysomeofourcustomersarethebestlookingstoresweve seen.</p> <p>TemplateDirectoryStructureInterspireShoppingCarttemplatesexistwithinthetemplatesdirectorythatexists withintheInterspireShoppingCartFolder.Eachfolderinthisdirectoryreferstoa differenttemplateselectablefromtheStoreDesignpageoftheInterspire ShoppingCartControlPanel.(Forexample,thedefaultstoredesignexistswithin thetemplates/defaultdirectory) Templateshavetheabilitytohavemultiplecolorschemesbasedofftheonesetof HTMLandstylesheetfiles. Eachtemplatecontainsseveralfilesandfolders.Thestructureofthecontentsof thisfolderisoutlinedbelow: Backup Containsbackupcopiesofallofthefilesforthistemplate.Thepurposeof thebackupcopiesistoallowuserstoreverttothesebackupsafter customizingoneormoretemplatefiles. config.php Aconfigurationfilecontainingvarioussettingsforthistemplate.An overviewofthisfilecanbefoundbelow. images Containstheimagesforthistemplate. o [color] Adirectoryforeachofthecolorschemesinthistemplateshouldbe created.Anycolorspecificimagesforthistemplateshouldbeplaced inthisdirectory. Panels ContainsthepanelHTMLfilesusedforthistemplate.Anoverviewofpanels canbefoundbelow. Snippets ContainsthesnippetHTMLfilesusedforthistemplate.Anoverviewof snippetscanbefoundbelow. Previews Containsthepreviewimagesforthistemplate. o [color].jpg Foreachofthecolorschemesavailableinthistemplate,aJPGimage shouldbeprovidedthatcontainsapreview. Styles o styles.css Containstheprimarylayoutstylesheetforthistemplate. o ie.css ContainsanyInternetExplorerstylesheetoverridesforthistemplate. o [color].css Foreachofthecolorschemesavailableinthistemplate,aCSSfile shouldbeincludedwiththenameofthecolorscheme.Thisfile shouldcontainallcolorinformationforthetemplate. SeveralHTMLfiles(alsocalledlayouttemplates)alsoexistwithinthebase directoryforeachtemplate.Theirpurposeisoutlinedbelow.</p> <p>INTERSPIRESHOPPINGCARTTEMPLATECUSTOMIZATIONGUIDE 3 </p> <p>TemplateFileTypesLayoutFilesLayoutfilesarethefilesyouseeintherootdirectoryofapage.Eachlayoutfile correspondswithapagethatsshowninInterspireShoppingCart.Forexample, product.htmlreferstothepagethatsshownwhenacustomerisviewingthedetails ofaproductinyourstore. Themajorityoflayoutfilescontainnothingmorethanreferencestoindividual panelstobeshownonapage.Thesepanelsarecontainedintagsthat generallydefineeitherleft,center,orrightcolumnsofthepage. Havingreferencestopanelsinthefilesisthefunctionalitythatallowsthedragand dropdesignmodefeaturetoreorganizethecontentsofthepages. AlistoftemplatelayoutfilesandtheirpurposecanbefoundinAppendix1:Layout Files.Forsamplelayoutfilesfordifferentcolumncombinationscanbefoundin Appendix2:SampleLayoutFiles.</p> <p>PanelsPanelsgenerallyindicateablockorsectiononthepage.Eachpanelfilebuildsone oftheseparateblocksshownonpagesshowninInterspireShoppingCart.For example,theSideCategoryListpanelbuildsalistofcategoriestobeshown throughoutthestore. Asmentionedabove,panelsaregenerallyreferenceddirectlyfromthelayoutfiles theydefinewhichcontentshouldbeshownonaparticularpageandhandlethe generationofthatspecificcontent. Somepanelscontainstrictlystaticcontent(suchasthestorename)whilstothers needtodynamicallygeneratecontent.Thesedynamicallygeneratedpanels(such asthepanelthatbuildsthelistofproductsinacategoryorthelistofcategorieson thestore)makeuseofpanellogicfileslocatedinthe/includes/display/directoryof InterspireShoppingCart.Apanelthatrequiresdynamiccontenttobegenerated willhaveaPHPfileinthisdirectorywiththesamenameofthepanelHTMLfile. AlistofthepanelfilesandtheirpurposecanbefoundinAppendix1:LayoutFiles. Thepanelfilesinthislistarebrokendowntothepagetheyreon(somepanelsare onlyavailableoncertainpages)inthedefaultstoretemplate.</p> <p>SnippetsSnippetsaretemplatescontainingHTMLthatcanbeusedmultipletimesonone pageeitherbybeingusedindifferentpartsofthetemplateorbeingpartofaloop thatforexamplebuildsalistofproductsonthepage(eachproductinthelistbeing arepeatedversionofthesamesnippet) Snippets(foundintheSnippetsdirectory)aregenerallyrepeatedinsidedynamic panelfiles(outlinedabove).Forexample,HomeFeaturedProductsItemwillreferto anindividualproductintheHomeFeaturedProductspanel.</p> <p>PageStructureAsoutlinedabove,therearethreetypesoftemplatefileswithinInterspireShopping Cart.Thesethreetypesoffilesarewhatsusedtobuildthelayoutofapageinthe store. Theimagebelowshowsabreakdownofhowlayoutfiles,panelsandsnippetswork togethertobuildapage:</p> <p>Layout File</p> <p>Panel</p> <p>Panel</p> <p>Panel</p> <p>Snippet</p> <p>Snippet</p> <p>Snippet</p> <p>Snippet</p> <p>Asyoucansee,onelayoutfilereferencesmanypanelsthatinturnmayreference manyindividualsnippets. AbreakdownofthehomepageofadefaultinstallationofInterspireShoppingCart intothelayoutfile,panelsandsnippetswouldlooksimilartothefollowing:</p> <p>INTERSPIRESHOPPINGCARTTEMPLATECUSTOMIZATIONGUIDE 5 Intheimageabove: Thelayoutfileistheentirepage.Thelayoutfilecontainsallofthesnippets andpanelsonapageonceitsallputtogether. Panelsarerepresentedbytheorangesections.Thepanelscontainthe snippets(forexample,eachproductinthenewproductslist) Eachindividualsnippetisrepresentedbythegreensections.</p> <p>Theentirelayoutofapagecanbebrokendownintoseparateblocks.Tryvisualizing thehomepageofthestore.Youllnoticethereareclearlydefinedsections. Atthemostbasiclevelthesearetheheader,leftcolumn,content(center)column, rightcolumnandthefooter. </p> <p>Ifyoubreakthelayoutdownevenmore,youllnoticethateachofthesesections containseparatesectionssoforexampleontheleftmenu,thecategorylist, popularproductsandthenewsletter.Eachoftheseitemsisconsideredablock. </p> <p> Theseblocksareusedtocreateamodularsystemforcontenttobeeasilymoved betweendifferentportionsofthelayoutandhaveitrestyledtofitthatsection automatically(suchaswhenaproductlistisontheleftsidebar,itdoesnotcontain anyproductimagesasopposedtowhenitsinthecenterofthepageanddoes containproductimages)</p> <p>INTERSPIRESHOPPINGCARTTEMPLATECUSTOMIZATIONGUIDE 7 </p> <p>TemplateVariablesEachofthelayout,panelandsnippetfilesinInterspireShoppingCartusesvariables (alsocalledplaceholders)toshowexternalcontent,orcontentfetchfromthe database(suchasthenameofaproduct) Templatevariablesareenclosedwithin%%tags.Therearevarioustypesof variables,eachwiththeirownpurposethatsoutlinedbelow.</p> <p>GlobalVariablesGlobalvariablesaregenerallyusedtoswapcontentfromthedatabaseintoa specifictemplatefile.Forexample,thenameanddescriptionofaproductaresetas globalvariablesandthenreferencedinthetemplatefiles. Globalvariablesarereferencedintemplatefilesasfollows: %%GLOBAL_[placeholdername]%%</p> <p>Forexample: %%GLOBAL_ProductName%%</p> <p>Theavailabilityofspecificvariablesdiffersonthetemplatefilethatsbeingedited (forexample,thevariableforthedescriptionofaproductisavailableontheproduct detailspage,butnotonthecategoryview/productlistingpage). Therearealsoglobalvariablesavailablethroughouttheentirestore(suchasthe storenameorstoreURL).AnoverviewofthesecanbefoundinAppendix1:Store WideGlobalVariables.</p> <p>LanguageVariablesLanguagevariablesdisplaytextthatslocatedwithinthelanguagefilesinthe /language/[nameofthelanguageinuseofthestore]/front_language.inifile.Alltext contentusedonInterspireShoppingCartcanbefoundwithinthesefilesforthe purposeofmakingtheapplicationtranslatableintootherlanguages. Languagevariablesarereferencedinthetemplatefilesasfollows: %%LNG_[variablename]%%</p> <p>Forexample: %%LNG_AddToCart%%</p> <p>Thislanguagevariablewouldrefertoastringinthefront_language.inifilebythe nameofAddToCart. Languagevariablescanalsobeeditedusingthedesignmodefunctionalityof InterspireShoppingCart.</p> <p>PanelReferencesPanels(asoutlinedabove)arethedifferentblocksusedbyInterspireShoppingCart tobuildapage.Panelsarereferencedbothinsidelayoutfilesandinsideotherpanel files. Panelsarereferencedintemplatesasfollows: %%Panel.[panelname]%%</p> <p>Where[panelname]isthenameofafileinthetemplatesPanelsdirectory.For example: %%Panel.HomeFeaturedProducts%%</p> <p>Thispanelreferencewillloadinthecontentfromthe Panels/HomeFeaturedProducts.htmlpanelfile.</p> <p>SnippetReferencesSnippetsaretemplatescontainingHTMLthatcanbeusedmultipletimesonone pageeitherbybeingusedindifferentpartsofthetemplateorbeingpartofaloop thatforexamplebuildsalistofproductsonthepage(eachproductinthelistbeing arepeatedversionofthesamesnippet) Snippetsarereferencedintemplatesasfollows:%%SNIPPET_[snippetname]%%</p> <p>Where[snippetname]isthenameofthesnippetasreferencedinthePHPcodethat generatesit.Inmostcases,thiswillcorrespondwithasimilarlynamedfileinthe templatesSnippetsdirectory.Forexample:%%SNIPPET_HomeFeaturedProducts%%</p> <p>Thissnippetreferencewillcontainarepeatedcopyof Snippets/HomeFeaturedProductsItem.html,oneforeachfeaturedproducttobe showninthelist.</p> <p>FileIncludesItsalsopossibletoincludeanotherfilewithinatemplate.Thiscanbeaccomplished usingfileincludevariables.Thisisextremelyusefulifexternalfilessuchasbanners, sitenetworkheadersorothercontentneedtobeincluded. Fileincludescaneitherbelocal(relativetotheInterspireShoppingCartbase directory),containabsolutefilesystempaths,orberemoteincludesbyspecifying thefullURLtoafiletobeincluded. Includesarereferencedinthetemplatefilesasfollows: %%Include.[filepath]%%</p> <p>Forexample: %%Include.relative_file.html%% %%Include./home/websites/absolute_file.html%% %%Include.htp://www.example.com/remote_file.html%%</p> <p>INTERSPIRESHOPPINGCARTTEMPLATECUSTOMIZATIONGUIDE 9 </p> <p>CreatingaNewTemplateItsaquickandeasyprocesstostartoffcreatingacustomInterspireShoppingCart template.Thereareafewmethodsthatcanbeundertakenwhencreatinganew template: Basingthenewtemplateoffanexistingtemplateandusingtheexisting stylesheetasabase.Thisisparticularlyusefulifminimal(andprimarily stylesheet)modificationswillbemadetothetemplate. Copyingthedefaulttemplateandentirelyremovingallstylesheetsand imagessoyourestartingwithablankHTMLcanvastoworkon.Thismethod isusefulifimplementinganentirelynewstoredesign. Ifitsonlystylesheetmodificationstobemadetoanewtemplate,its recommendedyoucreateanewcolorschemefortheexistingtemplate (beginwithstep6below)</p> <p>Tocreateanewcustomtemplate: 1. Beginbynavigatingtothestore/templatesdirectory. 2. Copythedefaultfolderandrenameittoamoredescriptivetitleforthe templateyoullbecreating. Important:OnlythecharactersAZ,09andunderscores/hyphensshouldbe usedintemplatenames.Spacesshouldnotbeused. 3. Navigateintothenewlycreatedtemplatedirectoryandopenthe config.phpfileinatexteditorofyourchoice. 4. Adjustthenameofthetemplateinthefileandsettheversionnumberto 1.0. 5. Removethefollowingfiles/foldersfromthetemplate: o Styles/blue.css o Previews/blue.jpg o Images/blue/ 6. Createanewcolorschemeforthetemplate.Createthefollowingfiles: o Styles/[colorname].css Thisfilewillholdallcolorinformationrelatingtothetemplate. o Previews/[colorname].jpg Apreviewimageforthiscolorscheme. o Images/[colorname]/ Adirectorytoholdallimagesthatarecolorspecifictothistemplate. 7. LogintothestorecontrolpanelandfromtheStoreDesignpage,selectthe newlycreatedtemplate/colorscheme. 8. Begincustomizationwork.</p> <p>MaintainingaModifiedTemplateWheneveranewversionofInterspireShoppingCartisreleased,customtemplates mayneedtobeupdatedtoensurenewfeaturesareworkingcorrectlyandexisting featurescontinuetoworkasexpected.Templatechangesbetweendifferent upgrades/releasesofInterspireShoppingCartshouldbeexpected. BeforeupgradingalivestoretoanewerversionofInterspireShoppingCart,it shouldbeensuredthatthecustomizedtemplatehasbeenupdatedtoworkwith th...</p>