language.tpl OpenCart Archives - Про головне

Як вивести перемикач мов кнопками UA | RU в OpenCart 2.1.0.1

За замовчуванням в 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 без встановлення додаткових модулів та розширень.