OpenCart 2.x — добавляем контакты и социальные иконки в футер 2016-07-21

делает два дела сразу: выводит контакты в футер пятой колонкой, добавляет социальные иконки-кнопки.

  1. admin
    Футер, или он же подвал сайта, в дефолтном шаблоне OpenCart имеет одинаковый вид как в более ранних версиях, так и в свежей линейке 2.х: четыре столбца с рассотрированной по тематикам информацией. И часто чуть ли не половину ссылок приходится скрывать, так как они не востребованы в магазине.

    opencart-default-footer.jpg

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

    Как же добавить еще и контакты в футер, если он уже и так заполнен информацией? Можно, конечно, вручную внести в footer.tpl нужную информацию, в стилях подвигать колонки. Но на деле не каждый знает как это реализовать. Вот тут-то и приходят на выручку разные модули, а если конкретно, то модуль «Contact & Spinning Social in Footer OC2″ делает два дела сразу: выводит контакты в футер пятой колонкой, подхватывая ту информацию, которая добавлена нами через админку + добавляет социальные иконки-кнопки, которые имеют забавный эффект при наведении.

    opencart-new-footer.jpg


    Установка и настройка модуля

    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 и находим строку

    Код:
    $data['title']=$this->document->getTitle();
    перед ней размещаем еще одну строку

    Код:
    $this->document->addStyle('catalog/view/theme/'.$this->config->get('config_template').'/stylesheet/contact_social.css');
    4. Открываем файл catalog/controller/common/footer.php и ищем строку

    Код:
    $data['text_newsletter']=$this->language->get('text_newsletter');
    и перед ней размещаем код

    Код:
    $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, находим строку

    Код:
    <li><ahref="<?phpecho$contact;?>"><iclass="fa fa-phone"></i></a><span class="hidden-xs hidden-sm hidden-md"><?phpecho$telephone;?></span></li>
    и закомментируем ее.

    6. В файле catalog/view/theme/default/template/common/footer.tpl после строк

    Код:
    <li><ahref="<?phpecho$newsletter;?>"><?phpecho$text_newsletter;?></a></li>
    </ul>
    </div>
    добавляем следующий код

    Код:
    <div class="col-sm-3">
    <h5><?phpecho$name;?></h5>
    <ul class="list-unstyled">
    <li style="white-space:pre-wrap;"><?phpecho$address;?></li>
    <br/>
    <li class="fa fa-phone"style="display:list-item; line-height:inherit;"><?phpecho$telephone;?></li>
    <li class="fa fa-tty"style="display:list-item; line-height:inherit;"><?phpecho$fax;?></li>
    </ul>
    </div>
    В этом же файле, перед разделителем — <hr>, который отделяет весь контент футера от копирайтов, размещаем код вывода социальных кнопок:

    Код:
    <ul id="social">
    <li><div><ahref="#"onclick="window.open(this.href, '_blank');return false;"><span class="fa fa-facebook"></a></span></div></li>
    <li><div><ahref="#"onclick="window.open(this.href, '_blank');return false;"><span class="fa fa-twitter"></a></span></div></li>
    <li><div><ahref="#"onclick="window.open(this.href, '_blank');return false;"><span class="fa fa-google-plus"></a></span></div></li>
    <li><div><ahref="#"onclick="window.open(this.href, '_blank');return false;"><span class="fa fa-flickr"></a></span></div></li>
    </ul>
    При этом не забыв сменить решетки в a href=»#» на нужные ссылки. И если какая-то из социальных сетей вам не нужна, то просто удалите строку с ее выводом.

    И последним действием в этом файле будет расположение копирайтов по центру. Это, естественно, необязательное действие, но с добавлением нового столбца и социальных иконок, копирайты по центру смотрятся очень даже неплохо. Для этого код

    Код:
    <p><?phpecho$powered;?></p>
    меняем на

    Код:
    <pstyle="text-align:center;"><?phpecho$powered;?></p>
    7. Последнее дейстиве в настройке модуля — заходим в админку — Модули — Модификаторы и обновляем кэш, а иначе можем просто не увидеть результа своих трудов.

    Все, модуль установлен и настроен, отправляемся в магазин любоваться обновленным футером)
    obevan, rum-doc, denis.1982 и 13 другим нравится это.