admin Опубликовано 17 марта, 2022 Поделиться Опубликовано 17 марта, 2022 Не смотря на хороший функционал, в плане внешнего вида опенкарт оставляет желать лучшего. Речь конечно же про дефолтный шаблон, а не про премиум шаблоны. Вот взять вывод тех же подкатегорий. Сразу даже не понятно что это подкатегории, так как надпись над ними гласит — «Уточните поиск». При чем тут поиск? Согласитесь, не очень красиво. Сегодня мы постараемся исправить эту ситуацию и придать списку подкатегорий привлекательный вид. Изменения будем вносить в контроллер и темплейт категорий, а также внесем некоторые корректировки в файл стилей шаблона. Переходим в 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 0 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.