Изображения подкатегорий opencart 2

19.04.2015 04:20

В стандартном opencart категории выводятся только списком, в то время как в админке к каждой категории можно присвоить изображение, которое будет показываться в описании категории товаров. Намного красивее можно вывести категории товаров в виде плитки с картинками. Начнём изменять наш шаблон, открываем: /catalog/view/theme/default/template/product/category.tpl

Находим следующий код:

     <?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 
$counter = 0;
foreach ($categories as $category) { 
if( !$counter )
    echo '<div class="row">'; ?>
	      <div class="col-md-2">
		<div class="catlist">
		<div class="catimg"><a href="<?php echo $category['href']; ?>"><img src="<?php echo $category['thumb']; ?>"></a></div>
		<div class="catname"><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></div>	
		</div>
	      </div>
<?php
$counter++;
if( $counter >= 6 ) {
    echo '</div>';
    $counter = 0;
    }
} 
if ($counter > 0)
    echo '</div>';
?>

Здесь мы, во-первых вывели изображения подкатегорий opencart, во-вторых - вместо обычного маркированного списка задействовали вывод в виде красивой плитки. Теперь чтобы стали доступны картинки в шаблоне, открываем контроллер: /catalog/controller/product/category.php

Находим в районе 162 строки код:

$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(
'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'=>$this->model_tool_image->resize($result['image'], $this->config->get('config_image_category_width'), $this->config->get('config_image_category_height'))
);

Для указания размеров изображения мы использовали стандартную опцию, редактируемую из админки: "Размер изображения в списке категорий".

Чтобы список категорий выглядел красивее, добавим немного стилей:

.catlist
  {
  border: 1px solid #DDD;
  margin-bottom: 20px;
  }
.catimg
  {
  text-align:center;
  }
.catname
  {
  padding:0px 10px;
  height:40px;
  overflow:auto;
  }

В результате получится следующее:

catsthumbs

Сразу предупреждаю о возможных проблемах:

  1. Если Вы в админке установите изображение больше чем размер контейнера col-md-2, то картинки выйдут за границы элемента.
  2. Если Вы используете длинные имена в категориях, то часть имени может обрезаться снизу.

Оба случая устраняются с помощью стилей, высота контейнера под заголовок категории находится в стиле .catname, и ширина блока задаётся через bootstrap контейнеры col-md-2, col-md-3 и т.д.

В завершении нужно перенести описание категории под список товаров, это очень часто требуют seo специалисты, в шаблоне категорий /catalog/view/theme/default/template/product/category.tpl находим код:

      <?php if ($thumb || $description) { ?>
      <div class="row">
        <?php if ($thumb) { ?>
        <div class="col-sm-2"><img src="<?php echo $thumb; ?>" alt="<?php echo $heading_title; ?>" title="<?php echo $heading_title; ?>" class="img-thumbnail" /></div>
        <?php } ?>
        <?php if ($description) { ?>
        <div class="col-sm-10"><?php echo $description; ?></div>
        <?php } ?>
      </div>
      <hr>
      <?php } ?>

Вырезаем его и переносим в самый конец файла под следующие строки:

      <div class="row">
        <div class="col-sm-6 text-left"><?php echo $pagination; ?></div>
        <div class="col-sm-6 text-right"><?php echo $results; ?></div>
      </div>
      <?php } ?>

Теперь описание категорий находится под списком товаров.



Opencart файловый менеджер

Много раз возникала задача к какой-либо текстовой странице прикрепить ссылку на .pdf или .xlx файл. По умолчанию менеджер файлов opencart не поддерживает работу с этими типами файлов, а для их размещения предусмотрен отдельный механизм, файлы для скачивания становятся доступны на странице личного кабинета покупателя. Нашу задачу этот способ никак не решает, так что выход один- переделать файловый менеджер.

Вывод текста на определённой странице wordpress

Стандартный функционал wordpress не позволяет вывести текст в сайдбаре только на одной конкретной странице.


(57) Комментариев

Ярослав - 30.07.2015 13:32:31
- 0    + 0
А как в модуле такое же реализовать?
Илья - 30.07.2015 15:07:55
- 0    + 0
Модуль должен подключить свой файл со стилями и, например, через vqmod подменить всё что мы тут описали.
Андрей - 08.10.2015 21:31:32
- 0    + 0
Подскажите, пожалуйста, а где найти стили для подкатегорий?
Хочу подогнать размеры, чтобы было 4 колонки, да все никак не выходит...
http://joxi.ru/KAg8elQIwPXzrl <---- скриншот
Если есть возможность, подскажите, пожалуйста.
скайп heavy0882
icq 375574482
Илья - 09.10.2015 01:51:48
- 0    + 0
Как-то подозрительно мало стилей показано в инспекторе для col-md-2. Это бутстраповский стиль, и соответсно лежит он в bootstrap.min.css. Но его менять нельзя, поломаются стили в других местах. Если нужна другая ширина ячейки, нужно в шаблоне сменить класс на col-md-1 или col-md-3 или col-md-4, по вкусу.
макс - 20.10.2015 11:18:17
- 0    + 0
Спасибо за ваши советы !!!

