Как в главном меню вывести изображения категорий?

Изображения в пунктах меню это не только дизайн, но и быстрое общение пользователя с сайтом.
Для начало нам понадобиться какой либо редактор, для не опытных я советую notepad++, ни в коем случае не используйте стандартный редактор Windows или каких либо других операционных систем.
И так приступим.

Проводил работу на движке OpenCart версии 2.1.0.2 (Latest version).
Идем в корневую папку куда установлен движок/CMS OpenCart

1. Подключим модель обработки изображения. Занесем в массив вывода меню, изображения.
Путь: catalog/controller/common/header.php
Действия: Открываем файл для редактирования, нажмем на клавиатуре CTRL + F, откроется окно для быстрого поиска по файлу.
Нам нужна строка

PHP:

$this->load->model('extension/extension');

сразу после нее вставляем

PHP:

$this->load->model('tool/image');

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

PHP:

foreach ($categories as $category) { 

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

Это массив гланвых категорий

PHP:

$data['categories'][] = array(
    'name'     => $category['name'],
    //Подключить вывод изображения
    'thumb'     => $this->model_tool_image->resize($category['image'], $this->config->get('config_image_category_width'), $this->config->get('config_image_category_height')),
    //
    'children' => $children_data,
    'column'   => $category['column'] ? $category['column'] : 1,
    'href'     => $this->url->link('product/category', 'path=' . $category['category_id'])
);

Это массив дочерних категорий

PHP:

$children_data[] = array(
    'name'  => $child['name'] . ($this->config->get('config_product_count') ? ' (' . $this->model_catalog_product->getTotalProducts($filter_data) . ')' : ''),
    //Подключить вывод изображения
    'thumb'     => $this->model_tool_image->resize($child['image'], $this->config->get('config_image_category_width'), $this->config->get('config_image_category_height')),
    //
    'href'  => $this->url->link('product/category', 'path=' . $category['category_id'] . '_' . $child['category_id'])
);

Строку thumb я добавил, она и отвечает за вывод. Вы спросите откуда берется размер генерируемой иконки - из админки, в настройках во вкладке изображения "Размер изображения в списке категорий".

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

PHP:

$this->model_tool_image->resize($child['image'], 20, 20),

Обратите внимание переменная $child - это дочерняя, а $category - родительская категория.

2. Вывод переменно в шаблон.
Путь: catalog/view/theme/*/common/header.tpl
Действия: Открываем файл для редактирования, нажмем на клавиатуре CTRL + F, откроется окно для быстрого поиска по файлу. Нам нужна строка

PHP:

<?php if ($categories) { ?>

Я добавил полный пример работы меню

PHP:

<nav id="menu" class="navbar">
    <div class="navbar-header"><span id="category" class="visible-xs"><?php echo $text_category; ?></span>
        <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        <?php foreach ($categories as $category) { ?>
            <?php if ($category['children']) { ?>
    // Проверяет объявлена ли переменная или нет, для родительских категорий
                <?php if($category['thumb']) { ?>
    //Если есть изображение, выводим так
                    <li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?><img src="<?php echo $category['thumb'];?>" alt="<?php echo $category['name']; ?>"></a>
                <?php } else { ?>
    //Иначе, делаем так
                    <li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>
                <?php } ?>
             <div class="dropdown-menu">
                <div class="dropdown-inner">
                 <?php foreach (array_chunk($category['children'], ceil(count($category['children']) / $category['column'])) as $children) { ?>
                 <ul class="list-unstyled">
                    <?php foreach ($children as $child) { ?>
    // Проверяет объявлена ли переменная или нет, для дочерних категорий
                        <?php if($child['thumb']) { ?>
    //Если есть изображение, выводим так
                            <li><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?><img src="<?php echo $child['thumb'];?>" alt="<?php echo $child['name']; ?>"></a></li>
                        <?php } else { ?>
    //Иначе, делаем так
                            <li><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li>
                        <?php } ?>
                    <?php } ?>
                 </ul>
                 <?php } ?>
                </div>
                <a href="<?php echo $category['href']; ?>" class="see-all"><?php echo $text_all; ?> <?php echo $category['name']; ?></a> </div>
            </li>
            <?php } else { ?>
                <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
            <?php } ?>
        <?php } ?>
      </ul>
    </div>
</nav>


Как видите все просто

 

вот бы еще бы и скрин или демо, то вообще ништяк было бы, чтобы оценить как будет

 

Ну это уже визуальное оформление, а так по крайне мере вы будите знать как сделать вывод изображения Можно это вообще так красиво замутить, а может и не подходить, это уже дизайн.

 

дак вот и я про тоже
человек увидит как будет и изменит, если понравится
он же не будет менять пока хоть примерно не увидит как это будет

 

Ну обычно менять будет верстальщик, ибо клиент вряд ли что то понимает в этом, для него только дизайн важен.

 

Здравствуйте. Сделал все по Вашему примеру и вот как получилось
Скажите пожалуйста, как сделать, что бы иконка была верху по центру надписи, а не с правой стороны ее?
Спасибо Вам за этот пример.

 

Работает! Здорово, спасибо. Так даже веселее выглядит. Только у меня получилось в этом месте $this->model_tool_image->resize($child['image'], 20, 20), без скобки в конце

 

Если бы меню открывалось и закрывалось по клику, а не по наведению курсора, было бы удобнее, так как случайно "пробежав" мышкой через навигацию она хлопает своими шторками, а это не комфортно.

 

Можно сделать иконку или слева, или справа. А по центру это как?

 

таки есть такая возможность у бутстрапа - http://getbootstrap.com/components/#dropdowns

 

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

 

Разработчики bootstrap уже обо всём позаботились и у них всё получилось Осталось лишь правильно указать классы для соответствующих элементов

 

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

 

Я немного не по теме наверное, подскажите, пожалуйста, а как вставить другие изображения в меню? Т.е. хочу чтобы в категориях выводились те, что вставляются через админку, а в меню другие иконки, естественно на каждую категорию разные.

 

ну ведь понимаете что не по теме, тем более в разделе инструкций, так зачем задавать вопрос?
Тем более что по вашему запросу, поиск выдает две темы по вашей тематики
http://forum.opencart-russia.ru/threads/dobavit-ikonki-v-menju.791/
http://forum.opencart-russia.ru/threads/modul-ikonki.2597/

 

Честно, потому что так искала, что только вывод добавленных находила либо модули которые тоже немного не устраивали. Только здесь додумалась "картинки в меню" иконками назвать. Прощу прощения еще раз и спасибо огромное!

 

Сделал по инструкции - белый экран и все - вообще не запускается. Долго думал, потом случайно убрал верхнюю строку в контроллере $this->load->model('tool/image'); и все заработало ( не знаю важно или нет движок oCstore)/ Может кому поможет

 

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

 

Наверное, вы "делая по инструкции" всё же где-то ошиблись, вчера ставил на версию 2.3.0.2.1 заработало. Инструкция отличная.

 

Вы правы были - не включил вывод ошибок и не разобрался в проблеме. Потому что после обновления модификаторов вылазит ошибка. Добавил в шапку $this->load->model('tool/image'); Теперь такая проблема. После нажатия кнопки обновить в менеджере дополнений получается такая ошибка на главной
Parse error: syntax error, unexpected ';', expecting ')' in /home/...../system/storage/modification/catalog/controller/common/header.php on line 194
Массив почему то не до конца переносится. Убирал комменты, искал пустые символы - ничего нет. Что это может быть?