Работаем с подвалом на CMS OpenCart 3.0.3.8. (2 часть)

Всем привет, вот и пришло время доработать подвал нашего интернет магазина сделанного на CMS OpenCart Русская сборка, сегодня мы с вами встроим в админку новое поле (для вбивания своего html кода — ссылок) и выведем его в подвале нашего магазина + добавим иконки социальных сетей.

1. Откроем файл ../admin/view/template/setting/setting.twig и после этих строк:

<div class="form-group">
  <label class="col-sm-2 control-label" for="input-meta-keyword">{{ entry_meta_keyword }}</label>
  <div class="col-sm-10">
    <textarea name="config_meta_keyword" rows="5" placeholder="{{ entry_meta_keyword }}" id="input-meta-keyword" class="form-control">{{ config_meta_keyword }}</textarea>
  </div>
</div>

вставим эти:

<div class="form-group">
  <label class="col-sm-2 control-label" for="input-text-footer">{{ entry_text_footer }}</label>
  <div class="col-sm-10">
    <textarea name="config_text_footer" rows="5" placeholder="{{ entry_text_footer }}" id="input-text-footer" class="form-control">{{ config_text_footer }}</textarea>
  </div>
</div>

2. Откроем файл: ../admin/controller/setting/setting.php и после этих строк:

if (isset($this->request->post['config_meta_keyword'])) {
    $data['config_meta_keyword'] = $this->request->post['config_meta_keyword'];
} else {
    $data['config_meta_keyword'] = $this->config->get('config_meta_keyword');
}

вставим эти:

if (isset($this->request->post['config_text_footer'])) {
    $data['config_text_footer'] = $this->request->post['config_text_footer'];
} else {
    $data['config_text_footer'] = $this->config->get('config_text_footer');
}

3. Откроем файл: ../admin/language/ru-ru/setting/setting.php и после этой строки:

$_['entry_meta_keyword']             = 'Мета-тег \'Keywords\'';

вставим эту:

$_['entry_text_footer']              = 'Блок в подвале (HTML)';

4. Откроем файл: ../admin/language/en-gb/setting/setting.php и после этой строки:

$_['entry_meta_keyword']             = 'Meta Tag Keywords';

вставим эту:

$_['entry_text_footer']              = 'Footer HTML block';

5. Открываем админку и переходим: Система > Настройки > Основное > Блок в подвале (HTML) и вбиваем в наше новое поле нужные вам ссылки, к примеру:

<div class="footer-link">
<a href="catalog">Каталог</a> <a href="specials">Акции</a> 
<a href="oplata">Оплата</a> <a href="delivery">Доставка</a> 
<a href="about_us">О компании</a> <a href="contact">Контакты</a>
</div>

Теперь осталось вывести наш код на витрине нашего интернет магазина.

6. Откроем файл: ../catalog/view/theme/default/template/common/footer.twig и после этих строк:

<footer>
  <div class="container">
    <div class="row">

вставим эти:

<div class="col-sm-9">
    {{text_footer}}
</div>

7. Откроем файл: ../catalog/controller/common/footer.php и после этой строки:

$data['newsletter'] = $this->url->link('account/newsletter', '', true);

вставим эту:

$data['text_footer'] = html_entity_decode($this->config->get('config_text_footer'), ENT_QUOTES, 'UTF-8');

Чистим все кеши (на всякий случай) и смотрим на результат:

Отлично, всё работает, теперь можно избавиться от стандартных колонок.

8. Откроем файл: ../catalog/view/theme/default/template/common/footer.twig и удалим эти строки:

{% if informations %}
<div class="col-sm-3">
  <h5>{{ text_information }}</h5>
  <ul class="list-unstyled">
   {% for information in informations %}
    <li><a href="{{ information.href }}">{{ information.title }}</a></li>
    {% endfor %}
  </ul>
</div>
{% endif %}
<div class="col-sm-3">
  <h5>{{ text_service }}</h5>
  <ul class="list-unstyled">
    <li><a href="{{ contact }}">{{ text_contact }}</a></li>
    <li><a href="{{ sitemap }}">{{ text_sitemap }}</a></li>
  </ul>
</div>
<div class="col-sm-3">
  <h5>{{ text_extra }}</h5>
  <ul class="list-unstyled">
    <li><a href="{{ special }}">{{ text_special }}</a></li>
  </ul>
</div>

Смотрим на результат:

Неплохо, теперь нужно вставить иконки социальных сетей.

После этих строк:

<div class="col-sm-9">
    {{text_footer}}
</div>

вставим эти:

<div class="col-sm-3">
    <div class="sociallink">
        <a href="https://vk.com/chainiylist"><i class="fa fa-vk" aria-hidden="true"></i></a>
        <a href="https://wa.clck.bar/79252062098"><i class="fa fa-whatsapp" aria-hidden="true"></i></a>
        <a href="mailto:hruhru.87@mail.ru"><i class="fa fa-envelope" aria-hidden="true"></i></a>
    </div>
</div>

9. Откроем файл: ../catalog/view/theme/default/stylesheet/stylesheet.css и добавим в него эти строки:

.footer-link a,
.sociallink a {
    text-transform: uppercase;
    padding: 0 10px 0 0;
    color: #e5e5e5;
}

.sociallink {
    text-align: right;
}

Смотрим на результат:

Подвал стал компактнее и на мой взгляд симпатичнее (люблю минимализм), CSS стили конечно требуют доработки под дизайн вашего сайта. А на этом всё, вступайте в группу в ВК и следите за выходом новых материалов.