Sellacious backend Language Switcher:
In sellacious backend there's inbuilt language switcher, from which you can change the language of the backend.
Frontend Language Switcher:
To enable the language switcher on the frontend, you need to complete below steps:
1. Install languages:
To enable the language switcher in the frontend, you need more than one language. You can know about the language installation from here. We're installing French languages here. How to install languages in sellacious?
2. Enable and configure the plugins:
To use language switcher in the frontend, you need to enable the plugins listed below:
System - Language Code: This plugin provides the ability to change the language code in the generated HTML document to improve SEO.
The fields will appear when the plugin is enabled and saved.
System - Language Filter: This plugin filters the displayed content depending on the language. This plugin is to enable the Language Switcher module. By default, this plugin will try to detect the language settings of the visitor browser and display the site in this language (if available). You can also configure this plugin according to your needs.
3. Navigate language Menus:
You need to create menus for languages available (English and French). We'll need separate menus pointing towards to English and French. To create menus for diff languages follow below steps:
Language Menu Item
Now, we need to create the menus items in both menus. In this documentation, we'll create menu items for the Sellacious products.
First, we'll create a menu item for the French menu:
To Create Menu items in the English language:
You can repeat the above process to create more menus in the French and English language.
Default Home Page
To publish these menus on the frontend, let's assign default home pages in both languages.
You can do that by clicking on the star in the Home column next to the menu item. The star will change into the flag of the British for English language and of the French flag for French Langauge.
We have assigned the Products menu item in English menu and Des products menu item in French menu as default home page.
Associate different language Menus
Now, you have menus in different languages (English and French) which needs to be associated with each other so the site can know which menu is the translation of which menu. To associate the English menu with their translation in French:
You can view the available association in Menu item List view.
You need to repeat the above process for other menus of their association if available.
Assign Menu Modules
Now, both menus and their menu items are created. To visualize these menus on the frontend, we need to assign the menu modules to these menus.
Unpublish the Default Menu
Apart from our two new menus, the website also contains the Main Menu, which is part of the Site default setup. If you have installed Sellacious without sample data, this menu contains only a Home item. Even if our bilingual site will use the new English Menu and the new French Menu, your site still needs this default Main Menu and its Home menu item to function. Your site also requires the Main Menu module to remain assigned to Language: All.
As we don't need to publish Main Menu on the frontend, we need to unpublish the Main Menu module.
4. Configure the module in frontend
We have now two sets of Menus: one French and another English. Of course, only one menu will be visible on the frontend, either French or English Menu, which will depend on the browser settings of the visitor. As we want the user to be able to switch from a language to another, we need to add the built-in Language Switcher Module.
After saving this module, you can see the language switcher module on the right column of the site.