Moushe.ru

Блог обо всём

OcStore 1.5.5.1.1. изменяем стандартный шаблон



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

OcStore Default

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

Список задач на 22.01.2014:

1. Работаем с header.tpl

2. Разбираемся в админке (самостоятельно)

3. Работаем с stylesheet.css

Приступим:

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

<?php if ($categories) { ?>
<div id="menu">
<ul>
<?php foreach ($categories as $category) { ?>
<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
<?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 id="menu">
<ul>
<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 $shopping_cart; ?>"><?php echo $text_shopping_cart; ?></a></li>
<li><a href="<?php echo $checkout; ?>"><?php echo $text_checkout; ?></a></li>
</ul>
</div>

1.2. После этих строк (61-63):

<div id="container">
<div id="header">
<div id="top">

вставим эти:

<div id="navi">
<div id="welcome">
<?php if (!$logged) { ?>
<?php echo $text_welcome; ?>
<?php } else { ?>
<?php echo $text_logged; ?>
<?php } ?>
</div>
</div>

1.3. Удалим строки (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>

2. Отключаем в админке выбор языка и валюты (с этим вы должны справится самостоятельно)

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

#top {
height: 30px;
border-top: 1px solid #DBDEE1;
border-bottom: 1px solid #DBDEE1;
background: #F8F8F8;
}

вставим эти:

#top {
height: 30px;
border-bottom: 1px solid #DBDEE1;
background: #000;
}
#navi #welcome {
float: right;
}
#navi #welcome a {
color: #fff;
text-decoration: none;
}

3.2. Удалим эти строки (293-327):

#header #welcome {
position: absolute;
top: 7px;
left: 7px;
z-index: 5;
width: 298px;
text-align: left;
color: #999999;
}
#header #welcome a{
color: #000;
}
#header .links {
position: absolute;
left: 290px;
top: 8px;
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;
}

3.3. Удалим эти строки (116-148):

#language {
position: absolute;
top: 59px;
left: 360px;
width: 108px;
color: #999;
line-height: 17px;
}
#language img {
cursor: pointer;
margin-right: 5px;
padding-left:5px;
}
#currency {
width: 120px;
position: absolute;
top: 56px;
left: 500px;
color: #999;
line-height: 17px;
}
#currency a {
display: inline-block;
padding: 2px 4px;
color: #999;
text-decoration: none;
margin-right: 2px;
margin-bottom: 2px;
}
#currency a b {
color: #000;
text-decoration: none;
}

3.4. Изменим эти строки (104-110):

#header {
height: 90px;
margin-bottom: 7px;
padding-bottom: 4px;
position: relative;
z-index: 99;
}

на эти:

#header {
height: 150px;
margin-bottom: 7px;
padding-bottom: 4px;
position: relative;
z-index: 99;
}

3.5. Вместо этих строк (116-259):

#header #cart {
position: absolute;
top: 0px;
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;
}
#header #search {
position: absolute;
top: 55px;
right: 0px;
width: 298px;
z-index: 7;
}
#header .button-search {
position: absolute;
left: 0px;
background: url('../image/button-search.png') center center no-repeat;
width: 28px;
height: 24px;
border-right: 1px solid #CCCCCC;
cursor: pointer;
}
#header #search input {
background: #FFF;
padding: 1px 1px 1px 33px;
width: 262px;
height: 21px;
border: 1px solid #CCCCCC;
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
-khtml-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
-webkit-box-shadow: 0px 2px 0px #F0F0F0;
-moz-box-shadow: 0px 2px 0px #F0F0F0;
box-shadow: 0px 2px 0px #F0F0F0;
}

вставим эти:

#header #cart {
position: absolute;
top: 55px;
right: 10px;
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: 1px solid #EEEEEE;
border-radius: 10px;
background: #FFF;
}
#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;
}
#header #search {
position: absolute;
top: 60px;
right: 300px;
width: 248px;
z-index: 7;
}
#header .button-search {
position: absolute;
left: 0px;
background: url('../image/button-search.png') center center no-repeat;
width: 28px;
height: 24px;
border-right: 1px solid #CCCCCC;
cursor: pointer;
}
#header #search input {
background: #FFF;
padding: 1px 1px 1px 33px;
width: 212px;
height: 21px;
border: 1px solid #CCCCCC;
border-radius: 10px;
}

3.5. Изменим эти строки (92-103):

#top {
height: 30px;
border-bottom: 1px solid #DBDEE1;
background: #000;
}
#navi #welcome {
float: right;
}
#navi #welcome a {
color: #fff;
text-decoration: none;
}

на эти:

#top {
height: 30px;
background: #3d81b2;
border-radius: 0 0 10px 10px;
color: #fff;
font-size: 12px;
font-family: "Verdana", "Geneva", sans-serif;
text-transform: uppercase;
}
#navi #welcome {
float: right;
padding-top: 6px;
}
#navi #welcome a {
color: #fff;
padding: 10px;
text-decoration: none;
}
#navi #welcome a:hover {
color: #3d81b2;
background: #fff;
}

(P.S.мы уже правили эти строки, но теперь их не перекрывает корзина и мы можем над ними нормально поработать)

На сегодня всё, до новых встреч.

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

  1. Как всегда супер урок! Большое спасибо! Единственное, чего очень не хватает — это скриншот ДО и ПОСЛЕ.

  2. Здравствуйте!
    Подскажите пожалуйста, как сменить пароль входа в админ панель?
    С Уважением, Юрий.

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

      25.01.2014 at 21:57

      Входите в админку — система — пользователи — пользователи — выбираете свою учётку — изменить и указываете новый пароль.

  3. Денис

    28.01.2014 at 00:12

    Доброго времени суток? Я так понимаю в этом уроке Вы увеличили по высоте область шапки? А каким образом можно изменить фон?

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

      28.01.2014 at 18:13

      Фон шапки или фон шаблона?

  4. Огромнейшее спасибо Владислав!

  5. Денис

    29.01.2014 at 12:44

    Фон шапки, интересует возможность вставки картинки. Заранее огромное спасибо!

  6. Дмитрий

    12.02.2014 at 04:57

    Владислав, здравствуйте!
    Подскажите, пожалуйста как сделать автонумерацию счетов

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

      12.02.2014 at 12:07

      Не понял вашего вопроса, у вас заказы и так нумеруются 1, 2 и т.д. или о чём вы?

  7. Алексей

    18.02.2014 at 13:42

    Здравствуйте! Извините, что не в тему маленько, какие строки нужно оставить в header, чтоб остался поиск по сайту, при удалении всего лишнего (корзина, регистрация и т.д), и где менять метоположение на странице форму поиска.

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

      18.02.2014 at 16:44

      ищите слово search в header.tpl и в stylesheet.css

  8. Жанна

    22.02.2014 at 13:23

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

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

      23.02.2014 at 13:17

      1. Путь к закладкам не правильно указали — header.tpl
      2. Stylesheet.css #header — добавить background: #***;
      3. Stylesheet.css #search — правьте top и left

  9. Алексей

    05.03.2014 at 13:39

    Подскажите пожалуйста как рядом с описанием товара и отзывами создать ещё один пункт типа характеристики?чтоб можно было вводить свой текст как бы второе описание или описание в шапке товара.

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

      05.03.2014 at 20:07

      Создайте в админке характеристики, заполните их у товаров и вкладка сама появится, как пример: http://origin-light.ru/fonari/fenix_bt20

  10. Андрей

    05.03.2014 at 16:01

    Не хватает краткого описания каждого действия. Ну и скриншота «до» и «после»

  11. Владислав, огромное спасибо Вам за то, что так подробно все объясняете. Много, что поправил у себя на сайте, благодаря Вашим урокам. Но видимо, что-то сделал не так и не могу понять что… Не ткнете меня носом, пожалуйста….

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

      14.03.2014 at 22:41

      Дайте ссылку на проблемное место, если можете пишите мне вконтакте — более живое и быстрое общение получится.

  12. У меня на лицевой странице появился отступ между header и самой верхней частью экрана (вот язык мой костный), и это не регулировка высоты, а что это такое понять не могу, голову сломал. Поможите :-((

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

      15.03.2014 at 00:53

      Кодировку header.tpl попробуйте сменить на utf-8 без bom

  13. Вячеслав, спасибо огромное, помогло!!! Ведь читал же у Вас в предыдущих уроках utf-8 без bom. А у меня в NotePad++ оказалось по умолчанию стоит просто utf-8. Вот ведь век живи, век учись -)). Буду рекомендовать друзьям

  14. Забыл спросить. Не подскажете, где-то у Вас был хороший урок по изменению футера — убрать эти точечки, добавить колонку лишнюю, добавить еще ссылок, скажем, в блок службу поддержки и т.п. Не могу найти, ткните ссылочку, пожалуйста. Заранее спасибо

  15. Да уж прошу прощения, Владислав. За ссылочку спасибо :-))

  16. Наталья

    08.04.2016 at 01:32

    Доброго времени суток, Владислав! Подскажите, пожалуйста, категории я перенесла в модуль в левый столбец, но подкатегории не видно, как подкатегории сделать видными? А в главном меню откуда убрала категории, хотелось бы сделать «главная», «закладки» и т.д. , заранее благодарна.
    P. S. я новичок))

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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