Вставил код
-------------
.catlist.....
padding:0px 10px;
height:40px;
overflow:auto;
}
-------------
Описание категорий с картинками равномерно распределились по странице,
Но у меня описание к категории 5 слов к примеру "Конверты на выписку, теплые конверты" и картинку видно ,но появился скрол текста !!!
Илья - 20.10.2015 11:25:22
- 0    + 0
Чтобы не появлялся скрол, overflow нужно выставить в hidden. Но тогда текст, который не поместится в контейнер, будет обрезаться по краям. К сожалению простого решения этой ситуации нет. Либо выставляем всем блокам одинаковые размеры и они выстраиваются ровной сеткой, либо выставляем высоту авто, но тогда они разместятся как попало...
Есть более сложный вариант: после загрузки страницы, с помощью js, пробегаем по всем элементам и выбираем максимальный размер, затем его присваиваем всем элементам. Тогда для всех иконок размер будет подбираться по максимальному.
Остальные варианты совсем экзотика...
макс - 20.10.2015 12:25:52
- 0    + 0
Да картинка выравнилась, на как вы и писали срезало часть длинного описания, Решил пока не добавлять данный скрипт, а поиграть с порядком расположения описания.

Спасибо за ответ
макс - 20.10.2015 12:27:26
- 0    + 0
Да а как можно выставить всем блокам одинаковые размеры,
ВРУЧНУЮ каждому блоку !?
Илья - 20.10.2015 13:40:46
- 0    + 0
Чтобы изменить размер, нужно использовать другой bootstrap класс: col-md-2, col-md-3, col-md-4 итд.
макс - 20.10.2015 15:52:09
- 0    + 0
Спасибо за ответ...
Вопрос немного не по теме
можно ли ссылки в верхней "ГЛАВНОЙ"шапке-горизонтальном меню
(под поиском и значком корзины)
сделать по центру шапки, а не по левому краю !?
Алексей - 18.11.2015 15:40:32
- 0    + 0
Уважаемый admin,
Спасибо за четкое описание решения, я думаю, всем необходимого вопроса.
Добавления:
1. Для контроля размера картинки категории воспользовался всего лишь стандартным приемом Bootsrtap: для img картинки установил class="img-responsive"
2. Переносить описание категории (в угоду SEO))) не стал - не стоит забывать за посетителей - ведь им лучше сперва прочитать описание категории, а потом уж смотреть картинки. Если уж так надо для SEO - можно description продублировать и в конце страницы.
Еще раз спасибо за четкость.
Станислав - 22.11.2015 17:32:12
- 0    + 0
Спасибо автору большое. Всё получилось с первого раза.
Станислав - 22.11.2015 17:40:59
- 0    + 0
Единственный вопрос:
В завершении нужно перенести описание категории под список товаров, это очень часто требуют seo специалисты, в шаблоне категорий /catalog/view/theme/default/template/product/category.tpl находим код:

Это нужно для хорошей оптимизации или для чего? Очень интересно...
Илья - 23.11.2015 01:26:44
- 0    + 0
Нет, на оптимизацию это никак не влияет. Если сайт продвигается по категориям то обычно закидывают достаточно большие тексты, которые сильно сдвигают вниз товары и подкатегории. Кроме того очень часто СЕО специалисты ещё те "специалисты". Пишут говнотексты которые людям стыдно показывать... Вот и прячут всё вниз.
Виктор - 26.11.2015 16:18:07
- 0    + 0
Спасибо автору за статью !! Статья супер ! Конечно не знал что можно так легко это сделать , обычно на всех сайтах тупо модули платные суют, а тут понятно и по делу показал как все работает и что не обязательно деньги давать за модуль, dtm можно и самому разобраться с помощью вашей помощи !
Сергей - 07.12.2015 13:29:40
- 0    + 0
Огромное спасибо автору! Еще вопрос по поводу стилей
Чтобы список категорий выглядел красивее, добавим немного стилей: Куда их добавлять ?
Илья - 07.12.2015 14:16:03
- 0    + 0
В файл стилей Вашей темы. Для стандартной темы это: /catalog/view/theme/default/stylesheet/stylesheet.css
Сергей - 08.12.2015 18:44:23
- 0    + 0
Уважаемый админ, как использовать другой bootstrap класс или переключиться на него ? Опишите по подробней .Заранее благодарен
Алексей - 08.01.2016 17:28:22
- 0    + 0
Добрый вечер!
Подскажите как теперь сделать чтобы при выборе категории в боковом меню , под категории не раскрывались (они же появляются в центре).
Да и если много под категорий , не красиво когда это все разворачивается.
Спасибо.
Илья - 11.01.2016 02:18:41
- 0    + 0
Алексей, простите за долгий ответ, праздники... Чтобы модуль "Категории" не показывал вложенные подкатегории можно сделать следующее: откройте файл /catalog/view/theme/default/template/module/category.tpl и замените условие:

