Moushe.ru

Блог обо всём

OpenCart изменяем дизайн категорий (2 часть)



Илья попросил меня написать ещё один урок по переделке внешнего вида блока категории, раз просите – делаем. Улыбка

До:                                                      После:

Do.jpgPosle-1.jpg

 

Откроем файл category.tpl (..\default\catalog\view\theme\default\template\module) и изменим этот код:

<div class="box">
<div class="top"><img src="catalog/view/theme/default/image/category.png" alt="" /><?php echo $heading_title; ?></div>
<div id="category" class="middle"><?php echo $category; ?></div>
<div class="bottom">&nbsp;</div>
</div>

на этот:

<div class="top_c">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<div class="heading_c"><?php echo $heading_title; ?></div>
</div>
</div>
<div id="category_c" class="middle_c"><?php echo $category; ?></div>
<div class="bottom_c">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>

Откроем папку image (..\default\catalog\view\theme\default\image) и закинем туда эти картинки:

upleupceupridoledocedori

(графику изменил специально, не хочется делать полный клон чужой менюшки, в стандартной теме шаблон модулей состоит всего из трёх картинок – верх, низ и стрелка, но у этого способа есть очень большой минус – если вы захотите изменить ширину боковых колонок то вам придётся перерисовывать ширину двух картинок, а используя 7 картинок меню будет автоматически расширяться на нужную вам ширину.)

Теперь откроем stylesheet.css и добавим в него этот код:

.top_c .left {
background: url('../image/uple.jpg') no-repeat;
width: 6px;
height: 30px;
float: left;
}
.top_c .right {
background: url('../image/upri.jpg') no-repeat;
width: 6px;
height: 30px;
float: right;
}
.top_c .center {
background: url('../image/upce.jpg') repeat-x;
height: 30px;
margin: 0 5px 0px 5px;
}
.heading_c {
padding: 10px 0px 5px 0px;
color: #fff;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
}
.middle_c {
padding: 10px 0px 10px 0px;
border-left: 1px solid #822c15;
border-right: 1px solid #822c15;
background: #e0c995;
}
#category_c ul {
margin-top: 0px;
margin-bottom: 0px;
padding-left: 10px;
list-style: none;
padding-right: 8px;
}
.middle_c a {
display: block;
color: #822c15;
background: #e0c995;
font-weight: bold;
font-size: 13px;
text-decoration: none;
border-bottom: 1px solid #fff;
}
.middle_c  a:hover {
color: #fff;
background: #822c15;
border-bottom: 1px solid #fff;
}
.bottom_c .left {
background: url('../image/dole.jpg') no-repeat;
width: 6px;
height: 7px;
float: left;
}
.bottom_c .right {
background: url('../image/dori.jpg') no-repeat;
width: 6px;
height: 7px;
float: right;
}
.bottom_c .center {
background: url('../image/doce.jpg') repeat-x;
height: 7px;
margin: 0px 5px 10px 5px;
}

 

При желании можно добавить стрелку — закинем эту картинку в папку image:

str

И изменим это:

#category_c ul {
margin-top: 0px;
margin-bottom: 0px;
padding-left: 10px;
list-style: none;
padding-right: 8px;
}

на это:

#category_c ul {
margin-top: 0px;
margin-bottom: 0px;
padding-left: 10px;
margin-left: 22px;
padding-right: 8px;
list-style: url('../image/str.png');
}

И результат будет таким:

Posle 1

Это наш первый вариант, в следующем уроке рассмотрим вариант посложнее.

На сегодня всё. До встречи. Улыбка

