Правки шаблона OpenCart 3 (3 часть)

Сегодня мы с вами поработаем над страницей с категориями стандартного шаблона CMS OpenCart 3. Мы немного изменим заголовок, доработаем список подкатегорий, переместим описание категории в низ страницы. В общем ничего сложного сегодня делать не будем.

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

<h2>{{ heading_title }}</h2>

вставим эти:

<h2 class="text-center">{{ heading_title }}</h2>
<hr>

удаляем эти строки:

{% if thumb or description %}
<div class="row"> {% if thumb %}
  <div class="col-sm-2"><img src="{{ thumb }}" alt="{{ heading_title }}" title="{{ heading_title }}" class="img-thumbnail" /></div>
  {% endif %}
  {% if description %}
  <div class="col-sm-10">{{ description }}</div>
  {% endif %}</div>
<hr>
{% endif %}

Находим эти строки:

<div class="row">
  <div class="col-sm-6 text-left">{{ pagination }}</div>
  <div class="col-sm-6 text-right">{{ results }}</div>
</div>
{% endif %}

и вставляем ниже эти строки:

{% if description %}
<hr>
<div class="row">
  <div class="col-sm-12">{{ description }}</div>
</div>
{% endif %}

Мы немного изменили удалённый выше  код — вырезали миниатюрное изображение категории в левой части описания, оставив только текст (описание), при необходимости мы выведем все необходимые нам изображения в визуальном редакторе через админку и расставим их в нужные нам места, так намного удобнее.

Если у вас в основной категории есть список подкатегорий, то вы видите подзаголовок «Выберите подкатегорию», мне он не нужен, поэтому вырезаю, просто удаляем эту строку:

<h3>{{ text_refine }}</h3>

При желании вы можете её оставить, но я не вижу в ней смысла.

Продолжим работать, вместо этих строк:

{% if categories %}
      {% if categories|length <= 5 %}
      <div class="row">
        <div class="col-sm-3">
          <ul>
            {% for category in categories %}
            <li><a href="{{ category.href }}">{{ category.name }}</a></li>
            {% endfor %}
          </ul>
        </div>
      </div>
      {% else %}
      <div class="row">{% for category in categories|batch((categories|length / 4)|round(1, 'ceil')) %}
        <div class="col-sm-3">
          <ul>
            {% for child in category %}
            <li><a href="{{ child.href }}">{{ child.name }}</a></li>
            {% endfor %}
          </ul>
        </div>
        {% endfor %}</div>
      <br/>
      {% endif %}
      {% endif %}

вставим эти:

{% if categories %}
<div class="row">
  {% for category in categories %}
      <div class="col-sm-3">
          <div class="category-thumb">	
              <a href="{{ category.href }}"><img src="{{ category.thumb }}"><hr>{{ category.name }}</a>
          </div>
      </div>
  {% endfor %}
</div>
<hr>
{% endif %}

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

foreach ($results as $result) {
    $filter_data = array(
        'filter_category_id'  => $result['category_id'],
        'filter_sub_category' => true
    );

вставим эти:

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

а вместо этих строк:

$data['categories'][] = array(
    'name' => $result['name'] . ($this->config->get('config_product_count') ? ' (' . $this->model_catalog_product->getTotalProducts($filter_data) . ')' : ''),
    'href' => $this->url->link('product/category', 'path=' . $this->request->get['path'] . '_' . $result['category_id'] . $url)
);

вставим эти:

$data['categories'][] = array(
    'thumb' => $image,
    'name' => $result['name'] . ($this->config->get('config_product_count') ? ' (' . $this->model_catalog_product->getTotalProducts($filter_data) . ')' : ''),
    'href' => $this->url->link('product/category', 'path=' . $this->request->get['path'] . '_' . $result['category_id'] . $url)
);

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

.category-thumb {
    border: 1px solid #ddd;
    margin: 0 0 5px 0;
}
.category-thumb:hover {
    border: 1px solid #2196F3;
}
.category-thumb a {
    display: block;
    padding: 10px;
    text-align: center;
    color: #000;
}
.category-thumb a:hover {
    color: #2196F3; 
}

Теперь можно почистить все кеши и проверить результат нашей работы:

Разумеется можно оформить и посимпатичнее, но я оставлю это на следующую статью — мы ещё не всё сделали на этой странице, продолжим дорабатывать в следующей статье.

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