/*------------------------------------------------------------------------#Virtuemart3Template-MaterialMart#------------------------------------------------------------------------#Copyright(C)2009-2017FlexibleWebDesign.AllRightsReserved.#@licensehttp://www.gnu.org/licenses/gpl-3.0.htmlGNU/GPLv3#Author:FlexibleWebDesign#Website:http://www.flexiblewebdesign.com#Email:info@flexiblewebdesign.com-------------------------------------------------------------------------*/
FLEXIBLEWEBDESIGNTEAMFlexibleVirtuemartTemplate–MaterialMart(forVM3.xonly)
TUTORIAL
INSTALLATIONMaterialMartVM3Template(in3steps): 1.STEP:Explainingthefilesandfolders.
OnceyouUNZIPtheInstallationfilethatyoudownloadfromourserver,youwillgetcouplefoldersandfiles.Let’stakealookatthem.
ReleaseNotes.txt=Includesthereleasehistory. Plg_flexibleTemplate.zip=pluginthatyouneedtoinstalltoyourJoomla!(lookat2.step) Drag-and-Drop(folder)=youaregoingtouploadthosefolderstoaspecificlocation(lookat3.step) FlexibleShoppingCartModule(folder)=FlexibleDropdownShoppingcartModule(Installationisoptional) TUTORIAL.PDF=youarenowreadingit:)
Drag-and-Drop>com_virtuemart=Templateoverridingfor(official)VirtuemartComponentDrag-and-Drop>mod_virtuemart_product=Templateoverridingfor(official)VMFeaturedProductmodule
Drag-and-Drop>mod_virtuemart_search =Templateoverridingfor(official)VMSearchmoduleDrag-and-Drop>mod_virtuemart_category=Templateoverridingfor(official)VMCategorymoduleDrag-and-Drop>mod_virtuemart_currencies=Templateoverridingfor(official)VMCurrencymoduleDrag-and-Drop>mod_virtuemart_manufacturer=TemplateoverridingforVMManufacturermodule
2.STEP:Installingplg_flexibleTemplate.zipPlug-intoJoomla!Youaregoingtoinstallitasifyouareinstallinganyotherjoomlaplugin/components/module.SeethescreenshotifyouareanoobwithJoomla.
YouneedtopublishthePlugin.Andleaveitas“published”allthetime!
Openthepluginandcheckoutthebackendparameters.Firstofall,typeyour“username”andyourorder-IDintothepluginfields.
𝑼𝒔𝒆𝒓𝒏𝒂𝒎𝒆: 𝑌𝑜𝑢𝑟 𝑢𝑠𝑒𝑟𝑛𝑎𝑚𝑒 𝑖𝑛 𝑓𝑙𝑒𝑥𝑖𝑏𝑙𝑒𝑤𝑒𝑏𝑑𝑒𝑠𝑖𝑔𝑛. 𝑐𝑜𝑚 𝑶𝒓𝒅𝒆𝒓− 𝑰𝑫: 𝑇ℎ𝑒 𝑜𝑟𝑑𝑒𝑟 𝑛𝑢𝑚𝑏𝑒𝑟 𝑦𝑜𝑢 𝑔𝑜𝑡 𝑤ℎ𝑖𝑙𝑒 𝑝𝑢𝑟𝑐ℎ𝑎𝑠𝑖𝑛𝑔 𝑡ℎ𝑖𝑠 𝑡𝑒𝑚𝑝𝑙𝑎𝑡𝑒.Therearealmost100differentparameterstohide/showoractivate/deactivatefeatures.Carefullygooveralltheparameters;eachtimeyouchange1thing;openthewebsiteandseetheresult.Otherwiseyoumaygetlost;)
3.STEP:CopyingFolderstoproperlocationWehavegot6foldersunderthe“drag-and-drop”folder.Uploadthesefolderstohereonyourserver:𝑗𝑜𝑜𝑚𝑙𝑎𝑅𝑜𝑜𝑡!/templates/𝑦𝑜𝑢𝑟𝑇𝑒𝑚𝑝𝑙𝑎𝑡𝑒!/html/
𝑗𝑜𝑜𝑚𝑙𝑎𝑅𝑜𝑜𝑡!=isthelocationwhereyourjoomlaisinstalled.𝑦𝑜𝑢𝑟𝑇𝑒𝑚𝑝𝑙𝑎𝑡𝑒!=isthejoomlatemplatefolderyouareusingcurrently.
Let’ssayyouareusingT3JoomlaTemplate,thenthefoldersshouldbedraggedanddroppedtohere:
QUESTION&ANSWER:Q:UndermyHTMLfolder,thereisalreadyafoldercalled“com_virtuemart”or“mod_virtuemart_product”oroneoftheothers,whatshouldIdo.A:LookslikeyourJoomlaTemplateisalsousing“templateoverriding”tostylethevirtuemartrelatedpages.Butfromnowon,ourtemplatewilltakecarethesestylizations.Thereforeyoushouldremovetheoldoneanddrag-and-
dropoursinstead.(Alternativelyyoucanrenametheoldfolderinsteadofdeletingitcompletely.Renametheoldfolderfromcom_virtuemarttocom_virtuemart2anduploadoursinstead)Q:Idon’tknowwhatjoomlatemplateIamusing,orIcan’tbesure.A:Browseyourjoomla-backendpanel.AndclickExtensions->TemplateManager
Frombelowscreenshot,findoutwhichjoomlatemplateyouareusingfor“site”location.
Q:Ifoundoutmytemplate,andbrowsedthatfolder,butthereisnoHTMLfolderinitA:Youcancreateanewfolderwiththenameof“HTML”manually.
Theinstallationisdone,MissionAccomplished:)
HerecomesthefunPart:CONFIGURINGMaterialMart:1- MultipleProductPicturesonCategoryBrowsePage.
MaterialMartcomesafeatureofshowingmorethan1productthumbnailsinthecategorybrowsepage.ButthereissmallpatchthatshouldapplytoVirtuemartCorefileinordertoachievethisfeature.Don'tworry,thisisnotaCoreHack,itisaninnocentcustomization.Visitthelinkforbelowforthetutorial:http://flexiblewebdesign.com/index.php?option=com_kunena&view=topic&catid=22&id=1410&Itemid=234FYI:EveytimeyouupdateyourVirtuemart(toanynewversion)youneedtore-applythispatchagain.Becauseeachupdateretrievesyourcodeeditbacktooriginalstate.
Joomlatemplatename
2- TranslationofMaterialMart.MaterialMart(FlexibleVM3TemplatePlugin)comeswithlanguageINIfilewhereyoucanmakethetranslation.ThelanguageINIfileislocatedhere: ROOT//administrator/languages/𝐞𝐧− 𝐆𝐁/𝐞𝐧− 𝐆𝐁.plg_flexibleTemplate. inii.e:IfyourwebsiteisinFrench,thentakethatfileanduploadtohere: ROOT//administrator/languages/𝐟𝐫− 𝐅𝐑/𝐟𝐫− 𝐅𝐑.plg_flexibleTemplate. iniThenopenitandapplyyourFrenchtranslations.Therearearound20lineswaitingforyoutotranslate.
3- IfyouwouldlikehavethesamePricelayoutthatyouseeinourDEMO:(Basicallywhenthereisdiscount,itoverridestheoldpriceandputthe“percentage”nexttodiscountedamount):
ThenyouneedtoenablethosepricingparametersbelowinyourConfiguration(seethescreenshotbelow).Youcanselectmoreoptions(suchas:TaxAmountetc..),butyoushouldatleastchoosetheseoptionsbelow:
Ifyouwouldliketochangeyourpricelabelsfrom; Basepricewithtax/Basepricewithouttax to “ListPrice”, SalesPrice to “OurPrice” Discount to “YouSave”.Thefileyouneedtomodifyisthis:
yourdomain.com/components/com_virtuemart/language/en-GB3/en-GB.com_virtuemart.inien-G3isforEnglish.ItwillbewhateverlanguageyoucurrentlyhaveforyourVirtuemart.Forexample;forFrench,itisfr-FR
Inthisfile;lookforthetextyouwanttochange,andchangethetexttowhateveryouwouldlike.ThisfileactuallyisthetranslationfileforyourVirtuemart.Youcanchange/modifyanytextyouwouldlike.Forexample,youcanremovethe“NoAdditionalCharge”textfromthislanguageINIfilethatappearsintheCustomFieldattributes.
4- Intheconfigurationsection,click“Templates”tabfromtheheaderbar,takealookatthescreenshotbelow;
Makesureyouhavethesamesettingsasthescreenshotabove,whichare:
Defaulttemplateforyourshop:UseJoomlaDefaultCategoryTemplate:UseJoomlaDefault• CategoryLayout:(VMTemplate–MaterialMartcomeswith2differentcategorybrowsepagelayoutversions,eachversionincludes3
Viewoptions:ListView,GridView,MultiGridView.YoucanchangetheDefaultView(theViewoptionthatshowsoffwhenvisitoropenthepage)optionthroughFlexilbeVM2Templateplugin.Chooseanycategorylayoutversionthatyou’dlikethroughVirtuemartConfiguration).TheselayoutscomewithourVMTemplate:-
a. default
3
4 5
6
3
2
1
1
2
b. flexV2 TheremightbesomemoreinthedropdownlistinVMConfigurationbutonly2ofthemarebelongtoourtemplate.
• DefaultNumberofcategoriesinarow:3(recommendedvalueis3,buttryandseehowitlookslikewith2,4oreven5)
• ProductLayout:(Chooseanyproductdetailslayoutversionthatyou’dlikethroughVirtuemartConfiguration).Theproductdetailspage
layoutscomewithourtemplateare:
a. defaultb. flexV2
TheremightbesomemoreinthedropdownlistinVMConfigurationbutonly2ofthemarebelongtoourtemplate.
Numberofproductsinarow:3(recommendedvalueis3,buttryandseehowitlookslikewith2,4oreven5.)
5- Wearestillon“Templates”tab,scrolldownthepagelittlebitandlookatthescreenshotbelow
Enable“UseFancybox”option.Itisa“MUST”option.Thisoptionisoptional.IFyouendupwithconsoleerrorafterinstallingMaterialMartorVirtuemart,IwouldrecommendyoutousejQueryEasypluginandchoosejQuery1.12.4fromthedropdown(orlatest)Formoreinfoaboutthatpluginvisithere:http://www.flexiblewebdesign.com/forum-virtuemart-2-template-puremart-support/523-the-easiest-way-to-solve-jquery-conflict-issues
Basically,thatpluginwillblockallthejQuerylibraryfromthewebsite,andwillloadonly1
4
5
6
1
2
Enablethe“DynamicThumbnailResizing”option.(Weneedthisinthe4thstep)Forthebestuseofourtemplate,youshouldsetyourthumbnailsizebiggerthan250pxby250px(350x350isrecommended).Makingthemtoolargeortoosmallvaluesmightcreatesomeweirdvisualbugs.Ifyoualreadyhaveuploadedpictures,youhaveanongoingwebsiteandyourthumbnailsarelargerorsmallerthanthesevalues,MaterialMartmightnotlookcool.Whenyouchangethosevalues,youwon’tseetheaffectsinthefront-endrightaway,becauseyourthumbnailswerealreadygeneratedbasedonolddimensions.Youneedtore-generatethethumbnails.Tore-generatethethumbnailbasedonthenewpixelvalues,removethisfolder:yourdomain.com/images/stories/virtuemart/product/resized/Whenyoure-visityourwebsite,youwillseethatfolderisre-createdandthethumbnailarere-generatedwiththenewdimensionsyouhaveentered.6- Now,clickthe“Checkout”tabandlookbelowforthescreenshot:
Noneedtogooverthedetails.Makesureyouhavethesamesettingsaboveforotheroptions.
7- YouhavechangedthecategorylayoutorproductdetailspagelayoutfromConfiguration>Template,but
someofyourcategoriesorproductspagesaretendtousesomeanotherlayoutotherthanyouchose.Thereare2placesthatyoushouldcheckitoutforconfiguringCategoryPageandProductDetailpagelayouts.First;clickProducts>ProductCategories.
3
4
Thenclickanycategoryfromthelist(startlookingfromtheproblematiccategory),afteryouclickoneofthem,scrolldownthepagelittlebitandlookatthescreenshotbelow:
Makesurefieldsare0orblank.OtherwisetheglobalsettingsthroughConfiguration>Templatewillbeoverwritten.Don’tgetconfusedwiththe0(zero).Ifthisfieldis0,itmeans;itwillbewhatevernumberyouhavesubmittedfromtheconfiguration(whichwediditintheStep#3).Ifitisanythingratherthan0,thenitwillbeoverwrittenforthatparticularcategory.Alsolookatthelast3fields,andmakesuretheyare: 1-Usershopdefault,2-Nooverride,3-NooverrideAlsobyusingtheaboveconfiguration,youcansetaparticularCategorylayoutandProductDetailPagelayoutforparticularcategories.Itisprettyusefullifyouwanttouseadifferentlayoutfordifferentcategories,ourtemplatealreadyhas2differentCategoryandProductlayoutversions,youcanusebothoftheminasinglewebsitefordifferentcategories.NOTICE:Afterclicking“save”button,“CategoryBrowsePage”fieldmightjumpbackto“default”or“flexv2”optionratherthan“NoOverride”,thisisnotaproblem.Itisnormal.Anyway,ThereisonemoreplacethatyoucanchangeProductDetailLayout(thistimeonlyproductdetaillayout,notcategorylayout).BrowseyourProductlist;andchooseoneofyourproductsfromthelist.
Peoplehaveaskedthissomanytimes,Ishouldmentionaboutit;TheshipmenticonthatyouseeinourDEMO,thatsays:1-2days,24hours,3-5daysshipping..etc.theyappearonlyifyouselectanyofthem.Whileyouareintheproducteditpage.(thescreenshotabovewastakenfrom“producteditpage”).Clickthe“ProductStatus”tab.
ThisfieldindicateswhichProductDetailpagewillbeusedforonlyforthisparticularproduct.Soitdoesn’tmatterwhatyouchosefromconfigurationorcategoriesconfigurationpages.Ifyouchangethisfieldtosomethingratherthan“nooverride”,itmeansitisfinalandthislayoutwillbeused(ofcourseonlyforthisspecificproduct).
AndselectaShipmentIconfromthisdropdownbox.Thantheiconwillstartappearingintheproductdetailpage.(Forthisspecificproduct)
CreatingSPECIFICATIONTABonproductdetailspage
Basicallyyoushouldcreatenon-cartandstringattributes,type“ontop”as“layoutposition”andtheywillbelistedinsidethe“Specifications”tabintheproductdetailspage.TocreateNon-Cartcustomfield,youshouldsubmit“ontop”to“layoutposition”fieldwhileyouarecreatingthecustomfield:
Basicallyyouaregoingtodoitforallspecificationparametersyouaregoingtocreate(materials,warrantyetc..).Thenbrowseanyproduct,addthosecustomfieldsandsubmitvaluesforthem.
Select,NOtocreateNon-cartattribute.
Type:ontopto“layout”field.
SpecificationsTAB