Метка: настройка OpenCart

По умолчанию в OpenCart 2.1.0.1 переключатель языков отображается в виде выпадающего списка. Однако многие владельцы интернет-магазинов предпочитают более компактное и удобное отображение в виде кнопок «UA | RU».

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

Шаг 1. Откройте файл language.tpl

Найдите файл:

catalog/view/theme/ВАША_ТЕМА/template/common/language.tpl

Создайте резервную копию файла перед внесением изменений.

Шаг 2. Замените содержимое файла

Полностью замените содержимое файла следующим кодом:

<?php if (count($languages) > 1) { ?>
<div class="language-switcher">
    <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="language">

        <?php foreach ($languages as $language) { ?>

            <button type="button"
                    class="language-select <?php echo ($language['code'] == $code) ? 'active' : ''; ?>"
                    name="<?php echo $language['code']; ?>">

                <?php echo strtoupper($language['code']); ?>

            </button>

        <?php } ?>

        <input type="hidden" name="code" value="" />
        <input type="hidden" name="redirect" value="<?php echo $redirect; ?>" />
    </form>
</div>

<script type="text/javascript">
$('.language-select').on('click', function () {
    $('input[name=\'code\']').val($(this).attr('name'));
    $('#language').submit();
});
</script>
<?php } ?>

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

Шаг 3. Добавьте CSS-стили

Откройте файл:

catalog/view/theme/ВАША_ТЕМА/stylesheet/stylesheet.css

Добавьте в конец файла следующий код:

.language-switcher {
    display: flex;
    align-items: center;
}

.language-switcher form {
    display: flex;
    align-items: center;
}

.language-select {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 14px;
    padding: 0 5px;
    cursor: pointer;
    opacity: 0.6;
    transition: 0.2s;
}

.language-select:hover {
    opacity: 1;
}

.language-select.active {
    opacity: 1;
    font-weight: bold;
}

.language-select:not(:last-child)::after {
    content: "|";
    margin-left: 10px;
    color: #ffffff;
}

Что получится в результате

После внесения изменений переключатель языков будет отображаться следующим образом:

UA | RU

Преимущества такого решения:

• более современный внешний вид;
• экономия места в шапке сайта;
• быстрый доступ к переключению языка;
• отсутствие выпадающих меню;
• корректная подсветка текущего языка.

Заключение

Замена стандартного выпадающего списка языков на компактные кнопки «UA | RU» позволяет сделать интерфейс интернет-магазина более удобным и современным. Данное решение подходит для OpenCart 2.1.0.1 и может быть легко адаптировано для других версий системы.