[Решено]Как вывести подкатегории с картинками

Не смотря на хороший функционал, в плане внешнего вида опенкарт оставляет желать лучшего. Речь конечно же про дефолтный шаблон, а не про премиум шаблоны. Вот взять вывод тех же подкатегорий. Сразу даже не понятно что это подкатегории, так как надпись над ними гласит — «Уточните поиск». При чем тут поиск?

Согласитесь, не очень красиво. Сегодня мы постараемся исправить эту ситуацию и придать списку подкатегорий привлекательный вид.

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

Переходим в

catalog\controller\product\category.php

находим

$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)
);

и заменяем на

if ($result['image']) {
					$image = $this->model_tool_image->resize($result['image'], 100, 100);
				} else {
					$image = $this->model_tool_image->resize('placeholder.png', 100, 100);
				}
				
				$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),
					'thumb' => $image
				);

Теперь переходим к редактированию шаблона по адресу

catalog\view\theme\default\template\product\category.tpl

Находим

<?php if ($categories) { ?>
      <h3><?php echo $text_refine; ?></h3>
      <?php if (count($categories) <= 5) { ?>
      <div class="row">
        <div class="col-sm-3">
          <ul>
            <?php foreach ($categories as $category) { ?>
            <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
            <?php } ?>
          </ul>
        </div>
      </div>
      <?php } else { ?>
      <div class="row">
        <?php foreach (array_chunk($categories, ceil(count($categories) / 4)) as $categories) { ?>
        <div class="col-sm-3">
          <ul>
            <?php foreach ($categories as $category) { ?>
            <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
            <?php } ?>
          </ul>
        </div>
        <?php } ?>
      </div>
      <?php } ?>
      <?php } ?>

и меняем на

<?php if ($categories) { ?>
	<div class="col-sm-12">
	  <div>
		<h3><?php echo $text_refine; ?></h3>
	  </div>
	  <div style="text-align: center;">
		<div class="row">
		<?php foreach ($categories as $category) { ?>
		  <div class="col-md-4 col-sm-6 col-xs-6 for_subcats_pict">
			<div>
			<div class="img_for_subcats_pict"><a href="<?php echo $category['href']; ?>"><img src="<?php echo $category['thumb']; ?>" alt="<?php echo $category['name']; ?>" /></a></div>
			<div class="txt_for_subcats_pict"><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></div>
			</div>
		  </div>
		<?php } ?>
		</div>
	  </div>
	</div>
<?php } ?>

Теперь приведем в порядок стилистику. Для этого в файле

catalog/view/theme/default/stylesheet/stylesheet.css

Добавим

.for_subcats_pict > div {
	border: 1px solid #e5e5e5;
	box-shadow: 2px 2px 4px #e5e5e5;
	padding: 5px;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}
.img_for_subcats_pict {
	width: 30%;
	float: left;
}
.img_for_subcats_pict img {
	width: 100%;
}
.txt_for_subcats_pict {
	width: 70%;
	float: left;
}

Теперь подкатегории будут иметь следующий вид

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

Также прилагаю ocmod модификацию для тех, кто не хочет вносить изменения руками.

 

img_for_subcats.ocmod.xml