В прошлой статье мы начали работать над футером нашего интернет магазина, в этой статье продолжим улучшать наш футер.

OpenCart-20

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

1. Правим стили

2. Добавляем иконки способов оплаты

3. Удаляем лишние ссылки, немного изменяем футер

Приступим:

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

/* footer */
footer {
margin-top: 30px;
padding-top: 30px;
background-color: #303030;
border-top: 1px solid #ddd;
color: #e2e2e2;
}
footer hr {
border-top: none;
border-bottom: 1px solid #666;
}
footer a {
color: #ccc;
}
footer a:hover {
color: #fff;
}
footer h5 {
font-family: 'Open Sans', sans-serif;
font-size: 13px;
font-weight: bold;
color: #fff;
}

вставим эти:

/* footer */
footer {
margin-top: 30px;
padding-top: 30px;
background-color: #303030;
border-top: 2px solid #2196F3;
color: #2196F3;
}
footer hr {
border-top: none;
border-bottom: 1px solid #666;
}
footer a {
color: #2196F3;
}
footer a:hover {
color: #fff;
}
footer h5 {
font-family: 'Open Sans', sans-serif;
color: #d2d2d2;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
}
footer h5 .fa {
color: #d2d2d2;
font-size: 16px;
}

Результат:

ocstore_footer_02_01

2.1. Найдём в интернете симпатичный пак иконок способов оплаты, я взял вот с этого замечательного ресурса — freebi.ru (последний набор иконок на этой странице)

15_payment_methods_preview

Скачиваем архив, распаковываем, выбираем из необходимые иконки, я для примера взял вот эти (цветные, 64px):

ocstore_footer_02_02

Наверняка в наборе есть не все необходимые именно вам иконки, но статья не о поиске иконок, а об их вставке. Подмигивающая рожица

2.2. Открываем папку ../catalog/view/theme/default/image и закидываем в неё все наши иконки, после этого открываем файл ../catalog/view/theme/default/template/common/footer.tpl и вместо этой строки (31):

<li>1,2,3,4,5</li>

вставляем эти:

<li>
<img src="catalog/view/theme/default/image/JCB.png">
<img src="catalog/view/theme/default/image/Maestro.png">
<img src="catalog/view/theme/default/image/MasterCard.png">
<img src="catalog/view/theme/default/image/PayPal.png">
<img src="catalog/view/theme/default/image/Visa.png">
</li>

Результат:

ocstore_footer_02_03

Как видим иконки крупноваты, мы можем задать их размер с помощью css, но лучше просто подкорректировать их размер с помощью графического редактора (Gimp, Photoshop и т.д.) или просмотрщика изображений (XnView и т.д.), я задал картинкам размер 40px x 25px и вот что из этого получилось:

ocstore_footer_02_04

Возможно вам нравятся иконки покрупнее, просто поиграйте их размерами.

3. Наверняка вам не нравится надпись – Работает на OcStore, тем более и с ссылкой на чужой сайт? Показывать cms своего магаза всем подряд не безопасно, да и смотрится не очень. Будем убирать.

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

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

вставим эту:

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

3.2. Откроем файл ../catalog/view/theme/default/template/common/footer.tpl и удалим эти строки (72-77):

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

<!-- Theme created by Welford Media for OpenCart 2.0 www.welfordmedia.co.uk -->

теперь переместим ссылку на карту сайта, удалим эту строку (17):

<li><a href="<?php echo $sitemap; ?>"><i class="fa fa-angle-right"></i> <?php echo $text_sitemap; ?></a></li>

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

<p><?php echo $powered; ?></p>

вставим эту:

<p><?php echo $powered; ?> <a href="<?php echo $sitemap; ?>"><i class="fa fa-sitemap"></i> <?php echo $text_sitemap; ?></a></p>

давайте удалим ссылки Возврат товара, Партнёры, они нам не нужны:

16 —           <li><a href="<?php echo $return; ?>"><i class="fa fa-angle-right"></i> <?php echo $text_return; ?></a></li>

23 —           <li><a href="<?php echo $affiliate; ?>"><i class="fa fa-angle-right"></i> <?php echo $text_affiliate; ?></a></li>

Результат:

ocstore_footer_02_05

Смотрится не симметрично, но это только пока, в следующей статье мы пропишем в футер ссылки на свои страницы.

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