Set different Language from jss component

Question

We are trying to implement multilingual site in JSS. When user logged in, we need to show a drop down to select language and based on the selection we want to set the language. Question is, how to set the sc_lang parameter from a JSS component where the user will select the language to be displayed.

Any suggestion will help us.

Thanks,

Answer 1

I use a react jss example for testing jss. In this example multi language feature already implemented. I think, it is implemented for other js frameworks too. So if you build your solution not on a jss example you can look how it was implemented there. If you use a jss example as base of you solution then for set the sc_lang in jss api call you need just set correct url with language(it is mean that your component, probably, will contain links with different languages for current page).

is there a way to set the language other than passing the code in URL?

You can change language using SitecoreContextFactory, in your component set new language

import React from 'react';
import SitecoreContextFactory from '../../lib/SitecoreContextFactory';

class LngPicker extends React.Component {
 constructor(props) {
 super(props);
 this.changeLng = this.changeLng.bind(this);
}

changeLng(key){
 var context = SitecoreContextFactory.getSitecoreContext();
 SitecoreContextFactory.setSitecoreContext({
  ...context,
  language: key ,
  refresh:true     
});
}

render() {
  return (
    <button onClick={()=> this.changeLng('da-Dk')} >da-DK</button>  
  );
 }
}

export default LngPicker;

then update RouteHandler, add to constructor

SitecoreContextFactory.subscribeToContext((context)=>{
  if(context.refresh){
    i18n.changeLanguage(context.language)
    let sitecoreRoutePath = this.props.route.match.params.sitecoreRoute || '/';
    if (!sitecoreRoutePath.startsWith('/')) {
      sitecoreRoutePath = `/${sitecoreRoutePath}`;
    }

    getRouteData(sitecoreRoutePath, context.language).then((routeData) => {
      if (routeData !== null && routeData.sitecore && routeData.sitecore.route) {
        SitecoreContextFactory.setSitecoreContext({
          route: routeData.sitecore.route,
          itemId: routeData.sitecore.route.itemId,
          ...routeData.sitecore.context,
          refresh: false
        });
        this.setState({ routeData, notFound: false });
      } else {
        this.setState({ routeData, notFound: true });
      }
    });
  }
});