if ($category['children'])

на

if(0)
Александр - 13.01.2016 13:54:34
- 0    + 0
сделал все как описано. От картинок выводит "пустоту".
Не та переменная?
Александр - 13.01.2016 13:55:55
- 0    + 0


вот такое вместо картинки выдает
Илья - 13.01.2016 14:29:23
- 0    + 0
Если вместо картинок выводит пустоту- значит контроллер не передал в шаблон адреса картинок. Проблема скорее всего в нём.
Александр - 13.01.2016 22:36:20
- 0    + 0
Спасибо, Илья. Подскажите как решить, спасибо
Тимур - 18.01.2016 15:47:11
- 0    + 0
Огромное спасибо автору!!! Очень помогло!)))
Конст - 18.02.2016 23:28:07
- 0    + 0
Супер!
А как сделать вывод в несколько строк? У меня если до 5 подкатегорий- все картинки отображаются нормально, если 9- отображается 3, 10- отображается 1, не могу понять закономерность...
Илья - 19.02.2016 01:22:58
- 0    + 0
В этом примере корректно должны отображаться только первые 6 изображений. Если выводить нужно много картинок, то скрипт придётся слегка модифицировать.

Эту часть:




Нужно переписать в что-то на подобии:


$counter = 0;
foreach ($categories as $category) {
if( !$counter )
echo '
'; ?>

$counter++;
if( $counter >= 7 ) {
echo '
';
$counter = 0;
}
}
if ($counter > 0)
echo '
';
?>


Инструкцию обновил.
Евгений - 13.03.2016 16:46:20
- 0    + 0
А у меня первый ряд в подкатегориях идет горизантально , а потом начинаетсся вертикально заполнять.. Как сделать все горизантально, ведь подкатегорий будет в районе 20.
Илья - 14.03.2016 01:42:19
- 0    + 0
Евгений, не знаю. Вот если бы Вы, хотя бы ссылку на сайт/категорию скинули, может и помог бы. А при текущей постановки задачи, ничем не помогу.
Александр - 17.03.2016 19:30:24
- 0    + 0
Чтобы список категорий выглядел красивее, добавим немного стилей. Эти строчки нужно добавлять в какое то определенное место в файле стилей?
Илья - 18.03.2016 00:54:45
- 0    + 0
В идеале в файл стилей Вашей темы. Но можно и в этом же файле, в самом начале, между тегами


Александр - 19.03.2016 13:49:42
- 0    + 0
В идеале в файл стилей Вашей темы. Но можно и в этом же файле, в самом начале, между тегами


...


В файле /catalog/controller/product/category.php тегов

...
я не нашел.
Подскажите пожалуйста в файле стилей в каком конкретно месте вставить эти строчки.
Илья - 20.03.2016 01:29:42
- 0    + 0
Александр, не позорьтесь, откройте хотя бы википедию и почитайте что такое html.
Саша - 06.04.2016 19:00:28
- 0    + 0
Помогите решить проблему с разбросом категорий
Илья - 07.04.2016 00:17:26
- 0    + 0
Саша, в чём именно проблема?
Саша - 09.04.2016 04:54:29
- 0    + 0
Все сделал по вашей инструкции. Первые 6ть под категорий отображаются нормально, после одна идет вертикально, остальные пропуская ряд снова выстраиваются горизонтально. Ссылка на сайт:

http://крым-сейф.рф/index.php?route=product/category&path=62
Илья - 09.04.2016 14:49:29
- 0    + 0
Саша, вот теперь сразу видно в чём проблема- я немного ошибся в инструкции, в строчке:


