//Flexible–Joomla+VirtuemartTemplate–Asymmetric//version2.0//authorFlexibleWebDesignTeam//copyright(C)2011-flexiblewebdesign.com//licenseGNU/GPLv3http://www.gnu.org/licenses/gpl-3.0.html

FLEXIBLEWEBDESIGNTEAMJoomla+Virtuemart3Template–Asymmetric

TUTORIALINSTALLATIONAsymmetricTemplate(in2Methods): Explainingthefilesandfolders.

OnceyouUNZIPtheInstallationfilethatyoudownloadfromourserver,youwillget2foldersand2files.

ReleaseNotes.txt=IncludestheReleaseHistory. TUTORIAL.pdf=Youarenowreadingit:) QuickStart<Folder>=TheMagicfolder.ItistheQuickStartpackagetoinstalleverythingatonce. One-ByOne<Folder>=Seebelowfordescriptionofeachfile

*One-ByOne>tmp_flexible_asymmetric.zip=AsymmetricJoomlaTemplateinstallationfile. *One-ByOne>plg_flexibleTemplate.zip=PluginforAsymmetricJoomlaTemplate.

*One-ByOne>mod_flexible_vm3_cart.zip=Shoppingcartmodule. *One-ByOne>plg_FlexibleVm3cart.zip=Plugintorunshoppingcartmodule

One-ByOne>mod_flexible_vm_pros_by_cats.zip=FlexibleModernSliderModule. *Requirementsforinitialinstallation.

1.METHOD:InstallingthroughQuickStartPackageThisisthemagicfolder;onceyouperformedthisinstallationyouwillgetexactlythesamelayoutandcontentsasyouseeinourDEMO.Basicallytakethe2filesfrominsidetheQuickStartfolderanduploadthemtoyourserverthroughFTPClient.Forinstance,ifyourdomainiswww.domain.com,then2filesshouldbelocatedhere:

- http://www.domain.com/kickstart.php- http://www.domain.com/QuickStart-AkeebaBackup.zip

Andsimplybrowsethiskickstart.phpthroughyourbrowserandfollowtheinstructions.YoucanwatchthistutorialvideobelowifyouareunfamiliarwithAkeebaBackupinstallationprocedure.https://www.youtube.com/watch?v=hlU1HSWMs7c

AfteryouperformtheQuickStartinstallation,youwillgetpre-installedthese:

- Joomla!3.5.6- Virtuemart3.2.1- AsymmetricTemplate[template+plugin]- ShoppingCart[Module+Plugin]- FullScreenSlideshowModule- RevolutuionSlideshowComponent&Module- Sampledata[articles+module+virtuemartsampleproductsthatyouseeinourDEMO]-

Allinall,everything!!!IwouldstronglysuggestyoutogothroughQuickStartinstallation.ThengotoVirtuemartComponent,deletethealreadycreatedproducts/categoriesandaddyours.Youwillbegoodtogo.Q:Today’sVirtuemart/JoomlaversionsisnewerthanwhatcomeswiththisQuickStartpackage.A:FirstgothroughtheQuickStart,andthensimplyupdatethejoomla/Virtuemartbyclickingtheupdatebuttonsthroughjoomlabackend.

2.METHOD:InstallingeverythingOne-ByOne.IfyoualreadyhavejoomlaandVirtuemartinstalledanddon’twantloseyourDATAs~OR~ifyoualreadyhaveAsymmetricinstalledandyouwant“update”it.Thenthismethodisforyou.YouaregoingtoinstallwhatevercomesfromourAsymmetricTemplateone-byonethroughJoomlaExtensionManager.IMPORTANT!Don’tforgettoinstallalloftheextensionsthatyouseeinOne-ByOnefolder.OtherwiseyoumightendupwithsomeFATALerrors.

BeforegoingthroughOne-ByOneinstallation,makesureyoualreadyhave;- Joomla3.6.xx[requirement]- Virtuemart3.2.xx[requirement]- VirtuemartAIO3.2.xx[requirement]-

ThenproceedtoinstallallextensionsOne-ByOne.

One-ByOne>tmp_flexible_asymmetric.zip=AsymmetricJoomlaTemplateinstallationfile.[requirement] One-ByOne>plg_flexibleTemplate.zip=PluginforAsymmetricJoomlaTemplate.[requirement]

One-ByOne>mod_flexible_vm3_cart.zip=Shoppingcartmodule.[requirement]One-ByOne>plg_FlexibleVm3cart.zip=Plugintorunshoppingcartmodule.[requirement]

