subdomainnetsuitesuitecommerce

NetSuite's SuiteCommerce Advance: Customize Multi Language With Single Domain(Without Hosts)?


In SuiteCommerce Advance Vision release by default behavior to setup multi language is to add multiple domain under Setup-->Configuration-->Multi Domain Tab--> Hosts

Once you setup this you can able to see drop down in your web store which will have domain and language associate with that domain. We have already implemented this feature.

But, SCA also has feature to setup multi language with 'lang' parameter which will automatically change language withing single domain like below

We did this already-->(With multiple domain)
https://www.en.scasite.com/
https://www.fr.scasite.com/


We want below setup-->

https://www.scasite.com/?lang=en_US
https://www.scasite.com/?lang=fr_FR

So, Can any one have idea how we can pass language param in url?


Solution

  • Yes you are right SCA out of the box don't have this feature, but yes you can send 'lang' param in url and can able to change your language.

    Remember if you are uding SCA vision release, do not add any language hosts in configuration under setup tab

    To pass 'lang' param i.e www.domain.com/lang=it_IT etc

    Override the Host selector file in your custom module to do this, you need to create below two files under global view

    1.Modules/custom/GlobalViews@1.0.0/JavaScript/GlobalViews.HostSelector.View.js Copy & paste below code in setLanguage: function (e){}

    ,   setLanguage: function (e)
        {
                    var language_code = jQuery(e.target).val()
                ,   selected_language = _.find(SC.ENVIRONMENT.availableLanguages, function (language)
                    {
                        return language.locale === language_code;
    
                    });
    
            // We use the param **"cur"** to pass this to the ssp environment
            var current_search = Utils.parseUrlOptions(window.location.search);
    
            // if we are in a facet result we will remove all facets and navigate to the default search
            // TODO REVIEW THIS
            if (window.location.hash !== '' && _.values(SC._applications)[0].getLayout().currentView instanceof BrowseView)
            {
                window.location.hash = Configuration.defaultSearchUrl || '';
            }
            current_search.lang = selected_language.locale;
    
            window.location.search = _.reduce(current_search, function (memo, val, name)
            {
                return val ? memo + name + '=' + val + '&' : memo;
            }, '?');
    
        }
    

    Use below code in getContext() to return some data to handlbar view

    var available_languages = _.map(SC.ENVIRONMENT.availableLanguages, function(language)
            {
                // @class GlobalViews.CurrencySelector.View.Context.Currency
                return {
                    // @property {String} code
                    code: language.locale
                    // @property {String} internalId
                ,   internalId: language.internalid
                    // @property {String} isDefault
                ,   isDefault: language.isdefault
                    // @property {String} symbol
                ,   symbol: language.languagename
                    // @property {String} displayName
                ,   displayName: language.locale|| language.locale
    
                , isSelected: SC.ENVIRONMENT.currentLanguage.locale === language.locale
    
                };
            });
    
            // @class GlobalViews.CurrencySelector.View.Context
            return {
                // @property {Boolean} showCurrencySelector
                showLanguageSelector: !!(SC.ENVIRONMENT.availableLanguages && SC.ENVIRONMENT.availableLanguages.length > 1)
                // @property {Array<GlobalViews.CurrencySelector.View.Context.Currency>} availableCurrencies
            ,    availableLanguages: available_languages || []
                // @property {String} currentCurrencyCode
                // @property {String} currentCurrencySymbol
            ,   currentLanguageSymbol: SC.getSessionInfo('language').languagename
            };
        }
    
    1. Copy & Paste Below code in below file Modules/custom/GlobalViews@1.0.0/Templates/global_views_host_selector.tpl

        {{#if showLanguageSelector}}
        	<div class="global-views-currency-selector">
        		<span class="global-views-host-selector-addon">
        			{{currentLanguageSymbol}}
        		</span>
        		<select data-toggle="currency-selector" class="global-views-currency-selector-select">
        			{{#each availableLanguages}}
        				<option value="{{code}}" {{#if isSelected}}selected{{/if}}>
        					{{symbol}}
        				</option>
        			{{/each}}
        		</select>
        	</div>
        {{/if}}

    1. Done!! Now you can see 'lang' param is being added into url

    Let me know if you want more help on this.