if( $counter >= 7 ) {


Нужно не 7, а 6 подставить, чтобы 6 элементов максимум влазило. Инструкцию исправил.
Саша - 09.04.2016 18:16:46
- 0    + 0
Спасибо вам огромное!!
Владимир - 15.04.2016 10:23:16
- 0    + 0
Подскажите для версии opencart 2.2 есть решение?
Игорь - 20.04.2016 08:50:28
- 0    + 0
у меня вместо картинок появились иконки? помогите плиз .http://hiq.su/index.php?route=product/category&path=25_69_71 Версия ocStore 2.1.0.2.1
Илья - 20.04.2016 12:26:24
- 0    + 0
У вас вместо адреса картинки подставляется ошибка: "Notice: Undefined index: thumb in /var/www/hiq/html/catalog/view/theme/default/template/product/category.tpl on line 36"

Это означает что Вы что-то недоделали в контроллере, и шаблон не знает что за переменная thumb.
Игорь - 21.04.2016 11:56:20
- 0    + 0
спасибо все получилось
Андрей - 15.05.2016 09:57:23
- 0    + 0
Добрый день ! Подскажите пожалуйста, где добавить стилей? Я основное сделал, а в каком файле добавить немного стилей пока что не разобрался ...
Илья - 18.05.2016 01:02:24
- 0    + 0
Стили добавляются в файле стилей Вашей темы. Либо в тут же в редактируемом шаблоне, между тегами


Андрей - 18.05.2016 14:31:36
- 0    + 0
В том то и дело что этих тегов в том же файле как указано, я не нашел . По этому и написал.
Илья - 18.05.2016 15:13:41
- 0    + 0
Всё правильно, этих тегов и не должно быть внутри шаблона. Но Вы можете их добавить самостоятельно. По-хорошему либо в начало, либо в самый канец файла.
Женя - 27.05.2016 17:51:17
- 0    + 0
Большое человеческое спасибо!!!
Алекс - 30.05.2016 16:28:55
- 0    + 0
Warning: imagecreatetruecolor(): Invalid image dimensions in /home/sportfes/sportfest.com.ua/www/system/library/image.php on line
Илья, добрый вечер!
Повываливалась куча вот таких ошибок!
Что делать, не знаю!)
Алекс - 30.05.2016 16:32:55
- 0    + 0
Сборка 2.2 русская
Илья - 31.05.2016 08:26:31
- 0    + 0
Как обычно, есть 2 варианта:
1. Вы что-то не доделали. А именно в контроллере, вот в этом месте:
'thumb'=>$this->model_tool_image->resize(

2. Либо у Вас какая-то проблема с конфигом и он отдаёт неправильные данные через:
$this->config->get('config_image_category_width')
$this->config->get('config_image_category_height')
Vitaliy - 24.06.2016 12:47:03
- 0    + 0
Добрый день.
Не могу понять в чем проблема. При добавлении разного количества подкатегорий, как-то странно меняется отображаемое количество подкатегорий.
Так, при 1-5 подкатегорий все ОК
при 6 - отображается только две (последних)
при 7 - отображается только 1 (последняя)
при 8 - 2
при 9 - 3.
10 - 1/
Мне нужно чтобы в одной строке было по 3 подкатегории, поэтому я установил f( $counter >= 3 ).
Здесь все ОК.
Я так понимаю, что отображается только последняя строка. Но не понимаю почему.
Возможно проблема с высотой блока для отображения подкатегорий?
Сергей - 14.07.2016 09:37:48
- 0    + 0
Здраствуйте! Большое спасибо за ваш труд! С под категориями все получилось,версия 2.0.3.1.А как быть с категориями? Картинками возможно иконками. Подскажите пожалуйста .
Илья - 14.07.2016 10:26:58
- 0    + 0
Если Вы имеете в виду отдельную страницу со всеми корневыми категориями, то нет, тут быстрого рецепта нет. Но возможно уже есть готовые плагины, посмотрите, пожалуйста, на официальном сайте.
Сергей - 14.07.2016 12:00:53
- 0    + 0
Вот например категориям слева которые имеют названия (текст) можно ли для каждой присвоить иконку чтобы отображалось :название категории + иконка (картинка)этой категории
Максим - 11.08.2016 11:32:01
- 0    + 0
Выдает такие ошибки :Warning: imagecreatetruecolor(): Invalid image dimensions in /home/zakupka/domains/zakupka24.com.ua/public_html/system/library/image.php on line 105Warning: imagecolorallocate() expects parameter 1 to be resource, boolean given in /home/zakupka/domains/zakupka24.com.ua/public_html/system/library/image.php on line 113Warning: imagefilledrectangle() expects parameter 1 to be resource, boolean given in /home/zakupka/domains/zakupka24.com.ua/public_html/system/library/image.php on line 116Warning: imagecopyresampled() expects parameter 1 to be resource, boolean given in /home/zakupka/domains/zakupka24.com.ua/public_html/system/library/image.php on line 118
Илья - 11.08.2016 14:07:04
- 0    + 0
Для указания размеров изображения мы использовали стандартную опцию, редактируемую из админки: «Размер изображения в списке категорий».
Вы их указали?
Максим - 12.08.2016 14:06:15
- 0    + 0
Все верно указал, но почему-то выдает ошибку ...