Moushe.ru

Блог обо всём

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



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

612

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

1. Работаем с футером

2. Перекрасим кнопки

3. Работаем с CSS

Приступим:

1.1. Скачаем набор иконок: Скачать иконки и отберём некоторые из них:

maestromastercardpaypalprivatbankqiwirbkmoneysberbankvisayandexmoney

(у вас может быть иной набор способов оплаты, поэтому лучше скачайте архив)

1.2. Откроем папку ../catalog/view/theme/bearstore/image и переместим в неё наши иконки.

1.3. Откроем файл ../catalog/view/theme/bearstore/template/common/footer.php и после этих строк (21-29):

<div class="column">
<h3><?php echo $text_account; ?></h3>
<ul>
<li><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li>
<li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li>
<li><a href="<?php echo $wishlist; ?>"><?php echo $text_wishlist; ?></a></li>
<li><a href="<?php echo $newsletter; ?>"><?php echo $text_newsletter; ?></a></li>
</ul>
</div>

вставим эти:

<div class="column">
<h3>Способы оплаты</h3>
<ul>
<img src="catalog/view/theme/bearstore/image/maestro.png">
<img src="catalog/view/theme/bearstore/image/mastercard.png">
<img src="catalog/view/theme/bearstore/image/visa.png"><br>
<img src="catalog/view/theme/bearstore/image/privatbank.png">
<img src="catalog/view/theme/bearstore/image/rbkmoney.png">
<img src="catalog/view/theme/bearstore/image/sberbank.png"><br>
<img src="catalog/view/theme/bearstore/image/qiwi.png">
<img src="catalog/view/theme/bearstore/image/paypal.png">
<img src="catalog/view/theme/bearstore/image/yandexmoney.png">
</ul>
</div>

Если вы отобрали другие изображения, то укажите вместо maestro, mastercard, visa и т.д. название отобранной вами картинки, у 3 и 6 строки вы могли обратить внимание на тег br (в скобках) он служит для переноса строк, мы конечно могли создать для этой колонки отдельный вид в CSS стилях и прописать ширину колонки – тогда в строку будет также по три изображения, но зачем всё усложнять.

1.4. Откроем файл ../catalog/view/theme/bearstore/template/common/footer.php и удалим эти строки (45-48):

<!--
OpenCart is open source software and you are free to remove the powered by OpenCart if you want, but its generally accepted practise to make a small donation.
Please donate via PayPal to donate@opencart.com
//—>

и эти (46-49):

<!--
OpenCart is open source software and you are free to remove the powered by OpenCart if you want, but its generally accepted practise to make a small donation.
Please donate via PayPal to donate@opencart.com
//-->

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

$_['text_powered']         = 'Работает на <a href="http://myopencart.ru">ocStore</a><br /> %s &copy; %s';

вставим эту:

$_['text_powered']         = '%s &copy; %s';

(мы и так знаем на чём работает наш интернет магазин Подмигивающая рожица )

 

2. Пришло время перекрасить кнопки, откроем папку ../catalog/view/theme/bearstore/image и найдём в ней изображение button.png и заменим этим изображением:

button

3. Я определился с цветовой схемой этого шаблона перекрасим часть шаблона, остальное сделаем в следующей статье (работаю в выходные дни над двумя интернет магазинами и очень сильно устаю, поэтому на прошлой неделе и не было статьи — заработался). Откроем файл ../catalog/view/theme/bearstore/stylesheet/stylesheet.css и вместо этих строк (77-80):

#top_panel {
height: 38px;
background: #b3b747;
}

вставим эти:

#top_panel {
height: 38px;
background: #9bda6a;
}

вместо этих строк (91-128):

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

вставим эти:

#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 #007148;
cursor: pointer;
}
#top_panel #search input {
background: #FFF;
padding: 1px 1px 1px 33px;
width: 192px;
height: 21px;
border: 1px solid #007148;
border-radius: 13px;
}
#top_panel #welcome {
width: 298px;
color: #fff;
padding: 12px;
font: 11px bold Arial;
letter-spacing: 2px;
text-transform: uppercase;
}
#top_panel #welcome a{
color: #fff;
text-decoration: none;
font: 11px Arial;
letter-spacing: 2px;
text-transform: uppercase;
}
#top_panel #welcome a:hover {
color: #000;
}

вместо этих строк (180-183):

#middle_mobile {
font-size: 16px;
color: #b3b747;
}

вставим эти:

#middle_mobile {
font-size: 16px;
color: #007148;
}

вместо этих строк (244-250):

#header #cart .heading h4 {
color: #b3b747;
font-size: 15px;
font-weight: bold;
margin-top: 0px;
margin-bottom: 3px;
}

вставим эти:

#header #cart .heading h4 {
color: #007148;
font: 15px bold;
letter-spacing: 2px;
text-transform: uppercase;
margin-top: 0px;
margin-bottom: 3px;
}

вместо этих строк (328-349):

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

вставим эти:

#menu {
background: #60a859;
color: #fff;
height: 40px;
margin-top: 15px;
margin-bottom: 15px;
}
#menu a {
color: #FFF;
text-decoration: none;
display: inline-block;
padding: 12px 10px;
margin:0 5px 0 3px;
font: 11px bold Arial;
letter-spacing: 1px;
text-transform: uppercase;
}
#menu a:hover {
color: #000;
border-bottom: 2px solid #000;
}

вместо этих строк (512-524):

a.button, input.button {
cursor: pointer;
color: #FFFFFF;
line-height: 12px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
background: url('../image/button.png') repeat-x;
-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;
}

вставим эти:

a.button, input.button {
cursor: pointer;
color: #FFFFFF;
line-height: 12px;
font: 14px Arial, Helvetica, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
background: url('../image/button.png') repeat-x;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}

вместо этих строк (536-538):

a.button:hover, input.button:hover {
background-position: 0px -24px;
}

вставим эти:

a.button:hover, input.button:hover {
background-position: 0px -24px;
color: #000;
}

вместо этих строк (599-605):

.box .box-heading {
background: #b3b747;
padding: 10px 15px;
font: 18px Arial;
line-height: 14px;
color: #fff;
}

вставим эти:

.box .box-heading {
background: #9bda6a;
padding: 5px 0;
line-height: 14px;
color: #000;
font: 22px OpenSans;
letter-spacing: 1px;
font-variant: small-caps;
}

Наш шаблон преобразился и стал выглядеть серьёзнее:

2

До встречи в следующем материале. Улыбка

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

  1. Уважаемый Владислав,

    Прежде всего, спасибо за Вашу работу, много полезного.
    Единственный «минус» — не хватает кратких пояснения по содержанию статей, поэтому трудно ориентироваться где что описано.

    У меня возникла проблема, которую не могу решить, может что подскажете — не могу передвинуть кнопку Купить в одну строку с ценой, причем везде, т.е. при выводе сеткой в категориях/подкатегориях, по поиску, по производителю, а также на карте товара.

    Интересно, что при выводе товаров списком, цена и кнопка стоят в одной строке…

    Т.е. вроде понятно, что надо смотреть theme\name\template\product
    файлы category, search и manufacturer, но что-то не могу сообразить как
    соединить для вывода конструкции типа
    if (price != null) { html += » + price + »;}
    и }
    html += » + $(element).find(‘.cart’).html() + »;
    $(element).html(html);

  2. Забыл указать — Opencart 1.5.x

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

      11.05.2014 at 22:31

      Напишите мне Вконтакте — смогу помочь — в комментарии блога php код не вставить.

  3. Денис

    15.03.2015 at 02:34

    День добрый. Не заметил в какой момент, но на главной и в категории верхняя часть шаблона съехала верх так что надпись вход/регистрация и поиск оказались ниже своего места. Где косяк?

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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