Moushe.ru

Блог обо всём

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



Продолжаем работать с нашим шаблоном, пора уже доделать шапку и приступить к остальным элементам нашего шаблона.

15

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

1. Вставим иконку корзины

2. Поработаем над CSS стилями и подключим на сайт свой шрифт

3. Поправим CSS стили корзины

4. Сделаем иконку корзины ссылкой

Приступим:

1. В прошлом уроке мы поработали с шапкой, но она до сих пор выглядит недоделанной, слишком уж много пустого пространства, адрес выглядит грубовато, корзине не хватает иконки. Значит будем корректировать. Найдём симпатичную иконку корзины, я взял отсюда:

http://ru.depositphotos.com/24793437/stock-illustration-Shopping-Cart-Icon.html

после обработки в графическом редакторе иконка корзины приобретает такой вид:

cart_img

закинем наше изображение в папку ../catalog/view/theme/bearstore/image. Откроем файл header.tpl и после этих строк (80-81):

<?php echo $language; ?>
<?php echo $currency; ?>

вставим эту:

<div id="cart_img"><img src="catalog/view/theme/bearstore/image/cart_img.png"></div>

Откроем файл stylesheet.css и после этих строк (212-218):

#header #cart {
position: absolute;
top: 20px;
right: 0px;
z-index: 9;
min-width: 300px;
}

вставим эти:

#header #cart_img {
position: absolute;
top: 10px;
right: 150px;
}
#header #cart_img:hover {
opacity: 0.9;
-moz-transform: rotate(25deg);
-o-transform: rotate(25deg);
-webkit-transform: rotate(25deg);
}

2. Откроем файл stylesheet.css и вместо этих строк (144-150):

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

вставим эти:

#header {
height: 130px;
position: relative;
z-index: 99;
}

вместо этих строк (149-153):

#header #logo {
position: absolute;
top: 10px;
left: 0px;
}

вставим эти:

#header #logo {
position: absolute;
top: 0px;
left: 0px;
}

вместо этих строк (154-165):

#header #contacts {
position: absolute;
top: 60px;
right: 200px;
font-size: 18px;
}
#header #mobile {
position: absolute;
top: 50px;
right: 500px;
text-align: center;
}

вставим эти:

#header #contacts {
position: absolute;
top: 20px;
right: 250px;
font-size: 18px;
font-family: OpenSans;
src: local('OpenSans'),
url(../fonts/OpenSans.ttf);
}
#header #mobile {
position: absolute;
top: 20px;
left: 300px;
text-align: center;
font-family: OpenSans;
src: local('OpenSans'),
url(../fonts/OpenSans.ttf);
}

вместо этих строк (175-178):

#mini_mobile {
font-size: 14px;
padding-bottom: 10px;
}

вставим эти:

#mini_mobile {
font-size: 14px;
padding-bottom: 3px;
}

Вы наверное обратили внимание на эти строки:

font-family: OpenSans;
src: local('OpenSans'),
url(../fonts/OpenSans.ttf);

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

2.1. Открыть файл stylesheet.css и после этих строк (6-12):

body {
background-color: #ffffff;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}

вставить эти:

@font-face {
font-family: OpenSans;
src: local('OpenSans-Light'),
url(../fonts/OpenSans-Light.ttf);
}

2.2. Открыть папку ../catalog/view/theme/bearstore и загрузить в неё эту папку вместе с содержимым: http://yadi.sk/d/5FcdKnNkMWvyQ

3. Вы наверняка обратили внимание на хвостик иконки в корзину, давайте опустим корзину чуть ниже чтобы хвостик указывал на неё, откроем файл stylesheet.css и вместо этих строк (221-227):

#header #cart {
position: absolute;
top: 20px;
right: 0px;
z-index: 9;
min-width: 300px;
}

вставим эти:

#header #cart {
position: absolute;
top: 85px;
right: 25px;
z-index: 9;
min-width: 300px;
}

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

#header #cart .heading {
float: right;
margin-right: 0px;
margin-top: 15px;
padding-left: 14px;
padding-right: 14px;
position: relative;
z-index: 1;
}

вставим эти:

#header #cart .heading {
float: right;
margin-right: 0px;
margin-top: 0px;
padding-left: 14px;
padding-right: 14px;
position: relative;
z-index: 1;
}

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

2

Неплохо, но корзина всё равно выглядит не очень, мы видим что иконку корзины нужно уменьшить и немного опустить, а корзину нужно приподнять, уменьшаем иконку:

cart_img

и забрасываем в папку image. Откроем stylesheet.css и вместо этих строк (221-232):

#header #cart {
position: absolute;
top: 85px;
right: 25px;
z-index: 9;
min-width: 300px;
}
#header #cart_img {
position: absolute;
top: 10px;
right: 150px;
}

вставим эти:

#header #cart {
position: absolute;
top: 65px;
right: 20px;
z-index: 9;
min-width: 300px;
}
#header #cart_img {
position: absolute;
top: 20px;
right: 150px;
}

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

3

