OpenCart 2.x — добавляем контакты и социальные иконки в футер
Футер, или он же подвал сайта, в дефолтном шаблоне OpenCart имеет одинаковый вид как в более ранних версиях, так и в свежей линейке 2.х: четыре столбца с рассотрированной по тематикам информацией. И часто чуть ли не половину ссылок приходится скрывать, так как они не востребованы в магазине.
А вот во многих платных шаблонах футер выглядит поинтересней и поинформативней. Например, в большинстве случаев, в футер вынесены контакты, что весьма неплохо, так как лишний раз засветить контакты не помешает — посетители магазина точно не смогут сказать, что не нашли способа связаться с менеджером или владельцем магазина.
Как же добавить еще и контакты в футер, если он уже и так заполнен информацией? Можно, конечно, вручную внести в footer.tpl нужную информацию, в стилях подвигать колонки. Но на деле не каждый знает как это реализовать. Вот тут-то и приходят на выручку разные модули, а если конкретно, то модуль «Contact & Spinning Social in Footer OC2″ делает два дела сразу: выводит контакты в футер пятой колонкой, подхватывая ту информацию, которая добавлена нами через админку + добавляет социальные иконки-кнопки, которые имеют забавный эффект при наведении.
Установка и настройка модуля
1. Скачиваем модуль «Contact & Spinning Social in Footer OC2″. Модуль совместим с версиями 2.0.0.0, 2.0.1.0, 2.0.1.1, 2.0.2.0, 2.0.3.1, 2.1.0.1, 2.1.0.2
2. Из скачанного архива по ftp загружаем в корень сайта папку catalog.
3. Открываем файл catalog/controller/common/header.php и находим строку
|
1 |
$data['title'] = $this->document->getTitle(); |
перед ней размещаем еще одну строку
|
1 |
$this->document->addStyle('catalog/view/theme/' . $this->config->get('config_template') . '/stylesheet/contact_social.css'); |
4. Открываем файл catalog/controller/common/footer.php и ищем строку
|
1 |
$data['text_newsletter'] = $this->language->get('text_newsletter'); |
и перед ней размещаем код
|
1 2 3 4 |
$data['name'] = $this->config->get('config_name'); $data['address'] = $this->config->get('config_address'); $data['telephone'] = $this->config->get('config_telephone'); $data['fax'] = $this->config->get('config_fax'); |
Этим кодом мы выведем в футер название магазина, адрес, телефон и факс. Если не хотите, чтобы какой-то их этих пунктов был виден в футере, то просто удалите нужную строку.
5. Открываем файл catalog/view/theme/default/template/common/header.tpl, находим строку
|
1 |
<li><a href="<?php echo $contact; ?>"><i class="fa fa-phone"></i></a> <span class="hidden-xs hidden-sm hidden-md"><?php echo $telephone; ?></span></li> |
и закомментируем ее.
6. В файле catalog/view/theme/default/template/common/footer.tpl после строк
|
1 2 3 |
<li><a href="<?php echo $newsletter; ?>"><?php echo $text_newsletter; ?></a></li> </ul> </div> |
добавляем следующий код
|
1 2 3 4 5 6 7 8 9 |
<div class="col-sm-3"> <h5><?php echo $name; ?></h5> <ul class="list-unstyled"> <li style="white-space:pre-wrap;"><?php echo $address; ?></li> <br /> <li class="fa fa-phone" style="display:list-item; line-height:inherit;"> <?php echo $telephone; ?></li> <li class="fa fa-tty" style="display:list-item; line-height:inherit;"> <?php echo $fax; ?></li> </ul> </div> |
В этом же файле, перед разделителем — <hr>, который отделяет весь контент футера от копирайтов, размещаем код вывода социальных кнопок:
|
1 2 3 4 5 6 |
<ul id="social"> <li><div><a href="#" onclick="window.open(this.href, '_blank');return false;"><span class="fa fa-facebook"></a></span></div></li> <li><div><a href="#" onclick="window.open(this.href, '_blank');return false;"><span class="fa fa-twitter"></a></span></div></li> <li><div><a href="#" onclick="window.open(this.href, '_blank');return false;"><span class="fa fa-google-plus"></a></span></div></li> <li><div><a href="#" onclick="window.open(this.href, '_blank');return false;"><span class="fa fa-flickr"></a></span></div></li> </ul> |
При этом не забыв сменить решетки в a href=»#» на нужные ссылки. И если какая-то из социальных сетей вам не нужна, то просто удалите строку с ее выводом.
И последним действием в этом файле будет расположение копирайтов по центру. Это, естественно, необязательное действие, но с добавлением нового столбца и социальных иконок, копирайты по центру смотрятся очень даже неплохо. Для этого код
|
1 |
<p><?php echo $powered; ?></p> |
меняем на
|
1 |
<p style="text-align:center;"><?php echo $powered; ?></p> |
7. Последнее дейстиве в настройке модуля — заходим в админку — Модули — Модификаторы и обновляем кэш, а иначе можем просто не увидеть результа своих трудов.
Все, модуль установлен и настроен, отправляемся в магазин любоваться обновленным футером)
Отличный красивый модуль. Спасибо.
Во время установки познакомился с font awesome (стояла версия 4.1 и категорически не хотела вставляться иконка одноклассников). Наверное не лишним было бы написать как ставить иконки других соцсетей.
Спасибо за модуль еще раз.