How to Create Multi-Language Store in Magento 2

1. HowtoCreateMulti-LanguageStorein Magento2 Manyecommercestoreshavemultiplestoreviewsbecausetheywanttoreachawider audienceinlanguagesthattheiraudienceisfamiliarwith.Whenacustomergetsinformation inafamiliarlanguage,itiseasierforthemtounderstandtheproductorservice.This,inturn, makesiteasierforthemtomakeapurchasedecision.Astoreinone’sownlanguagealso makesonefeelliketheycantrustthestore.Theyfeelcateredto.Thisincreasestheir chanceofcomingbacktoyourstore,providedtheoverallexperienceisgood. Inthisblog,wearegoingtotalkabouthowyoucanenablemultiplelanguagesinMagento2 orcreateamulti-languagewebsiteinMagento2. Here’sanextensivestep-by-stepguidetosetupyourownmultilingualstorefromMagento2 backend. HowtoCreateaMagentoMulti-LanguageStorelikeBelow: Bydefault,Magentoprovidesastoreviewfunctionalitywhereyoucancreatemultiplestore viewsinthelanguageofyourchoice.Youcandefinethelanguagesandhence,youcan havemultiplelanguagesupportinyourMagentostore. Let’sseehowwecancreateanewstoreviewinMagento2. HowtoCreateaNewStoreViewinMagento2 -LogintoyourMagentoadminpanel/backend. -FromtheStoresmenu,clickonAllStoresundertheSettingssection. -NowyoucanseeaCreateStoreviewbutton,asbelow:

2. Asyoucanseeintheimage,we’vealreadycreatedsomestoreviewswiththestorenameAsyoucanseeintheimage,we’vealreadycreatedsomestoreviewswiththestorename andcode.Similarly,asperyourpreference,youcanaddstoreviewswithname,codeand setstatusasenable/disable.Onceyou’vesetupyourstoreviews,youcanfixasortorder forstoreviewsandselectadefaultstoreviewforyourstore. Formoredetailedguideyoucanreferthislink: https://devdocs.magento.com/guides/v2.3/config-guide/multi-site/ms_websites.html HowtoSetupLocaleLanguageforYourStoreView: -Fromtheadminpanel,tapontheStoresmenu,thenunderSettings,choose Configuration. -Nowyoushouldabletoseeamenuontheleft.Underthat,youcanfindtheGeneraltab. ChooseGeneraltoopenconfiguration. -TochangeconfigurationforaspecificStoreview,youneedtoswitchthestorefromthetop ofthepage. -FromtheStoreview,listatthetopofthepage,chooseoneofthestoreviewsasshownin thefollowingfigure:

3. -Now,youshouldbeabletodefinethelocaleforthechosenstoreviewinMagento2.You-Now,youshouldbeabletodefinethelocaleforthechosenstoreviewinMagento2.You willhavetodeployyourthemestaticcontentformultiplelocalesasyouhaveconfiguredset upformultiplelanguages. Youcanrunthecommandgivenbelowtodeploystaticcontentforthemultiplelanguage: phpbin/magentosetup:static-content:deployen_GBen_USro_RO Hereinsteadofen_GBen_USro_RO,youneedtoaddyourownlanguagecodebasedon yourlocalesetup. Ifyouwillsetyourstoremodeasproductionatthattime,itwillautomaticallysetupastore anddeploycontentwithrequiredlocale. Now,youhavesetupamultiplelanguagestoreview,soyoucanproceedwiththe translation. HowtoTranslateThemeStaticContent: Therearetwowaystotranslatethetheme’sstaticcontent:Basedonthelanguage,youcan mapawordwiththelanguagespecificwordthatyouwanttotranslateittoorbyinstallinga languagepack. >>TranslateInline -Tousethisfeature,yourMagentostoreshouldbeindevelopermodebecauseonlythen youcanusetheInlinetranslation. -Beforeenablingtheinlinetranslationforproperoutput,youhavetodisablementioned cache.

4. >>HowtoDisableOutputCaches: -Intheadminsection,gotoSystemmenuandchooseCacheManagement. -Markthefollowingcheckboxes: -PageCache -BlocksHTMLoutput -Translations -SettheActionstoDisable.Then,clickSubmit. >>NowEnabletheInlineTranslation -IntheAdminpanelsidebar,clickonStoresandchooseConfiguration. -Toworkwithaspecificstoreview,clickonthenameofoneofyourstoreview,fromthe storeviewlist,thatistobeupdated. -Ontheleftsideofthepage,undertheAdvancedtab,chooseDevelopermode.(Ifyouare notabletoseeit,firstenablethedevelopermodeofyouMagento2backend.) -ExpandtheTranslateInlinegroup.Thenifnecessary,cleartheUseWebsitecheckbox, setEnabledforStorefronttoYesandsavetheconfiguration. >>UpdatetheText -Openthefrontend/storefrontinabrowser,andgotothepagethatyouwanttoedit.If necessary,usethelanguagechoosertochangethestoreview. Thetextofeachstringthatcanbetranslatedwillbeoutlinedinred.Whenyouhoverover anytextbox,abookicon(</span)appears. -ClickontoopentheTranslatewindow.ChecktheStoreViewSpecificcheckboxand provideyourcustomtextforthatstore. Nowyoucanrefreshthepagetoseetheupdatedstoreview.Youcanprocessthatwiththe otherelements.

