Moushe.ru

Блог обо всём

OcStore 1.5.5.1.1 несколько улучшений (2 часть)



Продолжим работать над стандартным шаблоном от новой версии OcStore, не смотря на название статьи мы сделаем всего одно изменение, но зато очень большое – мы зафиксируем меню навигации.

34

Обычно сразу после установки OcStore я увеличиваю размер изображений, вот и сегодня мы настроим размер изображений и начнём нашу статью.

0.1. Откроем админку: система > настройки > изменить > изображения:

1

0.2. Откроем админку: дополнения > модули > рекомендуемые > изменить:

2

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

1. зафиксируем панель навигации

Начнём:

1.1. Откроем файл ../catalog/view/theme/default/template/common/header.tpl и вместо этих строк (63-64):

<div id="top">
</div>

вставим эти:

<div id="top">
<div id="welcome">
<?php if (!$logged) { ?>
<?php echo $text_welcome; ?>
<?php } else { ?>
<?php echo $text_logged; ?>
<?php } ?>
</div>
<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 $shopping_cart; ?>"><?php echo $text_shopping_cart; ?></a><a href="<?php echo $checkout; ?>"><?php echo $text_checkout; ?></a></div>
<?php echo $cart; ?>
</div>

удалим эту строку (86):

<?php echo $cart; ?>

удалим эти строки (90-97):

<div id="welcome">
<?php if (!$logged) { ?>
<?php echo $text_welcome; ?>
<?php } else { ?>
<?php echo $text_logged; ?>
<?php } ?>
</div>
<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 $shopping_cart; ?>"><?php echo $text_shopping_cart; ?></a><a href="<?php echo $checkout; ?>"><?php echo $text_checkout; ?></a></div>

1.2. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и вместо этих строк (92-99):

#top {
height: 40px;
border-bottom: 1px solid #DBDEE1;
border-left: 1px solid #DBDEE1;
border-right: 1px solid #DBDEE1;
border-radius: 0 0 5px 5px;
background: #F8F8F8;
}

вставим эти:

#top {
height: 40px;
border-bottom: 1px solid #DBDEE1;
border-left: 1px solid #DBDEE1;
border-right: 1px solid #DBDEE1;
border-radius: 0 0 5px 5px;
background: #F8F8F8;
position: fixed;
top: 0;
width: 980px;
z-index: 99;
}
#top a {
color: #000;
text-decoration: none;
}
#top a:hover {
color: #9999cc;
}
#top #cart {
position: absolute;
top: 5px;
right: 0px;
z-index: 9;
min-width: 300px;
}
#top #cart .heading {
float: right;
margin-right: 2px;
height: 30px;
padding-left: 14px;
padding-right: 14px;
background: url('../image/cart.png') 0% 50% no-repeat;
position: relative;
z-index: 1;
}
#top #cart .heading h4 {
color: #333333;
font-size: 15px;
margin-top: 0px;
margin-bottom: 3px;
}
#top #cart .heading a {
color: #000;
display: block;
}
#top #cart .heading a span {
background: url('../image/arrow-down.png') 100% 50% no-repeat;
padding-right: 15px;
margin-left:30px;
line-height: 30px;
}
#top #cart .content {
clear: both;
display: none;
position: relative;
top: 8px;
padding: 5px;
min-height: 150px;
border: 1px solid #EEEEEE;
border-radius: 7px;
background: #FFF;
}
#top #cart.active .heading {
font-weight:700;
}
#top #cart.active .content {
display: block;
}
.mini-cart-info table {
border-collapse: collapse;
width: 100%;
margin-bottom: 5px;
}
.mini-cart-info td {
color: #000;
vertical-align: top;
padding: 10px 5px;
border-bottom: 1px solid #EEEEEE;
}
.mini-cart-info .image {
width: 1px;
}
.mini-cart-info .image img {
border: 1px solid #EEEEEE;
text-align: left;
}
.mini-cart-info .name small {
color: #666;
}
.mini-cart-info .quantity {
text-align: right;
}
.mini-cart-info td.total {
text-align: right;
}
.mini-cart-info .remove {
text-align: right;
}
.mini-cart-info .remove img {
cursor: pointer;
}
.mini-cart-total {
text-align: right;
}
.mini-cart-total table {
border-collapse: collapse;
display: inline-block;
margin-bottom: 5px;
}
.mini-cart-total td {
color: #000;
padding: 4px;
}
#top #cart .checkout {
text-align: right;
clear: both;
}
#top #cart .empty {
padding-top: 50px;
text-align: center;
}
#top #welcome {
position: absolute;
top: 10px;
left: 7px;
z-index: 5;
width: 298px;
text-align: left;
}
#top #welcome a{}
#top .links {
position: absolute;
left: 290px;
top: 10px;
font-size: 10px;
padding-right: 10px;
z-index:11;
}
#top .links a {
float: left;
display: block;
padding: 0px 0px 0px 7px;
text-decoration: none;
font-size: 12px;
}
#top .links a:hover {}
#top .links a + a {
margin-left: 8px;
border-left: 1px solid #CCC;
}

удалим эти строки (290-403):