22 Комментария

  1. Огромное спасибо!

  2. Владислав Храмцов
    vkontakte.ru Владислав Храмцов

    14.11.2011 at 22:10

    Не за что, скоро будет 3 урок. 🙂

    • Третий урок на тему изменения дизайна категорий?

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      16.11.2011 at 01:15

      Да, что нить посложнее придумаем, а не просто «перекрашивание» стандартного дизайна категорий. 🙂

  3. А меню в стили «аккордеон» сможете сделать?
    http://shop.uahorses.com/
    🙂

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      16.11.2011 at 21:46

      Забавно сделано 🙂 Нужно полазить в нете и попробовать сделать, может и получится. Посмотрим. 🙂

  4. мне тоже очень понравилось 🙂

  5. Здравствуйте Владислав, огромное спасибо за Ваш труд, в этом уроке Вы активно изменяли дизайн категорий. Может подскажите как сделать категории с картинками как здесь westmarket.by, это мой сайт, я купил модуль «расширенные категории», но в нем полно багов особенно они выявляются в свежее обновленных браузерах, а тех поддержка хромает на две ноги, приходится искать другие варианты решения проблемы.
    Так вот, можно ли в место «хлебных крошек» вставлять картинки категорий в стандартном модуле категории и как это сделать?
    Или может, чтобы не изобретать велосипед поправите модуль «расширенные категории», естественно не бесплатно.

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      02.12.2011 at 13:28

      В чём именно проявляются проблемы модуля? Вам больше нужна помощь программиста — я наврятли справлюсь ибо знание php хромает на обе ноги. 🙂

  6. Владислав спасибо за интерес к моей проблеме, частично с ней разобрался, но осталась еще одна загвоздка, при нажатии на самую нижнюю категорию раскрываются подкатегории, но они не расширяют окно категорий вниз и поэтому выползают на нижнее окно производителей.
    я наврят ли справлюсь ибо знание php хромает на обе ноги — Вы лучше помогаете чем специальных форума где сидят «гуру», не все конечно «гуру» есть и настоящие.

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      02.12.2011 at 15:18

      Попробуйте выбрать другой шаблон, останется ли проблема ? Если останется скидывайте модуль на моё мыло — hruhru.87@mail.ru

  7. Сделай пожалуйста уроки изменение аналогично производители,информация,ссылки и т.д

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      26.01.2012 at 21:19

      Я пока ещё не планирую возвращаться к урокам по OpenCart 1.4.9, возможно вернусь позднее — но сейчас моё время занимают уроки по шаблону к OpenCart 1..5.1 — сначала нужно доделать его. 🙂

  8. И как долго будем ждать?

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      26.01.2012 at 23:51

      Осталось сделать 1 — 2 урока по 1.5.1 и сразу после этого сделаю пару уроков по переделке дизайна модулей 1.4.9, думаю через 1 — 2 недели появятся нужные вам уроки.

  9. Владислав Храмцов
    vkontakte.ru Владислав Храмцов

    14.02.2012 at 21:55

    Кстати вот один из обещанных уроков — http://moushe.ru/nashi-stati/web-dizajn-2/opencart-delaem-shablon-whitecart-2-chast/

  10. Александр

    19.03.2012 at 13:52

    Добрый день!
    А реально ли вывести отображение названия товаров в дерево категорий?
    Спасибо.

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      19.03.2012 at 21:12

      На оф. форуме была статья, но ссылку я не оставил, ищите там.

  11. Vitaly Nikulin

    22.08.2012 at 14:12

    Здравствуйте, Владислав! После выполнения всех замен в месте вывода категорий появилось сообщение: Notice: Undefined variable: category in /home/i/ivanovka/public_html/catalog/view/theme/default/template/module/category.tpl on line 8
    Как это исправить?
    P.S. Также блок категорий отражается сикось-накось…

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      23.08.2012 at 22:08

      Версия OpenCart’а какая у вас ? Дайте ссылку на сайт, посмотрю в чём проблема.

  12. на 1.5.5.1.2 нет такого текста, как быть по другому, не подскажите?

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      28.10.2014 at 22:14

      Это статья под очень старую версию OpenCart’а, свежих по этой теме статей не писал.

Добавить комментарий

Your email address will not be published.

*

CAPTCHA image
*

© 2016 Moushe.ru При копировании материалов, ссылка на нас обязательна!

Вверх ↑



Яндекс.Метрика