One-ByOne>mod_flexible_vm_pros_by_cats.zip=FlexibleModernSliderModule[optional]

Atfirstthelayoutmightlookempty,itisbecausethemodulepositionshavebeenchangedandyoudon’thaveanydefinedmodulesyet.Browsethe“ModuleManager”anddefinemodulesinallmodulepositions.

Eitherfollowthe1.Methodandinstalleverythingatonce,orfollowthe2.Method.Theinstallationwillbecompleted.

HerecomesthefunPart:CONFIGURINGAsymmetric:Youhavefinishedtheinstallationalready,herecomesthefunpart.InordertouseourtemplateandVirtuemartitselfasexpected(orasyouseethingsinourDEMO);therearesomeimportantparametersyouwanttoconfigure. IfyouhavegonethroughQuickStartinstallationmethod,mostofthesettingsexplainedherearealreadyappliedinyourwebsite.ButtakealookbelowifyouarenewtoVirtuemart+Joomla.

v MultipleThumbnailsinCategoryPage:

Followthistutorialbelow,onlyifyouwanttoshowmultipleproductpicturesinthecategorypage.http://www.flexiblewebdesign.com/forum-joomla-virtuemart-template-sportmart-support/2090-tutorial-2-multiple-thumbnails-in-category

v TranslatesometextsthatcomewithAsymmetric:OurAsymmetricTemplate’sLanguagefileislocatedinhere:ROOT/language/en-GB1/en-GB1.tpl_flexible_asymmetric.ini1en-GBistheinitialsforEnglish;yourlanguagefileisstoredindifferentfolderdependsontheinitials.Forinstance,itisROOT/language/fr-FR/fr-FR.tpl_flexible_asymmetric.iniforFrench

Therearenottoomanylines;youcandothetranslationbyyourselfincoupleminutes.Theyareextremelybasictexts.

v ChangingparametersforVirtuemart–relatedpagesbyUsingplg_flexibleTemplatePlugin:

OpenyourPluginManagerinJoomlaBack-end,andfindthistemplate:FlexibleVM3Templateplugin,thispluginincludesmorethan150parameters,changethemasyouwishandcustomizethelayoutofVirtuemart-relatedpages.

v ImportantVirtuemartSettings:

OpentheJoomla!Back-endandnavigatetoyourVirtuemartComponent,thenclickthe"Configuration"link.

IfyouwouldlikehavethesamePricelayoutthatyouseeinourDEMOwebsite:

