Название языка вместо флагов в языковой панели Opencart + выделяем активный язык

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

При разработке шаблонов для магазинов на Opencart многие дизайнеры при создании блока мультиязычности используют не отображение флагов, а именно текстовый вывод языковой панели, например, RUS, ENG и прочее. Для того чтобы сверстать такой блок верстальщику нужно внести правки в шаблон, так как по умолчанию выводятся флаги стран. К тому же в дефолтном шаблоне нет возможности задать класс для выбранного (активного) языка. Давайте решать эту проблему.

Как всегда наша задача решается в несколько шагов, путем незначительных правок в шаблоне. В данном случае мы внесем правки в шаблон модуля вывода языковой панели и файл css стилей.

1. Ищем файл — /catalog/view/theme/default/template/module/language.tpl и заменяем его содержимое:

<?php if (count($languages) > 1) { ?>
<form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data">
  <div id="language"><?php echo $text_language; ?> 
    <?php foreach ($languages as $language) { ?>
    <img src="image/flags/<?php echo $language['image']; ?>" alt="<?php echo $language['name']; ?>" title="<?php echo $language['name']; ?>" onclick="$('input[name=\'language_code\']').attr('value', '<?php echo $language['code']; ?>'); $(this).parent().parent().submit();" />
    <?php } ?>
    <input type="hidden" name="language_code" value="" />
    <input type="hidden" name="redirect" value="<?php echo $redirect; ?>" />
  </div>
</form>
<?php } ?>

На

<?php if (count($languages) > 1) { ?>

<form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="language_form">
   <div id="language">
        <?php foreach ($languages as $language) { ?>
            <?php if ($language['code'] == $language_code) { ?>
                <a title="<?php echo $language['name']; ?>"><span class="selected-language"><?php echo $language['name']; ?></span></a>
            <?php } else { ?>
                <a title="<?php echo $language['name']; ?>" onclick="$('input[name=\'language_code\']').attr('value', '<?php echo $language['code']; ?>'); $(this).parent().parent().submit();"><?php echo $language['name']; ?></a>
            <?php } ?>
        <?php } ?>
      <input type="hidden" name="language_code" value="" />
      <input type="hidden" name="redirect" value="<?php echo $redirect; ?>" />
   </div>
</form>
<?php } ?>

2. Теперь вносим стили для активного языка в файле — /catalog/view/theme/default/stylesheet/stylesheet.css.

Для этого задаем стили с классом:

.selected-language {
font-weight:bold;
}

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

Надеюсь вам был полезен этот материал, подписывайтесь на обновления блога, впереди много интересной информации.