http://www.flexiblewebdesign.com-Copyright2009-2015©
1
//Flexible–Joomla+Virtuemart3Template–SportMart//authorFlexibleWebDesignTeam//Copyright2009–20014©flexiblewebdesign.com//LicenseGNU/GPLv3http://www.gnu.org/licenses/gpl-3.0.html
FLEXIBLEWEBDESIGNTEAMJoomla+Virtuemart3Template–SportMart
NowsupportsVM3.x+J3.x
TUTORIAL
1. InstallingSportMartTemplate:........................................................................................................................21.1. Explainingthefilesandfolders..........................................................................................................................21.2. FirstMethod:InstallingthroughQuickStartPackage........................................................................................21.3. SecondMethod:InstallingeverythingOne-ByOne............................................................................................3
2. ThefunPart:CONFIGURATION:.......................................................................................................................52.1. WhattodowhenyouupdateVirtuemart..........................................................................................................52.1.1. Tutorial1:ToshowmanufacturerLOGOs.......................................................................................................52.1.2. Tutorial2:MultipleThumbnailsinCategoryPage..........................................................................................52.1.3. Tutorial3:ModificationforVMCustom,Stockable........................................................................................52.2. TranslatesometextsthatcomewithSportMart:..............................................................................................62.3. ChangingparametersforVirtuemartpagesbyUsingplg_flexibleTemplatePlugin:.........................................62.4. ImportantVirtuemartSettings:..........................................................................................................................72.5. THISISVERYIMPORTANT.READTHIS,OTHERWISETHEPRICEMIGHTNOTGETCROSSED(LINE-THROUGH)..82.6. ChangingPriceLabels........................................................................................................................................82.7. VirtuemartBackend>>Configuration>>Template........................................................................................102.8. VirtuemartBackend>>Configuration>>Checkout.........................................................................................122.9. Product&CategoryLayoutoverrideissue.......................................................................................................122.10. Availability(shippingtime)icons...................................................................................................................142.11. CreatingSPECIFICATIONTABinproductdetailspage...................................................................................152.12. That’sallfolks;).............................................................................................................................................17
http://www.flexiblewebdesign.com-Copyright2009-2015©
2
1. InstallingSportMartTemplate:
1.1. Explainingthefilesandfolders.OnceyouUNZIPtheInstallationfilethatyoudownloadfromourserver,youwillget2foldersand2files.
ReleaseNotes.txt=IncludestheReleaseHistory. TUTORIAL.pdf=Youarenowreadingit:) QuickStartFolder=TheMagicfolder.ItistheQuickStartpackagetoinstalleverythingatonce. One-ByOneFolder=LetsyouinstalltheSportMartwithouttheSampleDATAandmodules.
1.2. FirstMethod:InstallingthroughQuickStartPackageThisisthemagicfolder,onceyouperformedthisinstallationyouwillgetexactlythesamelayoutandcontentsasyouseeinourDEMO.IfyouarestartinganewprojectwithusingSportMart,installingthroughQuickStartpackageisHIGHLYrecommended(unlessyouareanadvancedjoomladeveloper).Basicallytakethe2filesfromtheQuickStartFolderanduploadthemtoyourserverthroughFTPClient.Forinstance,ifyourdomainiswww.domain.com,then2filesshouldbelocatedhere:
- http://www.domain.com/kickstart.php- http://www.domain.com/QuickStart-AkeebaBackup.zip
Thenbrowsethekickstart.phpinyourserverandfollowtheinstructions.YoucanwatchthistutorialvideobelowifyouareunfamiliarwithAkeebaBackupinstallationprocedure:https://www.youtube.com/watch?v=hlU1HSWMs7c
http://www.flexiblewebdesign.com-Copyright2009-2015©
3
AfteryouperformthisQuickStartmethod,youwillget:
v Joomla!3.5.1v VirtuemartComponent3.0.16v VirtuemartAIOComponent3.0.16v SportMartTemplate[templatecoreandnecessarypluginstoruntheframework]v ShoppingCart[Module+Plugin]v SlideshowModule+Componentv Sampledata[articles+modules+virtuemartproductsthatyouseeintheliveDEMO]
Allinall,everything!!!IwouldstronglysuggestyoutogothroughQuickStartinstallation.ThengotoVirtuemartComponent,deletethecreatedproducts/categoriesandinsteadaddyours.Youwillbeprettymuchgoodtogo.Q:Today’sJoomlaversionisnewerthanwhatcomeswiththisQuickStartpackage.A:FirstgothroughtheQuickStart,andthensimplyupdatethejoomlabyclickingtheJoomlaUpdatepage.Q:Today’sVirtuemartversionarenewerthanwhatcomeswiththisQuickStartpackage.A:UsuallyitisnotaproblemtoupdatetheVirtuemartComponentviaJoomlaUpdatepage.ButsometimesVMTeamchangesintheVMCorethusthetemplatefailstowork.YoumustbackupfirstbeforeupdatingtheVMcomponent.(Inthosecaseanyincompatibility,wearereleasingnewversionforSportMarttosupportthatnewVMversion).
1.3. SecondMethod:InstallingeverythingOne-ByOne.IfyoualreadyhavejoomlaandalreadyhaveVirtuemartinstalledandyoudon’twantloseyourDATA’sbothfromjoomla!andfromVirtuemart–OR–IfyoualreadyhaveaSportMartTemplateandyoujustwanttoupdateit;thenthismethodisforyou.Onceyouperformthisinstallationmethod,youwon’tloseyourcontents(menuitems,modules,virtuemartproducts,etc..)BeforegoingthroughOne-ByOneinstallation,makesureyoualreadyhave;- Joomla3.x[requirement]- Virtuemart3.0.x[requirement]- VirtuemartAIO3.0.xx[requirement]Thenproceedtoinstallation.ThereisonlyoneZIPfilethatyouneedtoinstallthroughJoomlaExtensionsManager,whichisthis:One-OnebyOne>>pkg_sportmart.zip
http://www.flexiblewebdesign.com-Copyright2009-2015©
4
Afterasuccessfulinstallation,youshouldbeabletoseethismessage:
ByjustinstallingtheoneZIPfile(pkg_sportmart)youareactuallyinstalling6differentextensionstoyourJoomla.
tpl_sportmart:SportMartJoomlaVirtuemartTemplateThisfileincludesthecoreSportMartTemplatefiles.plg_flexibleTemplate:FlexibleVM2TemplatePluginThisfileisaplugintochange/editmorethan100differentthingswithintheVirtuemartpages.com_revolution_slider:RevolutuionSlideshowComponent&ModuleThisistheslideshowyouseeinthehomepage.Component:Usedtocreateslideshow&slides,Module:usedtodisplayslideshowinthewebsitemod_flexible_cart:FlexibleShoppingCartModuleFlexibleShoppingCartModule
http://www.flexiblewebdesign.com-Copyright2009-2015©
5
plg_FlexibleVm3cart:FlexibleShoppingCartPluginTheplugintoruntheFlexibleShoppingCartModuleproperlyplg_t3:T3FrameworkPluginPlugintoruntheT3Framework.
AfterrunningtheOne-ByOnemethod,thelayoutmightlookemptyandmessyinthefront-end.Itisbecausethemodulepositionshavebeenchangedandyoudon’thaveanydefinedmoduleyet.Browsethe“ModuleManager”anddefinemodulesinallmodulepositions.Eitherfollowthe1.Methodandinstalleverythingatonce,orfollowthe2.Methodtoinstalltheplugins+modules+templatetoyourexistingjoomla!One-ByOne.Theninstallationwill
becompleted.
2. ThefunPart:CONFIGURATION:Youhavefinishedtheinstallationalready.Herecomesthefunpart.TouseourtemplateandVirtuemartitselfasexpected(orasyouseethingsinourDEMO);therearesomeimportantparametersyouwanttoconfigureinthebackend. IfyouhavegonethroughQuickStartinstallationmethod,mostofthesettingsexplainedherewillbeappliedautomatically.Buttakealookbelowanyway,becauseitisgoodtoknow.
2.1. WhattodowhenyouupdateVirtuemart.IfyouhaveinstalledthetemplatewithQuickStartpackageandupdatedyourVirtuemartcomponenttoanynewerversion–OR–ifyouinstallthetemplatewithOne-ByOnemethodthenyouwouldneedtofollowthese3tutorials.
2.1.1. Tutorial1:ToshowmanufacturerLOGOsFollowthistutorialbelow,onlyifyouwanttoshowManufacturerLOGOincategoryandproductpage.http://www.flexiblewebdesign.com/forum-joomla-virtuemart-template-sportmart-support/2089-tutorial-1-
to-show-manufacturer-logos***Thismodificationisnotnecessaryanymore***
2.1.2. Tutorial2:MultipleThumbnailsinCategoryPageFollowthistutorialbelow,onlyifyouwanttoshowmultipleproductpicturesinthecategorypage.http://www.flexiblewebdesign.com/forum-joomla-virtuemart-template-sportmart-support/2090-tutorial-2-multiple-thumbnails-in-category
2.1.3. Tutorial3:ModificationforVMCustom,StockableFollowthistutorialbelow,onlyifyouareusingVM–CustomField,StockableVariant
http://www.flexiblewebdesign.com-Copyright2009-2015©
6
http://www.flexiblewebdesign.com/forum-joomla-virtuemart-template-sportmart-support/2091-tutorial-3-modification-for-vm-custom-stockable
2.2. TranslatesometextsthatcomewithSportMart:Ourtemplate’slanguagefileislocatedinhere:ROOT/language/en-GB1/en-GB1.tpl_flexible_sportmart.ini1en-GBistheinitialsforEnglish;yourlanguagefileisstoredindifferentfolderdependsontheinitials.
Therearenottoomanylinesinthatfile;youcandothetranslationbyyourselfincoupleminutes.Theyareextremelybasictexts.
2.3. ChangingparametersforVirtuemartpagesbyUsingplg_flexibleTemplatePlugin:
NavigatetoyourPluginManagerinJoomlaBack-end,andfindthistemplate:FlexibleVM2Templateplugin,
Thispluginincludesmorethan100parameters,changethemasyouwishandcustomizethelayoutofVirtuemart-relatedpages.
http://www.flexiblewebdesign.com-Copyright2009-2015©
7
2.4. ImportantVirtuemartSettings:OpentheJoomla!Back-endandnavigatetoyourVirtuemartComponent,thenclickthe"Configuration"link.
IfyouwouldlikehavethesamePricelayoutthatyouseeinourDEMOwebsite:Basicallywhenthereisdiscount,theoldpricegetscrossedover(line-through)andthediscountpercentagewillbecalculatedandbeshown.
http://www.flexiblewebdesign.com-Copyright2009-2015©
8
ThenyouneedtoenablethosepricingparametersbelowinyourConfiguration(seethescreenshotbelow).Youcanselectmoreoptions(suchas:TaxAmountetc..),butyoushouldatleastchoosethese
optionsbelow:
2.5. THISISVERYIMPORTANT.READTHIS,OTHERWISETHEPRICEMIGHTNOTGETCROSSED(LINE-THROUGH)
IfyourwebsiteisalreadyapplyingTAX,thenyouareOK.Thereisnothingtoworryabout.BUTifyouarenotapplyingTAX,thentheprice(somehow)refusestogetcrossedincaseofanydiscount.VirtuemartshowstheDISCOUNTEDpriceandtheDISCOUNTamount,butrefusetoshowtheoriginal(old)price,thereforetherewouldbenopricetogetcrossed,alsothepercentagedoesn’tworkaswellsincethe
original(old)priceisunknown.Anyway,thesolutioniseasyanddoesn’trequireanyCoreVirtuemartHack;navigatetoProducts>Taxes&CalculationRules
intheVMBackend,andcreateaNEWTaxRULE,anddefineitas0%TAX(perproduct),sobasicallytherewon’tbeTAXatall,butthesystemwillpretendliketherewasaTAX,anddothemathcalculationasif
therewas.ThisisthemostappropriatesolutionwithoutgoingintomuchVirtuemartCoreFiles(modifyingVirtuemartCorefilesisnotrecommended!unlessyouare100%sureyouknowwhatyouaredoing.)
2.6. ChangingPriceLabelsIfyouwouldliketochangeyourpricelabels Basepricewithtax/Basepricewithouttax to “ListPrice”, SalesPrice to “OurPrice” Discount to “YouSave”(ortowhateveryouwant)
http://www.flexiblewebdesign.com-Copyright2009-2015©
9
Thefileyouneedtomodifyisthis:yourdomain.com/language/en-GB3/en-GB.com_virtuemart.inien-G3isforEnglishVirtuemarts.ItwillbewhateverlanguageyoucurrentlyhaveforyourVirtuemart.Forexample;forFrench,itisfr-FR
Inthisfile;lookforthetextyouwanttochange,andchangethetexttoanything.ThisfileactuallyisthetranslationfileforyourVirtuemartComponent.Forexample,youcanremovethe“NoAdditionalCharge”textfromthislanguageINIfilethatappearsintheCustomFieldattributes.Ifyouwanttoremoveanythingfromthelanguagefile,thendon’tcompletelyremovetheline,butmakeitblank.Forinstance;replacethisline:COM_VIRTUEMART_CART_PRICE_FREE="No additional charge" Withthis:COM_VIRTUEMART_CART_PRICE_FREE=" "
http://www.flexiblewebdesign.com-Copyright2009-2015©
10
2.7. VirtuemartBackend>>Configuration>>TemplateIntheconfigurationsection,click“Templates”tabfromtheheaderbar,takealookatthescreenshot;
Makesureyouhavethesamesettingsasthescreenshotabove,whichare:
andDefaulttemplateforyourshop:UseJoomlaDefaultCategoryLayout:(VMTemplate–CleanMartcomeswith2differentcategorybrowsepagelayoutversions,eachversionincludes3Viewoptions:ListView,GridView,MultiGridView.YoucanchangetheDefaultView(theViewoptionthatshowsoffwhenvisitoropenthepage)optionthroughFlexilbeVM2Templateplugin.Chooseanycategorylayoutversionthatyou’dlikethroughVirtuemartConfiguration).TheselayoutscomewithourVMTemplate:-a. default b. flexV2c. flexv3 TheremightbesomemoreinthedropdownlistinVMConfigurationbutonly3ofthemarebelongtoourtemplate.
DefaultNumberofcategoriesinarow:3(recommendedvalueis3,buttryandseehowitlookslikewith2,4oreven5)
ProductLayout:(Chooseanyproductdetailslayoutversionthatyou’dlikethroughVirtuemartConfiguration).Theproductdetailspage layoutscomewithourtemplateare:d. defaulte. flexV2 TheremightbesomemoreinthedropdownlistinVMConfigurationbutonly2ofthemarebelongtoourtemplate.
Numberofproductsinarow:3(recommendedvalueis3,buttryandseehowitlookslikewith2,4oreven5.)
3
4 5
6
3
4
5
6
2
1
1 2
http://www.flexiblewebdesign.com-Copyright2009-2015©
11
Wearestillon“Templates”tab,scrolldownthepagelittlebitandlookatthescreenshotbelow
Enable“UseFancybox”option.Itisa“MUST”option.Disable“jQuery”relatedparameterbecauseitisnotnecessary.SportMartisalreadyloadingjQuery1.8andnoneedtoloadmultiplejQuerylibraries.Ifenable/disablingthatoptionstilldoesn’t
solvetheconflictproblem;thenyoucaninstallthisplugin:jQueryEasypluginandchoosejQuery1.8fromthedropdown.Formoreinfoaboutthatpluginvisithere:http://www.flexiblewebdesign.com/forum-virtuemart-2-template-puremart-support/523-the-easiest-way-to-solve-jquery-conflict-issuesBasically,thatpluginwillblockallthejQuerylibraryfromthewebsite,andwillloadwhateveryouchoose(fromGoogleApi)
Enablethe“DynamicThumbnailResizing”option.(Weneedthisinthe4thstep)Forthebestuseofourtemplate,youshouldsetyourthumbnailsizebiggerthan250pxby250px(350x350isrecommended).Makingthemtoolargeortoosmallvaluesmightcreatesomeweird
visualbugs.Ifyoualreadyhaveuploadedpictures,youhaveanongoingwebsiteandyourthumbnailsarelargerorsmallerthanthesevalues,CleanMartmightnotlookcool.Whenyouchangethosevalues,youwon’tseetheaffectsinthefront-endrightaway,becauseyourthumbnailswerealreadygeneratedbasedonolddimensions.Youneedtore-generatethethumbnails.Tore-generatethethumbnailbasedonthenewpixelvalues,removethisfolder:yourdomain.com/images/stories/virtuemart/product/resized/
1
2
3
4
http://www.flexiblewebdesign.com-Copyright2009-2015©
12
Whenyoure-visityourwebsite,youwillseethatfolderisre-createdandthethumbnailarere-generatedwiththenewdimensionsyouhaveentered.
2.8. VirtuemartBackend>>Configuration>>CheckoutNow,clickthe“Checkout”tabandlookbelowforthescreenshot:
Noneedtogooverthedetails.Makesureyouhavethesamesettings.
2.9. Product&CategoryLayoutoverrideissueYouhavechangedthecategorylayoutfromConfiguration,butsomeofyourcategoriesorproductsaretendtousesomeanotherlayoutthanwhatyouhavechosen.Thereare2placesthatyoushouldcheckitoutforconfiguringCategoryPageandProductDetailpagelayouts.First;clickthelinkthatyouseeinthescreenshotbelow.
Thenclickanycategoryfromthelist(startfromthefirstandcheckallofthemonebyone),afteryouclickanyofthem,scrolldownthepagelittlebitandlookatthescreenshotbelow:
http://www.flexiblewebdesign.com-Copyright2009-2015©
13
Makesureforthatparticularcategory“DefaultNumberofProductsperRow”fieldis0,Don’tgetconfusedwiththe0(zero).Ifthisfieldis0,itmeans;itwillbewhatevernumberyouhavesubmittedfromtheconfiguration(whichwediditintheStep#3).Ifitisanythingratherthan0,thenitwillbeoverwrittenforthatparticularcategory.Alsolookatthelast3fields,andmakesuretheyare: CategoryTemplate:Useshopdefault CategoryBrowsePage:NoOverride DefaultPridyctDetailsPage:NoOverride Ifsomeparticularproductsinsistongettingtheparticularproductdetailslayout,thenopenthatparticularproduct.AndmakesureProductDetailsPage:NoOverrideisselected.
http://www.flexiblewebdesign.com-Copyright2009-2015©
14
2.10. Availability(shippingtime)iconsPeoplehaveaskedthissomanytimes,Ishouldmentionaboutit;TheshipmenticonthatyouseeinourDEMO,thatsays:1-2days,24hours,3-5daysshipping..etc.theyappearonlyifyouselectanyofthem.Whileyouareintheproducteditpage.(thescreenshotbelowwastakenfrom“producteditpage”).Clickthe“ProductStatus”tab.
AndtheseiconsareENGLISH.Youmightwanttotranslatethemtoyournativelanguage.Thisisalsoeasy,becausethosePNGimagescomewithPSD(PhotoshopDocument)Sourcefiles.Basically,openthePSDfilewithanyAdobePhotoshopversion,editthetextandsaveasPNG(overwritewiththeexistingone).PSDandPNGfilesarestoredinthesamefolderwiththesamefilename.Forinstance,theavailabilityiconthatsays1-2MonthsisPNGandstoredinhere:
ROOT/templates/flexible_sportmart/html/com_virtuemart/assets/images/availability/1-2m.png
AndthePSDofthaticonislocatedhere:
AndselectaShipmentIconfromthisdropdownbox.Thantheiconwillstartappearingintheproductdetailpage.(Forthisspecificproduct)
http://www.flexiblewebdesign.com-Copyright2009-2015©
15
ROOT/templates/flexible_sportmart/html/com_virtuemart/assets/images/availability/1-2m.psdYouarefreetorestylethemandmakethemlookasyouwish.Usingthelocalshipmentcompanylogointheiconisrecommend!Youcanusewww.iconfinder.comtogetfreeiconstouseinsidethoseavailabilityimages.
2.11. CreatingSPECIFICATIONTABinproductdetailspage
Youshouldcreatenon-cart“String”customfieldandenter“ontop”to“layoutposition”field.Then;theywillbelistedunder“Specifications”TABintheproductdetailspage.Lookatthescreenshotbelow:
SpecificationsTAB
http://www.flexiblewebdesign.com-Copyright2009-2015©
16
Basicallyyouaregoingtodoitforallspecificationparametersyouaregoingtocreate(materials,warrantyetc..).Thenbrowseanyproduct,addthosecustomfieldsandsubmitvaluesforthem.
CustomFieldType:String
CartAttribute:NO
LayoutPosition:ontop
http://www.flexiblewebdesign.com-Copyright2009-2015©
17
2.12. That’sallfolks;)
Thanksforreadingthetutorial.Hopeyou’llfindituseful.
Thanksforbuyingthistemplate,hopeyou’lllikeit.FlexibleWebDesignTeamhttp://www.flexiblewebdesign.com/support
Top Related