В статье расскажем, как добавить переключатель языков в шапку сайта для работы с мультиязычностью.

Перед началом всех работ вам нужно скачать архив с файлами, которые вам пригодятся при настройке. 

Этапы работы

1. Разместить в файловой системе логику переключателя. 

В основном архиве найдите архив site_selector.tar.gz. Перейдите в папку /include/header_include/, загрузите архив site_selector.tar.gz и распакуйте его содержимое.

2. Подготовить иконку для блока. 

В основном архиве найдите файл World.svg и загрузите его в папку /images/.

3. Разместить стили переключателя. 

Для этого перейдите по пути /bitrix/templates/aspro_max/css/ в файле custom.css разместите код:

.sites {display: flex;align-items: center;position: relative;margin-left: 15px;}
.sites__select {display: flex;align-items: center;cursor: pointer;}
.sites__option {padding: 6.5px 0px;cursor: pointer;display: block;text-transform:capitalize;}
.sites__option--first {padding-top: 0px;}
.sites__option--last{padding-bottom: 0px;}
.sites__option--current {font-weight: bold;cursor: default;}
.sites__dropdown {position: absolute;top: 100%;left: 11px;padding-top: 13px;opacity: 0;visibility: hidden;transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;}
.sites__dropdown--top {top: auto;bottom: 100%;padding-bottom: 10px;padding-top: 0px;}
.sites__dropdown--top .dropdown {display: flex;flex-direction: column-reverse;}
.sites__dropdown--top .sites__option--first {padding-top: 6.5px;padding-bottom: 0px;}
.sites__dropdown--top .sites__option--last{padding-top: 0px;padding-bottom: 6.5px;}
.sites:hover .sites__dropdown {opacity: 1;visibility: visible;}
.sites__dropdown .dropdown {padding: 14px 19px 15px; background: #fff;border-radius: 4px;}
.sites__icon {margin-right: 12px;margin-top: -1px;}
.sites__arrow {display: flex;margin-left: 7px;margin-top: 1px;}
.sites__current--upper{text-transform:uppercase;}
.icon-block__icon{margin-right: 5px;}
.more-arrow{display: flex;margin-left: 8px;margin-top: 2px;}
#mobilemenu .sites__select .svg {left: 20px;top: 23px;}
#mobilemenu .menu ul > li .dropdown  .sites__option {padding: 19px 20px 20px 19px;display: block;position: relative;}
#mobilemenu .sites__option {padding: 0}

4. Разместить переключатель в шапке сайта. 

Для этого используйте готовые файлы из основного архива. 

В папке /bitrix/templates/aspro.max/page_blocks/header/ разместите файл header_custom.php для шапки. В папке /bitrix/templates/aspro.max/page_blocks/ разместите файл header_mobile_menu_custom.php для мобильной шапки.

Затем пройдите путь Аспро → Аспро: Максимум → Настройки, выберите пункт «Мобильная версия» и установите новый тип мобильного меню.

Выберите пункт «Шапка» и установите новый вид шапки.

Чтобы отредактировать список сайтов в переключателе, пройдите путь: /include/header_include/site_selector/ и выберите файл arsites.php.