5. Inordertodisabletheinlinetranslation,justsetvalueNoto‘EnabledforFrontend’fromInordertodisabletheinlinetranslation,justsetvalueNoto‘EnabledforFrontend’from theTranslateinlinegroupfromtheadminandsavetheconfigurations. >>LanguagePackandCSVbasedTranslation -FortheCSVbasedtranslation,youhavetocreateaCSVwiththelanguagecodelike en_US.csvorde_DE.csvwhichcontainstheoriginalphraseandthetranslatedphrasein thelanguageyouwanttotranslate. Youcanplacethisfileinthepathgivenbelow: app/design/frontend/{Vendorname}/{themename}/i18n/en_US.csv Youcanalsoinstallreadymadetranslatedlanguagepackifyoudonotwanttocreatea CSVwithyourownwordsandphrases.Youcandirectlyuseanylanguagepackandinstall thatinyourstore.Installitwiththecommandlineusingthecomposer. Youcangotothislinkandfindavailablelanguagepacks: https://packagist.org/?query=language%20pack%20magento%202 Insomecases,somewordsarenottranslatedusingthis.Forthat,staticcontentshouldbe addedinawaythatitcanbedetectedbythei18ntoolofMagento.Thiswayyou’llbeableto addthestringsinthedictionaryforthetranslation. >>StringAddedInthephtmlfile:

6. -Shouldusethe__('<your_string>')methodwhileaddingacustomstring,soitisableto-Shouldusethe__('<your_string>')methodwhileaddingacustomstring,soitisableto translate. Forexample: phpecho__('TranslationOriginalPhrase') phpecho__('Hello%s,Howareyou',$name) >>StringAddedfortheEmailtemplate: -Whenstringwillbeadded,needtousethefollowing{{trans“stringtextoftheprinting ”}} Forexample: {{trans"textoftheprinting"}} Whenastringisaddedwithavariablevalueintheemailtemplate: {{trans"%variablestring"variable="value"}} >>StringAddedfortheUIcomponenttemplatehtmlfile: Here,youneedtoimplementthedata-bindattributewiththei18n ForExample: <spandata-bind="i18n:'String'"></span> ToaddastringwithnobindingtoanHTMLelement: <!--koi18n:'YourStringMessage'--><!--/ko--> WhilestringisaddedonattributeofanHTMLelement: <inputtype="text"data-bind="attr:{placeholder:$t('Stringfortranslation')}"/> >>StringAddedfortheUIcomponentconfigurationxmlfiles: Youwillhavetoimplementthetranslateattributeandsetthisastrueforthetranslation.For example: <itemname="label"xsi:type="string"translate="true">Delete</item>

7. Whilefetchingthedataprogrammaticallyfromthexml,youwillhavetousethemethodWhilefetchingthedataprogrammaticallyfromthexml,youwillhavetousethemethod __(“variable”)todisplaytranslatedtext. Example: __($this->config->getData('label')) >>StringAddedforthe.jsfiles: Inthejsfile,youshouldimplementthemage/translatelibrarytobeabletotranslatethetext. Youcanaddtranslatelibraryasbelow: define(['jquery','mage/translate'],function($){...}); Youhavetousethe$.mage.__('')functionwhenaddingyourstring: $.mage.__('<string>'); Whereas,havetousethebelowmethodforaddingstringwithavariable: $.mage.__('Hello%1').replace('%1',yourVariable); Forthetranslationofdynamiccontentlikethecategory,product,CMSpageandblock,you willhavetodefinethetranslatedvaluefortheStoreview. Asastoreowner,havingmultiplestoreviewsisbeneficialandcanhelpyouacquire customersfromallovertheworld. Incase,allthiswentaboveyourheadoryouwanttosaveyourtimefromthistedioustaskof translating,youcangoforaMagentolanguagetranslationextension.Youcanalsooptfor AppJetty’sMagento2languagetranslatorwhichusestheGoogleTranslateAPIandis equippedwithfeatureslike: -MassTranslationofCMSpages,productcategorypages,etc.inamatterofminutesusing console/cron. -WYSIWYGEditor -DatabaseSearch&Translate OriginalBlog:https://www.appjetty.com/blog/multi-language-store-magento2