Whichlookthosebelow(basicallywhenthereisdiscount,theoldpricegetscrossedover(line-through):

ThenyouneedtoenablethosepricingparametersbelowinyourConfiguration(seethescreenshotbelow).Youcanselectmoreoptions(suchas:TaxAmountetc..),butyoushouldatleastchoosetheseoptionsbelow:

v THISISVERYIMPORTANT.READTHIS,OTHERWISETHEPRICEWON’TGETCROSSED(LINE-THROUGH)

IfyourwebsiteisalreadyapplyingTAX,thenyouareOK.Thereisnothingtoworryabout.BUTifyouarenotapplyingTAX,thentheprice(somehow)refusestogetline-throughinsomecases.VirtuemartshowstheDISCOUNTEDpriceandtheDISCOUNTamount,butrefusetoshowtheoldprice,thereforetherewouldbenopricetogetline-through,alsothepercentagedoesn’tworkaswellsincetheoldpriceisunknown.Anyway,thesolutioniseasythough;goto

Products>Taxes&CalculationRulesIntheVMBackend,andcreateaNEWTaxRULE,anddefineitas0.00%TAX(Taxperproduct),sobasicallytherewon’tbeTAXatall,butthesystemwillpretendliketherewasaTAXsoitwillshowthepricesproperly.Thisisthe

mostappropriatesolutionwithoutanyVirtuemarthack.

v ChangingPriceLabelsIfyouwouldliketochangeyourpricelabels Basepricewithtax/Basepricewithouttax to “ListPrice”, SalesPrice to “OurPrice” Discount to “YouSave”(ortowhateveryouwant)Thefileyouneedtomodifyisthis:yourdomain.com/language/en-GB3/en-GB.com_virtuemart.inien-G3isforEnglishVirtuemarts.ItwillbewhateverlanguageyoucurrentlyhaveforyourVirtuemart.Forexample;forFrench,itisfr-FR

Inthisfile;lookforthetextyouwanttochange,andchangethetexttowhatyouwouldlikethenyouaredone.ThisfileactuallyisthetranslationfileforyourVirtuemart.YoucanchangeanytextyouwouldlikeviathisLanguagefile.Forexample,youcanremovethe“NoAdditionalCharge”textfromthislanguageINIfilethatappearsintheCustomFieldattributes.

v Checkandmakesureeverythingiscorrectlyset.Intheconfigurationsection,click“Templates”tabfromtheheaderbar,takealookatthescreenshot;

Makesureyouhavethesamesettingsasthescreenshotabove,whichare:

andDefaulttemplateforyourshop:UseJoomlaDefaultCategoryLayout:(VMTemplate–CleanMartcomeswith2differentcategorybrowsepagelayoutversions,eachversionincludes3Viewoptions:ListView,GridView,MultiGridView.YoucanchangetheDefaultView(theViewoptionthatshowsoffwhenvisitoropenthepage)optionthroughFlexilbeVM3Templateplugin.Chooseanycategorylayoutversionthatyou’dlikethroughVirtuemartConfiguration).TheselayoutscomewithourVMTemplate:-a. default b. flexV2c. flexv3 TheremightbesomemoreinthedropdownlistinVMConfigurationbutonly3ofthemarebelongtoourtemplate.

DefaultNumberofcategoriesinarow:3(recommendedvalueis3,buttryandseehowitlookslikewith2,4oreven5)

ProductLayout:(Chooseanyproductdetailslayoutversionthatyou’dlikethroughVirtuemartConfiguration).Theproductdetailspagelayoutscomewithourtemplateare:d. defaulte. flexV2 TheremightbesomemoreinthedropdownlistinVMConfigurationbutonly2ofthemarebelongtoourtemplate.

Numberofproductsinarow:3(recommendedvalueis3,buttryandseehowitlookslikewith2,4oreven5.)

Wearestillon“Templates”tab,scrolldownthepagelittlebitandlookatthescreenshotbelow

3

4 5

6

3

4

5

6

2

1

1 2

Enable“UseFancybox”option.Itisa“MUST”option.Disable“jQuery”relatedparameterbecauseitisnotnecessary.JoomlaisalreadyloadingjQueryandnoneedtoloadmultiplejQuerylibraries.Ifenable/disablingthatoptionstilldoesn’tsolvetheconflictproblem;then

youcaninstallthisplugin: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).Makingthemtoolargeortoosmallvaluesmightcreatesomeweirdvisualbugs.Ifyoualready

haveuploadedpictures,youhaveanongoingwebsiteandyourthumbnailsarelargerorsmallerthanthesevalues,CleanMartmightnotlookcool.Whenyouchangethosevalues,youwon’tseetheaffectsinthefront-endrightaway,becauseyourthumbnailswerealreadygeneratedbasedonolddimensions.Youneedtore-generatethethumbnails.Tore-generatethethumbnailbasedonthenewpixelvalues,removethisfolder:yourdomain.com/images/stories/virtuemart/product/resized/Whenyoure-visityourwebsite,youwillseethatfolderisre-createdandthethumbnailarere-generatedwiththenewdimensionsyouhaveentered.

v Now,clickthe“Checkout”tabandlookbelowforthescreenshot:v

1

2

3

4

v

Noneedtogooverthedetails.Makesureyouhavethesamesettings.

Peoplehaveaskedthissomanytimes,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_CoolMart/html/com_virtuemart/assets/images/availability/1-2m.pngAndthePSDofthaticonislocatedhere:ROOT/templates/flexible_CoolMart/html/com_virtuemart/assets/images/availability/1-2m.psdYouarefreetorestylethemandmakethemlookasyouwish.Usingthelocalshipmentcompanylogointheiconisrecommend!Youcanusewww.iconfinder.comtogetfreeiconstouseinsidethoseavailabilityimages.

AndselectaShipmentIconfromthisdropdownbox.Thantheiconwillstartappearingintheproductdetailpage.(Forthisspecificproduct)

v CreatingSPECIFICATIONTABINproductdetailspage

Youshouldcreatenon-cart“string”customfieldandenter“ontop”to“layoutposition”field.Then;theywillbelistedas“Specifications”intheproductdetailspage.Lookatthescreenshotbelow

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

CustomFieldType:String

CartAttribute:NO

LayoutPosition:ontop

SpecificationsTAB

That’sallfolks.

Thanksforbuying.FlexibleWebDesignTeamhttp://www.flexiblewebdesign.com/support