Переделываем список производителей в OpenCart 3 (1 часть)

Всем привет, в CMS OpenCart 3 есть страница с производителями, но мне очень не нравится её внешний вид — буквенный список, побуквенная разбивка, отсутствие логотипов брендов, хотя они заполняются в админке, давайте исправим все эти недостатки?

1. Открываем файл: ../public_html/catalog/view/theme/default/template/product/manufacturer_list.twig и вместо этих строк:

{{ header }}
<div id="product-manufacturer" class="container">
  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
    <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
    {% endfor %}
  </ul>
  <div class="row">{{ column_left }}
    {% if column_left and column_right %}
    {% set class = 'col-sm-6' %}
    {% elseif column_left or column_right %}
    {% set class = 'col-sm-9' %}
    {% else %}
    {% set class = 'col-sm-12' %}
    {% endif %}
    <div id="content" class="{{ class }}">{{ content_top }}
      <h1>{{ heading_title }}</h1>
      {% if categories %}
      <p><strong>{{ text_index }}</strong> {% for category in categories %}
        &nbsp;&nbsp;&nbsp;<a href="index.php?route=product/manufacturer#{{ category.name }}">{{ category.name }}</a> {% endfor %} </p>
      {% for category in categories %}
      <h2 id="{{ category.name }}">{{ category.name }}</h2>
      {% if category.manufacturer %}
      {% for manufacturers in category.manufacturer|batch(4) %}
      <div class="row"> {% for manufacturer in manufacturers %}
        <div class="col-sm-3"><a href="{{ manufacturer.href }}">{{ manufacturer.name }}</a></div>
        {% endfor %} </div>
      {% endfor %}
      {% endif %}
      {% endfor %}
      {% else %}
      <p>{{ text_no_results }}</p>
      <div class="buttons clearfix">
        <div class="pull-right"><a href="{{ continue }}" class="btn btn-primary">{{ button_continue }}</a></div>
      </div>
      {% endif %}
      {{ content_bottom }}</div>
    {{ column_right }}</div>
</div>
{{ footer }}

вставляем эти:

{{ header }}
<div id="product-manufacturer" class="container">
  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
    <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
    {% endfor %}
  </ul>
  <div class="row">{{ column_left }}
    {% if column_left and column_right %}
    {% set class = 'col-sm-6' %}
    {% elseif column_left or column_right %}
    {% set class = 'col-sm-9' %}
    {% else %}
    {% set class = 'col-sm-12' %}
    {% endif %}
    <div id="content" class="{{ class }}">{{ content_top }}
      <h1 class="text-center">{{ heading_title }}</h1>
      <hr>
      {% if categories %}
      <div class="row">
        {% for category in categories %}
        {% for manufacturer in category.manufacturer %}
            <div class="brand col-md-3 col-sm-6 col-xs-12">
                <a href="{{ manufacturer.href }}">
                <img src="{{ manufacturer.thumb }}" class="img-responsive">
                {{ manufacturer.name }}</a>
            </div>
        {% endfor %}
        {% endfor %}
      </div>
      {% else %}
      <p>{{ text_no_results }}</p>
      <div class="buttons clearfix">
        <div class="pull-right"><a href="{{ continue }}" class="btn btn-primary">{{ button_continue }}</a></div>
      </div>
      {% endif %}
      {{ content_bottom }}</div>
    {{ column_right }}</div>
</div>
{{ footer }}

2. Открываем файл: ../public_html/catalog/controller/product/manufacturer.php и после этой строки:

$this->load->model('catalog/manufacturer');

вставляем эту:

$this->load->model('tool/image');

а после этих строк:

if (!isset($data['categories'][$key])) {
    $data['categories'][$key]['name'] = $key;
}

вставляем эти:

if ($result['image']) {
    $image = $this->model_tool_image->resize($result['image'], $this->config->get('theme_' . $this->config->get('config_theme') . '_image_product_width'), $this->config->get('theme_' . $this->config->get('config_theme') . '_image_product_height'));
} else {
    $image = $this->model_tool_image->resize('placeholder.png', $this->config->get('theme_' . $this->config->get('config_theme') . '_image_product_width'), $this->config->get('theme_' . $this->config->get('config_theme') . '_image_product_height'));
}

(P.S. — В админке мы можем задавать размер изображений для товаров, теперь мы используем его и для генерирования размеров изображений и для производителей)

после этой строки:

'name' => $result['name'],

вставляем эту:

'thumb'=> $image,

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

Отлично, разбивку убрали, изображение есть, ссылка работает, теперь нужно сделать внешнее оформление.

3. Открываем файл: ../public_html/catalog/view/theme/default/stylesheet/stylesheet.css и в конец файла вставим эти строки:

.brand {
    border: 1px solid #E0E0E0;
    text-align: center;
    padding: 10px 0;
}
.brand:hover {
    border: 1px solid #2196F3;
}
.brand img {
    margin: 0 auto;
    padding-bottom: 10px;
}
.brand a {
    font-size: 1.6rem;
    color: #9E9E9E;
}
.brand a:hover {
    color: #2196F3;
}

Чистим кеш, смотрим результат:

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

Живой пример: op34.moushe.ru/brands (Обновляется одновременно с выходом новых статей).

На этом всё, до новых встреч.