Вывод меню выбора языков для Localizator

Понадобилось сделать меню для сайта с выбором языка. В стандартной документации везде подставляют иконки языка, без текста названия языка.
Я нигде не нашел как можно вытащить название языка (локализации) и указать его в меню выбора языков справа от иконки языка. А оказалось все просто.
В сниппете getLanguages можно было просто добавить еще один плейсхолдер 'languageName'=> $language->name (к имеющимся cultureKey, active и url).
foreach($languages as $language) {
  if(mb_substr($language->http_host, -1) == '/') {
    $placeholders = array(
      'cultureKey' => $language->key,
      'active' => $language->key == $modx->localizator_key ? 'active' : '',
      'url' => $protocol . $language->http_host . $uri,
      'languageName'=> $language->name,
    );
  } else {
    $placeholders = array(
      'cultureKey' => $language->key,
      'active' => $language->key == $modx->localizator_key ? 'active' : '',
      'url' => $protocol . $language->http_host . '/' . $uri,
      'languageName'=> $language->name,
    );
  }
И в чанках просто добавить {$languageName}
section-langs-1:
<a href="#" class="nav-link dropdown-toggle {if $_modx->config.cultureKey == $cultureKey} {$active} {else} collapse {/if}  localizator_lang" data-bs-toggle="dropdown"  role="button" aria-expanded="false" >
<span class="{$cultureKey}_24" style="display: inline-block;"></span>
 {$languageName}
 </a>
section-langs-2:
{if $_modx->config.cultureKey != $cultureKey}
<li >
  {if $active != 'active'}
    <a class="{$active} localizator_lang" href="{$url}" class="dropdown-item">
        <span class="{$cultureKey}_24" style="display: inline-block;"></span> 
        {$languageName}
    </a>
  {else}
    <div class="{$active} {$cultureKey}_24 localizator_lang" class="dropdown-item">
        <span class="{$cultureKey}_24" style="display: inline-block;"></span> 
        {$languageName}
    </div>
  {/if}
</li>
{/if}
Чанк Вывод в шаблоне панели выбора языков (как описано в документации, единственное добавил css класс localizator-block и переделал для Bootstrap 5:
<ul class="nav nav-pills localizator-block">
  <li class="langs nav-item dropdown">
     {$_modx->runSnippet('!getLanguages', ['tpl' => 'section-langs-1'])}
     <ul class="dropdown-menu">
       {$_modx->runSnippet('!getLanguages', ['tpl' => 'section-langs-2'])}
    </ul>
  </li>
 </ul>
Примечание:
Я переделал отображение знака языка не через конкретную картинку, а через CSS-спрайт flag_24.png.
Использовал пример под Babel с https://itchief.ru/questions/664
Заменил в нем косяки (языки kg на самом деле ky (там ky вообще какой то левый флаг не понял что за страна), ir (Иранский) у меня оформлен как fa (персидский),

Добавил стили (у меня так получилось с учетом того что использовал готовый шаблон Porto на Bootstrap 5 ):
.localizator_lang{
    color: black!important;
    background-color: unset!important;
    align-items: center;
    display: flex;
}
.langs .dropdown-toggle::after {
    display: none;
}
В настройках .htaccess добавил так:
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(ru|en|fa|tk|ky|abkhazia|ad|ae|af|ag|ai|al|am|an|ao|aq|ar|as|at|au|aw|ax|az|ba|bb|bd|be|bf|bg|bh|bi|bj|bl|bm|bn|bo|br|bs|bt|bw|by|by_|bz|ca|cd|cf|cg|ch|ci|cl|cm|cn|co|cr|cu|cv|cy|cz|de|dj|dk|dm|do|dz|ec|ee|eg|eh|england|er|es|et|eu|fi|fiji|fk|fm|fo|fr|ga|gd|ge|gg|gh|gl|gm|gn|gq|gr|gs|gt|gu|gw|gy|hk|hn|hr|ht|hu|id|ie|il|im|in|iq|ir|is|it|je|jm|jo|jp|ke|kg|kh|ki|km|kn|kosovo|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|me|mf|mg|mh|mk|ml|mm|mn|mo|mp|mr|ms|mt|mu|mv|mw|mx|my|mz|na|nagorno-karabakh|nato|nf|ng|ni|ni_|nl|no|np|nr|nz|om|pa|pe|pg|ph|pk|pl|pn|pr|ps|pt|pw|py|qa|red_cross|ro|rs|ru|rw|sa|sb|sc|scotland|sd|se|sg|sh|si|sk|sl|sn|so|somaliland|south_ossetia|sr|ss|st|sv|sy|sz|tc|td|tg|th|tj|tm|tn|to|tp|tr|tt|turkish_republic_of_northern_cyprus|tv|tw|tz|ua|ug|uk|un|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wales|ws|ye|za|zm|zw)/assets(.*)$ assets$2 [L,QSA]
Получилась такая красота

https://disk.yandex.ru/i/MG9-_uxLZDNTEA

Файл с иконками языка https://disk.yandex.ru/i/y-G8apn1dSooww
Файл css стилей https://disk.yandex.ru/d/R-eJsFVVQP5OmA
Олег Захаров
Олег Захаров
09 марта 2024, 01:56
modx.pro
1
262
+1

Комментарии: 1

Олег Захаров
Олег Захаров
09 марта 2024, 04:25
0
А описание языка description можно вывести в чанке через 
{$languageDescription}
, добавив в сниппет getLanguages плейсхолдер 
'languageDescription'=> $language->description,
    Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
    1