#header #cart {
position: absolute;
top: 5px;
right: 0px;
z-index: 9;
min-width: 300px;
}
#header #cart .heading {
float: right;
margin-right: 2px;
height: 30px;
padding-left: 14px;
padding-right: 14px;
background: url('../image/cart.png') 0% 50% no-repeat;
position: relative;
z-index: 1;
}
#header #cart .heading h4 {
color: #333333;
font-size: 15px;
font-weight: bold;
margin-top: 0px;
margin-bottom: 3px;
}
#header #cart .heading a {
color: #000;
text-decoration: none;
display: block;
}
#header #cart .heading a span {
background: url('../image/arrow-down.png') 100% 50% no-repeat;
padding-right: 15px;
margin-left:30px;
line-height: 30px;
}
#header #cart .content {
clear: both;
display: none;
position: relative;
top: 2px;
padding: 8px;
min-height: 150px;
border-top: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
-webkit-border-radius: 0px 0px 7px 7px;
-moz-border-radius: 0px 0px 7px 7px;
-khtml-border-radius: 0px 0px 7px 7px;
border-radius: 0px 0px 7px 7px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
background: #FFF;
}
#header #cart.active .heading {
font-weight:700;
}
#header #cart.active .content {
display: block;
}
.mini-cart-info table {
border-collapse: collapse;
width: 100%;
margin-bottom: 5px;
}
.mini-cart-info td {
color: #000;
vertical-align: top;
padding: 10px 5px;
border-bottom: 1px solid #EEEEEE;
}
.mini-cart-info .image {
width: 1px;
}
.mini-cart-info .image img {
border: 1px solid #EEEEEE;
text-align: left;
}
.mini-cart-info .name small {
color: #666;
}
.mini-cart-info .quantity {
text-align: right;
}
.mini-cart-info td.total {
text-align: right;
}
.mini-cart-info .remove {
text-align: right;
}
.mini-cart-info .remove img {
cursor: pointer;
}
.mini-cart-total {
text-align: right;
}
.mini-cart-total table {
border-collapse: collapse;
display: inline-block;
margin-bottom: 5px;
}
.mini-cart-total td {
color: #000;
padding: 4px;
}
#header #cart .checkout {
text-align: right;
clear: both;
}
#header #cart .empty {
padding-top: 50px;
text-align: center;
}

удалим эти строки (320-354):

#header #welcome {
position: absolute;
top: 10px;
left: 7px;
z-index: 5;
width: 298px;
text-align: left;
color: #999999;
}
#header #welcome a{
color: #000;
}
#header .links {
position: absolute;
left: 290px;
top: 10px;
font-size: 10px;
padding-right: 10px;
z-index:11;
}
#header .links a {
float: left;
display: block;
padding: 0px 0px 0px 7px;
color: #000;
text-decoration: underline;
font-size: 12px;
}
#header .links a:hover {
text-decoration: none;
}
#header .links a + a {
margin-left: 8px;
border-left: 1px solid #CCC;
}

прекрасно, теперь напишем комментарии, перед этими строками (92-103):

#top {
height: 40px;
border-bottom: 1px solid #DBDEE1;
border-left: 1px solid #DBDEE1;
border-right: 1px solid #DBDEE1;
border-radius: 0 0 5px 5px;
background: #F8F8F8;
position: fixed;
top: 0;
width: 980px;
z-index: 99;
}

у нас есть комментарий:

/* header */

изменим его на эту строку:

/* top_menu */

а после этих строк (239-242):

#top .links a + a {
margin-left: 8px;
border-left: 1px solid #CCC;
}

напишем это:

/* end_top_menu */
/* header */

На сегодня всё, следите за новостями.

9 Комментариев

  1. Владимир

    10.10.2013 at 19:19

    Владислав, Вы не подскажите, как сделать различные статусы товаров в зависимости от наличия на складе? Например:
    — «В наличии» (если товаров на складе больше 5 шт.)
    — «Ограничено» (если товаров 3-5 шт.)
    — «Уточняйте» (если товаров меньше 1-2 шт.)
    — «Нет в наличии» (товаров на складе 0).
    Заранее благодарен за ответ!

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

      10.10.2013 at 21:05

      К сожалению я не смогу вам помочь в этом вопросе, посмотрите модули на opencart.com, но скорее всего придётся нанимать фрилансера-программиста для решения этой задачи.

    • Владимир

      13.10.2013 at 20:35

      Решил этот вопрос — подкорректировал catalog\controller\product\product.php.

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

      13.10.2013 at 21:42

      Здорово

    • Дмитрий

      25.11.2013 at 00:31

      Подскажите, что именно отредактировали в
      catalogcontrollerproductproduct.php.?

  2. Алесей

    04.11.2013 at 23:27

    Владислав, спасите.
    Никак не могу сменить цвет кнопки купить и ценника в магазине на opencart 1.5.5.1. Вот адрес сайта http://kotofeyiko.com.ua/. Буду очень признателен за помощь.

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

      05.11.2013 at 13:39

      Установите себе Chrome или Яндекс Браузер и откройте им свой сайт, наводите курсор мыши на нужный элемент и нажимаете правую кнопку мыши — просмотр кода элемента и смотрите какие стили использует ваша кнопка — там в нескольких местах заданы стили мне неудобно указывать строки.

  3. Богдан

    26.11.2013 at 00:36

    Добрый день, помогите пожалуйста новичку), Дело в том что мне нужно поменять цвет шрифта меню и под меню, там стандартный синий, а мне бы хотелось изменить на другой, но как это сделать я не знаю и еще одна проблема, мне нужно также изменить цвет шрифта «Категории» и «Рекомендуемые Товары»
    Спс за внимание, у меня версия 1.5.5.1

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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