/*------------------------------------------------------------------------#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

Youdon’tneedtodoanythingforCheckoutsteps/shoppingcartandvirtuemartloginpagedesign,Theywillbechangedbyitself.

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