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