Переделываем категории на CMS OpenCart 4.1. (1 часть)

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

До:

После:

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

{% if not categories and not products %}
  <p>{{ text_no_results }}</p>
  <div class="text-end"><a href="{{ continue }}" class="btn btn-primary">{{ button_continue }}</a></div>
{% endif %}

вставим эти:

{% if image or description %}
  <hr/>
  <div class="row">
    {% if image %}
      <div class="col-3"><img src="{{ image }}" alt="{{ heading_title }}" title="{{ heading_title }}" class="img-thumbnail"/></div>
    {% endif %}
    {% if description %}
      <div class="col-9">{{ description }}</div>
    {% endif %}
  </div>
{% endif %}

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

{% if image or description %}
  <div class="row">
    {% if image %}
      <div class="col-3"><img src="{{ image }}" alt="{{ heading_title }}" title="{{ heading_title }}" class="img-thumbnail"/></div>
    {% endif %}
    {% if description %}
      <div class="col-9">{{ description }}</div>
    {% endif %}
  </div>
  <hr/>
{% endif %}

Отлично, описание перемещено, теперь работаем со списком подкатегорий, вместо этих строк:

{% if categories %}
  <h3>{{ text_refine }}</h3>
  {% 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 row-cols-sm-2 row-cols-lg-4">
      {% set total = category.children|length %}
      {% if total > 20 %}
        {% set batch = (total / 4)|round(0, 'ceil') %}
      {% else %}
        {% set batch = 5 %}
      {% endif %}
      {% for category in categories|batch(batch) %}
        <div class="col">
          <ul>
            {% for child in category %}
              <li><a href="{{ child.href }}">{{ child.name }}</a></li>
            {% endfor %}
          </ul>
        </div>
      {% endfor %}
    </div>
    <br/>
  {% endif %}
{% endif %}

вставим эти:

{% if categories %}
  <h3>{{ text_refine }}</h3>
    <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>
{% endif %}

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

Вместо этой строки:

<li><a href="{{ category.href }}">{{ category.name }}</a></li>

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

<li>
   <a href="{{ category.href }}"><img src="{{ category.image }}"></a>
   <a href="{{ category.href }}">{{ category.name }}</a>
</li>

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

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

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

вставим эти:

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

    if ($result['image'] && is_file(DIR_IMAGE . html_entity_decode($result['image'], ENT_QUOTES, 'UTF-8'))) {
        $image = $result['image'];
    } else {
        $image = 'placeholder.png';
    }

    $data['categories'][] = [
        'image' => $this->model_tool_image->resize($image, $this->config->get('config_image_category_width'), $this->config->get('config_image_category_height')),
        'name' => $result['name'] . ($this->config->get('config_product_count') ? ' (' . $this->model_catalog_product->getTotalProducts($filter_data) . ')' : ''),
        'href' => $this->url->link('product/category', 'language=' . $this->config->get('config_language') . '&path=' . $this->request->get['path'] . '_' . $result['category_id'] . $url)
    ];
}

Чистим кеши и смотрим что изображения слишком уж большие, давайте их уменьшим?

3. Открываем админку и переходим: Система > Настройки > Редактировать > Изображения > Размер изображения в списке категорий и вместо стандартных 300 x 300 (здесь могла бы быть шутка про тракториста…), задаём 150 x 150, этого более чем достаточно.

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

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

4. Вновь откроем файл: ../catalog/view/template/product/category.twig и вместо этих строк:

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

вставим эти:

{% if categories %}
<h3>{{ text_refine }}</h3>
<hr>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4">
    {% for category in categories %}
    <div class="col mb-3">
        <div class="category-thumb">
            <div class="image"><a href="{{ category.href }}"><img src="{{ category.image }}"></a></div>
            <div class="content"><a href="{{ category.href }}">{{ category.name }}</a></div>
        </div>
    </div>
    {% endfor %}
</div>
<hr>
{% endif %}

Сетку сделали, теперь нужно добавить стили.

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

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

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

Демонстрационный сайт: demo.moushe.ru (демо сайт обновляется вместе с выходом новых статей).

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