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

Тема в разделе "Инструкции и FAQ", создана пользователем solunski.d, 11 фев 2016.

  1. solunski.d

    solunski.d Эксперт

    Сообщения:
    1.565
    Симпатии:
    429
    Изображения в пунктах меню это не только дизайн, но и быстрое общение пользователя с сайтом.
    Для начало нам понадобиться какой либо редактор, для не опытных я советую 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'], 2020),
    Обратите внимание переменная $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>
    Как видите все просто :)
     
    Последнее редактирование: 11 фев 2016
    Dimasscus, mr_eas, Slait и 3 другим нравится это.
  2. Zhezkazganetcs

    Zhezkazganetcs Продвинутый пользователь

    Сообщения:
    819
    Симпатии:
    108
    вот бы еще бы и скрин или демо, то вообще ништяк было бы, чтобы оценить как будет
     
  3. solunski.d

    solunski.d Эксперт

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

    Zhezkazganetcs Продвинутый пользователь

    Сообщения:
    819
    Симпатии:
    108
    дак вот и я про тоже
    человек увидит как будет и изменит, если понравится
    он же не будет менять пока хоть примерно не увидит как это будет
     
  5. solunski.d

    solunski.d Эксперт

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

    Kassiel Новичок

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

    Vlad909 Новичок

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

    Vlad909 Новичок

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

    Vlad909 Новичок

    Сообщения:
    16
    Симпатии:
    0
    Можно сделать иконку или слева, или справа. А по центру это как?
     
  10. DiMoss

    DiMoss Продвинутый пользователь

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

    Vlad909 Новичок

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

    DiMoss Продвинутый пользователь

    Сообщения:
    858
    Симпатии:
    236
    Разработчики bootstrap уже обо всём позаботились и у них всё получилось :) Осталось лишь правильно указать классы для соответствующих элементов ;)
     
  13. Valper

    Valper Пользователь

    Сообщения:
    39
    Симпатии:
    0
    Интересует, этот же вопрос, поделитесь пожалуйста решением, если Вы его отыскали.
     
  14. lrsk

    lrsk Новичок

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

    Ален Эксперт

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

    lrsk Новичок

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

    orientir10000 Новичок

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

    solunski.d Эксперт

    Сообщения:
    1.565
    Симпатии:
    429
    Важно, то что вы убрали отвечает за работу с изображением.
    В зависимости от версии движка, данная строка может иметь другой вид.
     
  19. Vlad909

    Vlad909 Новичок

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

    orientir10000 Новичок

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