FLEXIBLE WEB DESIGN TEAM...v Joomla! 3.5.1 v Virtuemart Component 3.0.16 v Virtuemart AIO Component...

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


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


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


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


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


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.


7

2.4. ImportantVirtuemartSettings:OpentheJoomla!Back-endandnavigatetoyourVirtuemartComponent,thenclickthe"Configuration"link.

IfyouwouldlikehavethesamePricelayoutthatyouseeinourDEMOwebsite:Basicallywhenthereisdiscount,theoldpricegetscrossedover(line-through)andthediscountpercentagewillbecalculatedandbeshown.


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)


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=" "


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


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


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:


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.


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)


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


16

Basicallyyouaregoingtodoitforallspecificationparametersyouaregoingtocreate(materials,warrantyetc..).Thenbrowseanyproduct,addthosecustomfieldsandsubmitvaluesforthem.

CustomFieldType:String

CartAttribute:NO

LayoutPosition:ontop


17

2.12. That’sallfolks;)

Thanksforreadingthetutorial.Hopeyou’llfindituseful.

Thanksforbuyingthistemplate,hopeyou’lllikeit.FlexibleWebDesignTeamhttp://www.flexiblewebdesign.com/support

FLEXIBLE WEB DESIGN TEAM...v Joomla! 3.5.1 v Virtuemart Component 3.0.16 v Virtuemart AIO Component...

Documents

Transcript of FLEXIBLE WEB DESIGN TEAM...v Joomla! 3.5.1 v Virtuemart Component 3.0.16 v Virtuemart AIO Component...