Moushe.ru

Блог обо всём

OcStore 1.5.4 Bootstrap template (3 часть)



Сегодня у нас будет мини урок, мы немного поработаем над шапкой нашего сайта.

Bootstrap OpenCart

Список задач на сегодня:

1. Начинаем использовать bootstrap в шапке шаблона

2. Поработаем над контактами

3. Поработаем над панелью навигации

И так приступим:

1.1 Откроем файл ../catalog/view/theme/bootsmy/template/common/header.tpl и изменим эту строку (49):

<div id="container">

на эту:

<div class="container">

(P.S. — во всех последующих *.1 мы будем изменять файл header.tpl)

1.2. Откроем файл ../catalog/view/theme/bootsmy/stylesheet/stylesheet.css и удалим это за ненадобностью (67-72):

#container {
width: 980px;
margin-left: auto;
margin-right: auto;
text-align: left;
}

(P.S. — во всех последующих *.2 мы будем изменять stylesheet.css)

2.1. Вместо этой строки (56):

<?php echo $headcontacts; ?>

вставим эту:

<address><?php echo $headcontacts; ?></address>

2.2. Перед этой строкой (66):

/* layout */

вставим эти:

/* bootstrap */
address {
position: absolute;
top: 25px;
left: 280px;
font-family: Verdana;
}

эти строки всего лишь задают положение наших контактов и их шрифт, все остальные стили мы сможем применить для контактов в форме их создания (вы же помните что в прошлом уроке мы встроили поддержку html тегов ?).

3.1. Изменим это (75-103):

<?php if ($categories) { ?>
<div id="menu">
<ul>
<?php foreach ($categories as $category) { ?>
<li><?php if ($category['active']) { ?>
<a href="<?php echo $category['href']; ?>" class="active"><?php echo $category['name']; ?></a>
<?php } else { ?>
<a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
<?php } ?>

<?php if ($category['children']) { ?>
<div>
<?php for ($i = 0; $i < count($category['children']);) { ?>
<ul>
<?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
<?php for (; $i < $j; $i++) { ?>
<?php if (isset($category['children'][$i])) { ?>
<li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
<?php } ?>
<?php } ?>
</ul>
<?php } ?>
</div>
<?php } ?>
</li>
<?php } ?>
</ul>
</div>
<?php } ?>

на это:

<div class="navbar navbar-inverse">
<div class="navbar-inner">
<ul class="nav nav-pills">
<li><a href="<?php echo $home; ?>"><?php echo $text_home; ?></a></li>
<li><a href="<?php echo $wishlist; ?>" id="wishlist-total"><?php echo $text_wishlist; ?></a></li>
<li><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li>
<li><a href="<?php echo $shopping_cart; ?>"><?php echo $text_shopping_cart; ?></a></li>
<li><a href="<?php echo $checkout; ?>"><?php echo $text_checkout; ?></a></li>
</ul>
</div>
</div>

и удалим это (73):

<div class="links"><a href="<?php echo $home; ?>"><?php echo $text_home; ?></a><a href="<?php echo $wishlist; ?>" id="wishlist-total"><?php echo $text_wishlist; ?></a><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a><a href="<?php echo $shopping_cart; ?>"><?php echo $text_shopping_cart; ?></a><a href="<?php echo $checkout; ?>"><?php echo $text_checkout; ?></a></div>

3.2. Удалим это (300-403):