На мой взгляд стало намного лучше, единственное что нужно теперь изменить размер логотипа, уменьшим изображение медведя:

logomy

и выберем в админке наш новый логотип (или просто заменим наш старый логотип в папке ../image/data нашим новым логотипом).

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

4

Элементы шапки расположены не очень аккуратно, мы это исправим поправив стили, откроем stylesheet.css и вместо этих строк (77-129):

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

вставим эти:

#top_panel {
height: 38px;
background: #b3b747;
}
#top_panel #search {
position: absolute;
top: 7px;
right: 7px;
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: 12px;
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;
}

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

#header {
height: 130px;
position: relative;
z-index: 99;
}
#header #logo {
position: absolute;
top: 0px;
left: 0px;
}
#header #contacts {
position: absolute;
top: 20px;
right: 250px;
font-size: 18px;
font-family: OpenSans;
src: local('OpenSans'),
url(../fonts/OpenSans.ttf);
}
#header #mobile {
position: absolute;
top: 20px;
left: 300px;
text-align: center;
font-family: OpenSans;
src: local('OpenSans'),
url(../fonts/OpenSans.ttf);
}
#big_mobile {
font-size: 18px;
}
#mini_mobile {
font-size: 14px;
padding-bottom: 3px;
}
#middle_mobile {
font-size: 16px;
color: #b3b747;
}
#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;
}
#header #cart {
position: absolute;
top: 65px;
right: 20px;
z-index: 9;
min-width: 300px;
}
#header #cart_img {
position: absolute;
top: 20px;
right: 150px;
}

вставим эти:

#header {
height: 130px;
position: relative;
z-index: 99;
}
#header #logo {
position: absolute;
top: 3px;
left: 7px;
}
#header #contacts {
position: absolute;
top: 15px;
right: 250px;
font-size: 18px;
font-family: OpenSans;
src: local('OpenSans'),
url(../fonts/OpenSans.ttf);
}
#header #mobile {
position: absolute;
top: 15px;
left: 250px;
text-align: center;
font-family: OpenSans;
src: local('OpenSans'),
url(../fonts/OpenSans.ttf);
}
#big_mobile {
font-size: 18px;
}
#mini_mobile {
font-size: 14px;
padding-bottom: 3px;
}
#middle_mobile {
font-size: 16px;
color: #b3b747;
}
#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;
}
#header #cart {
position: absolute;
top: 70px;
right: 10px;
z-index: 9;
min-width: 300px;
}
#header #cart_img {
position: absolute;
top: 25px;
right: 150px;
}

Результат:

5

Шапка стала заметно симпатичнее, пожалуй так и оставим.

4. Если вы наведёте курсор мыши на нашу иконку корзины то вы увидите что она немного светлеет и поворачивается, на картинку так и хочется нажать, но при нажатии ничего не происходит, давайте это исправим, откроем файл header.tpl и вместо этой строки (82):

<div id="cart_img"><img src="catalog/view/theme/bearstore/image/cart_img.png"></div>

вставим эту:

<div id="cart_img"><a href="<?php echo $shopping_cart; ?>"><img src="catalog/view/theme/bearstore/image/cart_img.png"></a></div>

Теперь при нажатии на нашу иконку корзины мы переходим в корзину.

В этом уроке мы должны были приступить к работе с модулями, но у меня не осталось свободного времени, будем работать в следующей статье, а для вас есть задание на дом – создайте 10-12 товаров в категории все медведи, добавьте небольшое описание и изображения, можете ради фана сделать любые товары – они необходимы над для следующей статьи – сложно менять стили модулей и товаров когда их нет на сайте. Улыбка

До новых встреч. следите за статьями.

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

  1. У меня при нажатии на меню «Все медведи», а так же на созданные «Контакты» и некоторые другие ссылки. выводится сообщение:

    «Добро пожаловать в Open Server!
    Вау! Он работает 😉
    Перед использованием программы ознакомьтесь с руководством пользователя!»
    Это у всех или только у меня?
    Как я понял это как то связано с опцией «Включить ЧПУ» в настройках, я так понимаю надо настроивать файл хтааццес?

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

      23.04.2014 at 19:28

      Откройте htacess и после 20 строки:
      (# If your opencart installation does not run on the main web folder make sure you folder it does run in ie. / becomes /shop/ )
      вставьте эту:
      RewriteBase /15511/
      (заменив 15511 на свою папку, в которой установлен ваш оксторе, и читайте 7 статью — http://moushe.ru/nashi-stati/opencart-moi-stati/sozdanie-magazina-bearstore-7-chast/ )

  2. По поводу этого урока — со шрифтом фишки не получилось, шрифт не меняется после всех действий..
    И в 3м пункте, после замены строчек (148-231), иконка корзины «плывёт». Мож чё не так делаю? 2 раза проверил вроде…

  3. yandex.ru Александр Пономарев

    17.01.2016 at 15:57

    Подскажите что может быть минииконка корзины не отображается просто квадратик ! Чтоможет быть ? сайт теплыйпол.рф?

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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