Moushe.ru

Блог обо всём

Создание магазина BearStore (4 часть)



Продолжаем делать наш магазин BearStore сделанный как вы помните на OcStore, в этой статье мы поработаем над шапкой нашего шаблона.

03

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

1. Работаем с шапкой магазина

2. Работаем с CSS стилями

3. Работаем с переводом

4. Работаем с корзиной

5. Работаем с переводом модуля корзина

6. Работаем со стилями корзины

Приступим:

1. Откроем файл ../catalog/view/theme/bearstore/template/common/header.tpl и вместо этих строк (56-59):

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

вставим эти:

<div id="container">
<div id="top_panel">
<div id="search">
<div class="button-search"></div>
<input type="text" name="search" placeholder="<?php echo $text_search; ?>" value="<?php echo $search; ?>" />
</div>
<div id="welcome">
<?php if (!$logged) { ?>
<?php echo $text_welcome; ?>
<?php } else { ?>
<?php echo $text_logged; ?>
<?php } ?>
</div>
</div>
<div id="header">

ниже найдём и удалим эти строки (83-93):

<div id="search">
<div class="button-search"></div>
<input type="text" name="search" placeholder="<?php echo $text_search; ?>" value="<?php echo $search; ?>" />
</div>
<div id="welcome">
<?php if (!$logged) { ?>
<?php echo $text_welcome; ?>
<?php } else { ?>
<?php echo $text_logged; ?>
<?php } ?>
</div>

вместо этой строки (83):

<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>

вставим эти:

</div>
<div id="menu">
<a href="<?php echo $home; ?>"><?php echo $text_home; ?></a>|
<a href="All_bears">Все медведи</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>

ниже найдём и удалим эти строки (91-115):

</div>
<?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 } ?>

Вот что у нас получилось:

1

2. Откроем файл ../catalog/view/theme/bearstore/stylesheet/stylesheet.css и после этих строк (66-71):

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

вставим эти:

#top_panel {
height: 30px;
background: #b3b747;
margin: 0;
}
#top_panel #search {
position: absolute;
top: 2px;
right: 2px;
position: relative;
text-align: right;
float: right;
width: 228px;
z-index: 15;
}
#top_panel .button-search {
position: absolute;
left: 0px;
background: url('../image/button-search.png') center center no-repeat;
width: 28px;
height: 24px;
border-right: 1px solid #b3b747;
cursor: pointer;
}
#top_panel #search input {
background: #FFF;
padding: 1px 1px 1px 33px;
width: 192px;
height: 21px;
border: 1px solid #b3b747;
border-radius: 20px;
}
#top_panel #welcome {
width: 298px;
color: #fff;
padding: 8px 10px;
font-family: Arial;
font-size: 11px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
}
#top_panel #welcome a{
color: #fff;
text-decoration: none;
font-family: Arial;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}
#top_panel #welcome a:hover {
color: #000;
}

ниже найдём и удалим эти строки (144-149):

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

ниже найдём и удалим эти строки (300-361):

#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;
}
#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;
}

Вместо этих строк (301-378):

#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;
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 {
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;
}

вставим эти:

#menu {
background: #b3b747;
color: #ddd;
height: 38px;
margin-top: 15px;
margin-bottom: 15px;
}
#menu a {
font-size: 13px;
color: #FFF;
text-decoration: none;
display: inline-block;
padding: 12px 10px;
margin:0 5px 0 3px;
font: 11px Arial;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
}
#menu a:hover {
color: #000;
}

3. Откроем файл ../catalog/language/russian/common/header.php и вместо этой строки (5):

$_['text_shopping_cart']  = 'Корзина покупок';

вставим эту:

$_['text_shopping_cart']  = 'Корзина';

а вместо этой (7):

$_['text_welcome']        = '<a href="%s">Войти</a> или <a href="%s">зарегистрироваться</a>';

вставим эту:

$_['text_welcome']        = '<a href="%s">Вход</a> / <a href="%s">Регистрация</a>';

Смотрим что у нас получилось:

2

Шапка стала посимпатичнее но всё равно выглядит пустоватой, давайте поработаем с корзиной.

3. Откроем файл ../catalog/view/theme/bearstore/template/module/cart.tpl и вместо этой строки (3):

<a title="<?php echo $heading_title; ?>"><span id="cart-total"><?php echo $text_items; ?></span></a></div>

вставим эти:

<h4><?php echo $heading_title; ?></h4>
<a><span id="cart-total"><?php echo $text_items; ?></span></a></div>

4. Откроем файл ../catalog/language/russian/module/cart.php и вместо этой строки (3):

$_['heading_title'] = 'Корзина покупок';

вставим эту:

$_['heading_title'] = 'Ваша корзина';

а вместо этой (7):

$_['text_empty']    = 'В корзине пусто!';

вставим эту:

$_['text_empty']    = 'Ваша корзина пуста!';

5. Откроем файл ../catalog/view/theme/bearstore/stylesheet/stylesheet.css и вместо этих строк (189-212):