#header .links {
position: absolute;
right: 0px;
bottom: 3px;
font-size: 10px;
padding-right: 10px;
}
#header .links a {
float: left;
display: block;
padding: 0px 0px 0px 7px;
color: #38B0E3;
text-decoration: none;
font-size: 12px;
}
#header .links a + a {
margin-left: 8px;
border-left: 1px solid #CCC;
}
/* menu */
#menu {
background: #585858;
border-bottom: 1px solid #000000;
height: 37px;
margin-bottom: 15px;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
padding: 0px 5px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu > ul > li {
position: relative;
float: left;
z-index: 20;
padding: 6px 5px 5px 0px;
}
#menu > ul > li:hover {
}
#menu > ul > li > a.active {
background: #000;
}
#menu > ul > li > a {
font-size: 13px;
color: #FFF;
line-height: 14px;
text-decoration: none;
display: block;
padding: 6px 10px 6px 10px;
margin-bottom: 5px;
z-index: 6;
position: relative;
}
#menu > ul > li:hover > a {
background: #000000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
#menu > ul > li > div {
display: none;
background: #FFFFFF;
position: absolute;
z-index: 5;
padding: 5px;
border: 1px solid #000000;
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-khtml-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
background: url('../image/menu.png');
}
#menu > ul > li:hover > div {
display: table;
}
#menu > ul > li > div > ul {
display: table-cell;
}
#menu > ul > li ul + ul {
padding-left: 20px;
}
#menu > ul > li ul > li > a {
text-decoration: none;
padding: 4px;
color: #FFFFFF;
display: block;
white-space: nowrap;
min-width: 120px;
}
#menu > ul > li ul > li > a:hover {
background: #000000;
}
#menu > ul > li > div > ul > li > a {
color: #FFFFFF;
}

после этих строк (67-72):

address {
position: absolute;
top: 25px;
left: 280px;
font-family: Verdana;
}

вставим эти:

.navbar a:hover {
background: url('../image/fonnavbar.png');
}

3.3. Откроем папку ../catalog/view/theme/bootsmy/image и закинем в неё этот файл:

fonnavbar

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

Смотрим на нашу витрину:

Bootstrap OpenCart

Не так уж и много изменилось, но это-же только начало. Улыбка

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

  1. High-Speed

    28.02.2013 at 13:43

    Нет кнопки «Сравнение», но добавить товар в сравнение можно, а ссылки на страницу, как, например «В заметки», нет.
    Как добавить туда кнопку «Сравнение» и чтобы сообщалось количество добавленных товаров как у кнопки «Заметки»?
    Саму кнопку я добавил, а вот количество товаров вызвало затруднения…

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

      01.03.2013 at 12:43

      Я написал для вас статью, в субботу сможете её прочитать. 🙂

  2. в версии 1.5.4.1. этого нет:
    2.1. Вместо этой строки (56):

    и многие другие коды ниже по теме не совпадают

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

      26.03.2013 at 21:40

      У вас OсStore или OpenCart? Статья написана для OCStore по этой ссылке — http://myopencart.ru/download.php если у вас сборка МаксиСторе или ОпенКарт то не уивительно что строки отличаются.

    • версия oсStore 1.5.4.1 и все таки нет того что вы пишите в этом файле начиная с пункта 2.1

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

      04.04.2013 at 21:51

      Это третья часть статьи вы 2 первых читали?

  3. Алёна

    02.04.2013 at 15:51

    добрый день! на третьем шаге пропала панель навигации, где были указаны категории (то есть пропала сама темная полоса, на которой были расположены категории), а ссылки «главная», «закладки», «постоянный покупатель», «корзина» стали расположены в столбик слева. С чем это может быть связано? заранее благодарю за ответ

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

      02.04.2013 at 21:08

      Значит вы что то сделали неправильно, вполне логично же.

    • с пред. вопросом разобрался…а вот тут такая же проблема начинается действительно с 3 пункта — исчезает навигационное меню по категориям. И в столбик слева выстраивается текстовое меню оформить заказ и тд. Такое впечатление, что где то какие то пути неправильно указаны, переделывал все 5 раз с самого начала (с 1 урока).

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

      08.04.2013 at 20:54

      Дайте ссылку на сайт

  4. Борис

    16.11.2013 at 15:10

    Добрый день. Скажите пожалуйста, после удаления строк

    #container {
    width: 980px;

    как можно теперь менять ширину всего магазин? Спасибо.

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

      16.11.2013 at 22:02

      Главный плюс шаблонов на bootstrap в том что они резиновые, а так вы можете обратно вернуть контейнер и задать ему необходимую ширину.

  5. Добрый день, подскажите, как в менюшке вывести пункт Каталог и суб меню категории с картинками (как в мега меню), я вывела категории, а дальше никак не соображу. Фото http://joxi.ru/Q2KqqQVi9Xo5rj. Спасибо.

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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