// Flexible – Joomla + Virtuemart Template – Asymmetric // version 2.0 // author Flexible Web Design Team // copyright (C) 2011- flexiblewebdesign.com // license GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html FLEXIBLE WEB DESIGN TEAM Joomla + Virtuemart 3 Template – Asymmetric TUTORIAL INSTALLATION Asymmetric Template (in 2 Methods): Explaining the files and folders. Once you UNZIP the Installation file that you download from our server, you will get 2 folders and 2 files. Release Notes.txt = Includes the Release History. TUTORIAL.pdf = You are now reading it :) QuickStart <Folder> = The Magic folder. It is the Quick Start package to install everything at once. One-By One <Folder> = See below for description of each file * One-By One > tmp_flexible_asymmetric.zip = Asymmetric Joomla Template installation file. * One-By One > plg_flexibleTemplate.zip = Plugin for Asymmetric Joomla Template. * One-By One > mod_flexible_vm3_cart.zip = Shopping cart module. * One-By One > plg_FlexibleVm3cart.zip = Plugin to run shopping cart module One-By One > mod_flexible_vm_pros_by_cats.zip = Flexible Modern Slider Module. * Requirements for initial installation.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
//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
Related Documents