#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 {
position: absolute;
top: 20px;
right: 0px;
z-index: 9;
min-width: 300px;
}
#header #cart .heading {
float: right;
margin-right: 0;
margin-top: 15px;
padding-left: 14px;
padding-right: 14px;
position: relative;
z-index: 1;
}
#header #cart .heading h4 {
color: #b3b747;
font-size: 15px;
font-weight: bold;
margin-top: 0px;
margin-bottom: 3px;
}

а вместо этих строк (212-245):

#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;
background: #FFF;
}
#header #cart.active .heading {
font-weight:700;
}
#header #cart.active .content {
display: block;
}

вставим эти:

#header #cart .heading a {
color: #000;
text-decoration: none;
}
#header #cart .heading a span {
background: url('../image/arrow-down.png') 100% 50% no-repeat;
padding-right: 15px;
}
#header #cart .content {
clear: both;
display: none;
position: relative;
padding: 8px;
min-height: 150px;
border: 1px solid #EEEEEE;
border-radius: 10px;
background: #FFF;
}
#header #cart.active .heading {}
#header #cart.active .content {
display: block;
}

Смотрим результат:

3

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

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

  1. привет, сделал как описано, всё получилось.
    Как поставить вместо «все медведи» мою продукцию?

    • разобрался уже, если я с headera удалю «Закладки» , «Оформление заказа», «Корзина» это не повлияет на работу магазина?

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

      03.04.2014 at 00:17

      Нет не повлияет, в следующем уроке мы как раз и будем убирать ненужное и доделаем шапку.

  2. Тогда ничего трогать не буду, буду ждать следующего урока.
    Хотелось бы в следующем уроке увидеть как добавить: тел., адрес, инф. о доставке в шапку.

  3. В первом шаге в последнем пункте нужноудалять 91-120 а не 115… По крайней мере у меня так вышло…

    • Николай

      08.11.2014 at 13:26

      У меня тоже 91-115 не получалось. Удалил 91-120 и все вышло.

  4. Евген

    02.06.2014 at 13:31

    Здравствуйте! Все делаю как описано, но не перекрашивает в #b3b747, поиск остался в левом углу, и «корзинка» не исчезла… В предидущих темах все получалось. Только с цветом и фоном никак(. Подскажите мож настроить надо чего?

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

      02.06.2014 at 22:54

      Напишите мне в контакте и пришлите туда ссылку на сайт. В комментарии писать замучаюсь.

  5. Здравствуйте! Подскажите пожалуйста, какая команда отвечает, чтобы между кнопками меню были разделители как в данном шаблоне. И куда её ввести?

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

      07.06.2014 at 22:00

      1 шаг, в нём между ссылками вставляются разделители.

  6. Не очень понял… Я не сильно разбираюсь, хотя сайт сделал и даже много где в кодах поковырялся… В первом шаге много что поменяно, а мне надо только вставить «|» между ссылками меню. У меня свой шаблон. (www.elochek.net) Извиняюсь, если не по теме(
    Мне по идее только одну строку надо ввести из 1-го шага. Вот хотелось узнать какую)
    P.S. Замечательный блог, ресурс. Помог в освоении opencart. Спасибо!

    В идеале хотелось бы, чтобы меню не сплошное было, а поделено на кнопки, но я к сожалению не разобрался как это сделать.

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

      07.06.2014 at 22:47

      В контакте пользуетесь? В комментарии я не могу вставлять код — https://vk.com/mag1987 — стукните в личку и отвечу.

  7. Владислав, спасибо!

  8. Николай

    07.11.2014 at 17:28

    Доброго времени суток. Небольшая проблемка, может подскажете. Не могу правильно настроить файл .htaccess; если в настройках сервера магазина ставлю «да» то не отображаются переходы по категориям у которых есть seo_keyword. Если ставлю нет, все отлично работает, но дальнейшие изменения в header.tpl ломают сайт. Может что-то неправильно сделал с файлом. Взял .htaccess.txt в формате txt и переименовал в .htaccess без формата. Такой же файл лежит и в папке localhost (понятно что внутренности разные). Заранее спасибо.

    • Николай

      08.11.2014 at 12:46

      Да, спасибо. Все заработало, ни где не было написано про 22 строку в файле .htaccess, поэтому сайт рушился. И еще одна ошибочка в статье: указано что файл .htacess.txt нужно переименовать в файл .htacess. Правильно его нужно переименовывать в файл .htaccess. Человеческий фактор. Но все равно огромное спасибо автору за этот сайт и за комментарии.

  9. Николай

    11.03.2015 at 21:44

    Здравствуйте, после всех проделанных операций по данному уроку почему то нет названия «ваша корзина», как его прописать?

  10. Дмитрий

    18.07.2015 at 00:02

    Добрый день, как мне в топ меню, рядом с кнопками вход\регистрация добавить ещё кнопок? как не бьюсь всё никак не выходит.

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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