Multi language by select dropdown

[namvu]

Hello veryone.

i'm a newbie about CMS Made Simple, at the current i have a stuck with handle multi language features. (2.2.16 version)

i have already created web page with (english/ vietnamese/ japanese)
with below structure:
1:Home (english)
2: Services
2.1 Sercices_a
2.2 Sercices_b
2.3 Sercices_c

and vietnamese/ japanese have the same page too.

So with each language will have core::page for handle html inside.

with default setting of system, menu navigation are render all menu navigation (english/ vietnamese/ japanese) by using {Navigator} to relate Navigator module in 'Allxone Main Navigation'

Code: Select all

<nav class='main-navigation cf noprint' id='nav' role='navigation'>
   {Navigator loadprops='0' template='Allxone Main Navigation'} {* A Navigator module, database Template *}
</nav>

i have also created select option for switcher language as below inside each core::page

Code: Select all

<select id="languageSwitcher" style="background-color: cadetblue">
     <option value="1">English</option>
     <option value="2">Vietnamese</option>
     <option value="3">Japanese</option>
</select>

For about Navigator module in 'Allxone Main Navigation' i has some default setting code for rennder menu navigation below (that is setting default in Navigator module)

Code: Select all

{strip}
% {$node|print_r}
{$main_id = ' id=\'main-menu\''}
{function do_class}
    {if count($classes) > 0} class='{implode(' ',$classes)}'{/if}
{/function}

{function name='Simplex_menu' depth='1'}
    <ul{$main_id}{if isset($ul_class) && $ul_class != ''} class="{$ul_class}"{/if}>
        {$main_id = ''}
        {$ul_class = ''}
        {foreach $data as $node}
            {* setup classes for the anchor and list item *}
            {$list_class = []}
            {$href_class = ['cf']}
            {$parent_indicator = ''}
            {$aria_support = ''}
    
            {if $node->current || $node->parent}
                {* this is the current page *}
                {$list_class[] = 'current'}
                {$href_class[] = 'current'}
            {/if}
    
            {if $node->children_exist}
                {$list_class[] = 'parent'}
                {$aria_support = ' aria-haspopup=\'true\''}
                {$parent_indicator = ' <i class=\'icon-arrow-left\' aria-hidden=\'true\'></i>'}
            {/if}
    
            {* build the menu item node *}
            {if $node->type == 'sectionheader'}
                {$list_class[] = 'sectionheader'}
                <li{do_class classes=$list_class}{$aria_support}><span>{$node->menutext}{$parent_indicator}</span>
                {if isset($node->children)}
                    {Simplex_menu data=$node->children depth=$depth+1}
                {/if}
                </li>
            {else if $node->type == 'separator'}
                {$list_class[] = 'separator'}
                <li{do_class classes=$list_class}'><hr class='separator'/></li>
            {else}
                {* regular item *}
                <li{do_class classes=$list_class}{$aria_support}>
                    <a{do_class classes=$href_class} href='{$node->url}'{if $node->target != ''} target='{$node->target}'{/if}>{$node->menutext}{$parent_indicator}</a>
                    {if isset($node->children)}
                        {Simplex_menu data=$node->children depth=$depth+1}
                    {/if}
                </li>
            {/if}
        {/foreach}
    </ul>
{/function}

{if isset($nodes)}
    {Simplex_menu data=$nodes depth='0' ul_class='cf'}
{/if}

{/strip}

for the next step i do not know how can handle make Navigator module only render language menu by selected (default language will be english)

i have try research below this link
https://cmscanbesimple.org/blog/multili ... ade-simple

but can not clearly for the article

I appreciate if someone can help me re-solve these features.

[velden]

I'd read the help of the Navigator module.
You can find it here: Site Admin > Module Manager > Navigator: Help link at the end of the line.

Possibly interesting parameters to have a look at (I think childrenof is useful in your case):

(optional) start_element="1.2" - Starts the menu displaying at the given start_element and showing that element and it's children only. Takes a hierarchy position (e.g. 5.1.2).
(optional) start_page="" - Starts the menu displaying at the given start_page and showing that element and it's children only. Takes a page alias.
(optional) childrenof="" - This option will display only items that are descendants of the selected page id or alias. i.e: {Navigator childrenof=$page_alias} will only display the children of the current page.

Furthermore, make sure your page structure is properly setup. In your example it seems not.
2. Services probably should be a child of Home (english).
So

Code: Select all

1: English home (page alias: en)
1.1: Services
1.1.1: Services_a
1.1.2: Services_b
2: Vietnamese home (page alias: vi)
2.1: VI services
2.1.1: VI services_a
2.1.2: VI services_b
3: Japanese home (page alias: ja)
3.1: JA services
3.1.1: JA services_a
3.1.2: JA services_b

[namvu]

thanks u so much @velden. It help me so much that i can show the specific menu language by hardcode as below by using option childrenof for render only the alias language that i wannt

Code: Select all

<nav class='main-navigation cf noprint navigator-container' id='nav' role='navigation'>
                      {Navigator loadprops='0' template='Allxone Main Navigation' childrenof=vn}
                    </nav>

but now, if i'm using select option

Code: Select all

<select id="languageSwitcher" style="background-color: cadetblue">
          <option value="en">English</option>
          <option value="vn">Vietnamese</option>
          <option value="jp">Japanese</option>
        </select>

that user can be select switcher language (en/vn/jp)


but if using hardcode childrenof=en/ or =vn / or =jp
it should be using dynamic variable to passing direct into option childrenof=$alias_val



i have try handle in <__script__> tag (javascritp)
to change change value by select option, but it not work

Code: Select all

$('#languageSwitcher').on('change', function() {
            var selectedLanguage = $(this).val(); -> catch value of switcher option
            var navigatorContent = '{Navigator loadprops="0" template="Allxone Main Navigation" childrenof="' + selectedLanguage + '"}';
            $('#menuNavigatorContainer').html(navigatorContent); 
          });
          

-> so it's not work, it just replace <nav> tag to a text ( not a module {Navigator}, i wonder how can pass in value into that [childrenof]
i'm very glad if can u help me again.

[velden]

I guess you want to redirect to the specific page on change of the languageSwitcher.

So you will redirect to https://example.com/en (or /vn or /jp).
Then, those pages should have the menu specific to their language.

[namvu]

yes, that right, but with logic handle to switcher language i think i need to pass dynamic value into option (childrenof=???) in below {Navigator} by using value of select switcher option

Code: Select all

<select id="languageSwitcher" style="background-color: cadetblue">
          <option value="en">English</option>
          <option value="vn">Vietnamese</option>
          <option value="jp">Japanese</option>
        </select>

{Navigator}

Code: Select all

<nav class='main-navigation cf noprint navigator-container' id='nav' role='navigation'>
                      {Navigator loadprops='0' template='Allxone Main Navigation' childrenof=vn}
                    </nav>

so how can i do that, i have tried with <__script__> tag (javascript) , using jquery to catch the nav then replace childrenof value, but it not work.
It seem {Navigator} is not an element html, so can not handle like that.

[namvu]

i have research your website too (@velden), so seem like what i wanna do with my website by using switcher language, and i wonder about the logic handle code that , how can pass value from switcher into {Navigator childrenof=???}
i'v appriciate if you can help me for this problem.