Moushe.ru

Блог обо всём

OcStore 1.5.4.1 иконки оплат



Сегодня мы с вами немного поработаем над футером нашего интернет магазина на OcStore 1.5.4.1. Мы встроим в футер иконки способов оплат.

2var3var

1. Сначала найдём необходимые нам иконки, для своего интернет магазина я остановил выбор на этих симпатичных иконках:

beelinesms_mastercardmegafonesms_mtcsms_paypalqiwisberbank-2visayandexmoney

(Скачать можно здесь: payment-shipping-icons)

2. Откроем папку  ../catalog/view/theme/default/image и закинем в неё наши иконки.

3. Откроем файл ../catalog/view/theme/default/template/common/footer.tpl и после этих строк (39-42):

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

вставим эти:

<div id="icons">
<p>Мы принимаем к оплате:<p/>
<img src="catalog/view/theme/default/image/yandexmoney.gif">
<img src="catalog/view/theme/default/image/qiwi.gif">
<img src="catalog/view/theme/default/image/paypal.gif">
<img src="catalog/view/theme/default/image/mtcsms_.gif">
<img src="catalog/view/theme/default/image/beelinesms_.gif">
<img src="catalog/view/theme/default/image/megafonesms_.gif">
<img src="catalog/view/theme/default/image/sberbank-2.gif">
<img src="catalog/view/theme/default/image/visa.gif">
<img src="catalog/view/theme/default/image/mastercard.gif">
</div>

(если у ваших иконок иные имена, то подкорректируйте их названия и расширение в этом коде)

результат:

1var

4. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и вместо этого кода (1623-1627):

#powered {
margin-top: 5px;
text-align: right;
clear: both;
}

вставим этот:

#powered {
margin-top: 5px;
margin-bottom: 10px;
text-align: center;
clear: both;
}
#icons {
color: #666;
text-align: center;
}
#icons img{
border: 1px solid #fff;
}
#icons img:hover {
border: 1px solid #45a5ec;
}

результат:

2var

Пример посложнее:

вставим в footer.tpl этот код (вместо кода из 3 шага):

<div id="icons">
<p>Мы принимаем к оплате:<p/>
<div class="column">
<ul>
<li><img src="catalog/view/theme/default/image/yandexmoney.gif"></li>
<li><img src="catalog/view/theme/default/image/qiwi.gif"></li>
<li><img src="catalog/view/theme/default/image/paypal.gif"></li>
</ul>
</div>
<div class="column">
<ul>
<li><img src="catalog/view/theme/default/image/mtcsms_.gif"></li>
<li><img src="catalog/view/theme/default/image/beelinesms_.gif"></li>
<li><img src="catalog/view/theme/default/image/megafonesms_.gif"></li>
</ul>
</div>
<div class="column">
<ul>
<li><img src="catalog/view/theme/default/image/sberbank-2.gif"></li>
<li><img src="catalog/view/theme/default/image/visa.gif"></li>
<li><img src="catalog/view/theme/default/image/mastercard.gif"></li>
</ul>
</div>
</div>

а в stylesheet.css этот код (вместо кода из 4 шага):

#powered {
margin-top: 5px;
margin-bottom: 10px;
padding-left: 35px;
text-align: left;
clear: both;
}
#icons {
padding-top: 5px;
color: #666;
text-align: center;
max-width: 30%;
}
#icons img{
border: 1px solid #fff;
}
#icons img:hover {
border: 1px solid #45a5ec;
}
#icons .column {
float: left;
width: 33%;
}
#icons .column ul {
list-style-type: none;
}

результат:

3var

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

2 Комментария

  1. Игорь

    16.07.2013 at 20:10

    ДД, понравилась статья, только вместо Мы принимаем к оплате у меня высвечиваются кракозябры. Подскажите как решить?

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

      16.07.2013 at 21:19

      Блокнот — Сохранить как — кодировка utf-8 без boom

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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