Moushe.ru

Блог обо всём

OcStore 2.1 (OpenCart 2.1) улучшаем подвал (футер) нашего магазина (1 часть)



Всем привет, как и обещал в этой статье я напишу вам об улучшении футера интернет магазина сделанного на CMS OcStore 2.1 (OpenCart 2.1), мы выведем в футер много полезной информации, добавим иконки, немного поработаем со стилями. Думаю будет интересно. Улыбка

OpenCart-20

До:

ocstore_footer_01

После:

ocstore_footer_07

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

1. Объединяем старые информационные блоки и создаём новые

2. Добавляем символы иконочного шрифта

Во второй части: (Статья запланирована на субботу)

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

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

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

Приступим:

1. Откроем файл ../catalog/view/theme/default/template/common/footer.tpl

Сначала мы объединим 1 и 2 колонки футера (Информацию и Службу поддержки)

1.1. Вместо этих строк (5-21):

<div class="col-sm-3">
<h5><?php echo $text_information; ?></h5>
<ul class="list-unstyled">
<?php foreach ($informations as $information) { ?>
<li><a href="<?php echo $information['href']; ?>"><?php echo $information['title']; ?></a></li>
<?php } ?>
</ul>
</div>
<?php } ?>
<div class="col-sm-3">
<h5><?php echo $text_service; ?></h5>
<ul class="list-unstyled">
<li><a href="<?php echo $contact; ?>"><?php echo $text_contact; ?></a></li>
<li><a href="<?php echo $return; ?>"><?php echo $text_return; ?></a></li>
<li><a href="<?php echo $sitemap; ?>"><?php echo $text_sitemap; ?></a></li>
</ul>
</div>

вставим эти:

<div class="col-sm-3">
<h5><?php echo $text_information; ?></h5>
<ul class="list-unstyled">
<?php foreach ($informations as $information) { ?>
<li><a href="<?php echo $information['href']; ?>"><?php echo $information['title']; ?></a></li>
<?php } ?>
</ul>
<?php } ?>
<h5><?php echo $text_service; ?></h5>
<ul class="list-unstyled">
<li><a href="<?php echo $contact; ?>"><?php echo $text_contact; ?></a></li>
<li><a href="<?php echo $return; ?>"><?php echo $text_return; ?></a></li>
<li><a href="<?php echo $sitemap; ?>"><?php echo $text_sitemap; ?></a></li>
</ul>
</div>

Результат:

ocstore_footer_02

Теперь добавим колонке Дополнительно новую Способы оплаты

1.2. Вместо этих строк (20-28):

<div class="col-sm-3">
<h5><?php echo $text_extra; ?></h5>
<ul class="list-unstyled">
<li><a href="<?php echo $manufacturer; ?>"><?php echo $text_manufacturer; ?></a></li>
<li><a href="<?php echo $voucher; ?>"><?php echo $text_voucher; ?></a></li>
<li><a href="<?php echo $affiliate; ?>"><?php echo $text_affiliate; ?></a></li>
<li><a href="<?php echo $special; ?>"><?php echo $text_special; ?></a></li>
</ul>
</div>

вставим эти:

<div class="col-sm-3">
<h5><?php echo $text_extra; ?></h5>
<ul class="list-unstyled">
<li><a href="<?php echo $manufacturer; ?>"><?php echo $text_manufacturer; ?></a></li>
<li><a href="<?php echo $voucher; ?>"><?php echo $text_voucher; ?></a></li>
<li><a href="<?php echo $affiliate; ?>"><?php echo $text_affiliate; ?></a></li>
<li><a href="<?php echo $special; ?>"><?php echo $text_special; ?></a></li>
</ul>
<h5>Способы оплаты</h5>
<ul class="list-unstyled">
<li>1,2,3,4,5</li>
</ul>
</div>

(иконки вставим в следующей статье)

Результат:

ocstore_footer_03

Теперь добавим колонке Личный кабинет новую Мы в соц. сетях

1.3. Вместо этих строк (33-41):

<div class="col-sm-3">
<h5><?php echo $text_account; ?></h5>
<ul class="list-unstyled">
<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="col-sm-3">
<h5><?php echo $text_account; ?></h5>
<ul class="list-unstyled">
<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>
<h5>Мы в соц. сетях</h5>
<ul class="list-unstyled">
<li><a href="ваша ссылка">Мы в контакте</a></li>
<li><a href="ваша ссылка">Мы в одноклассниках</a></li>
<li><a href="ваша ссылка">Мы в твиттере</a></li>
<li><a href="ваша ссылка">Наш инстаграм</a></li>
</ul>
</div>

Результат:

ocstore_footer_04

Теперь на освободившееся место добавим колонку Контакты

1.4. После этих строк (41-48):

<h5>Мы в соц. сетях</h5>
<ul class="list-unstyled">
<li><a href="ваша ссылка">Мы в контакте</a></li>
<li><a href="ваша ссылка">Мы в одноклассниках</a></li>
<li><a href="ваша ссылка">Мы в твиттере</a></li>
<li><a href="ваша ссылка">Наш инстаграм</a></li>
</ul>
</div>

добавим эти:

<div class="col-sm-3">
<h5>Контакты</h5>
<ul class="list-unstyled">
<li>г.Москва м.Шоссе Энтузиастов</li>
<li>ТЦ Будёновский Б-4</li>
<li>ежедневно с 10 до 20</li>
<li>+7 (925) 206-20-98</li>
<li>+7 (925) 206-20-98</li>
<li>info@cyber-connect.ru</li>
</ul>
</div>

Результат:

ocstore_footer_05

2. Основа сделана, приступаем к украшательству, открываем сайт иконочного шрифта Font-Awesome и подберём символы для обычных ссылок, в моём случае это:

<i class="fa fa-angle-right"></i>

сначала вставим этот символ для ссылок Информации, вместо этой строки (9):

<li><a href="<?php echo $information['href']; ?>"><?php echo $information['title']; ?></a></li>

вставим эту:

<li><a href="<?php echo $information['href']; ?>"><i class="fa fa-angle-right"></i> <?php echo $information['title']; ?></a></li>

вставим символ для ссылок Службы поддержки, вместо этих строк (15-17):

<li><a href="<?php echo $contact; ?>"><?php echo $text_contact; ?></a></li>
<li><a href="<?php echo $return; ?>"><?php echo $text_return; ?></a></li>
<li><a href="<?php echo $sitemap; ?>"><?php echo $text_sitemap; ?></a></li>

вставим эти:

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

вставим символ для ссылок Дополнительно, вместо этих строк (23-26):

<li><a href="<?php echo $manufacturer; ?>"><?php echo $text_manufacturer; ?></a></li>
<li><a href="<?php echo $voucher; ?>"><?php echo $text_voucher; ?></a></li>
<li><a href="<?php echo $affiliate; ?>"><?php echo $text_affiliate; ?></a></li>
<li><a href="<?php echo $special; ?>"><?php echo $text_special; ?></a></li>

вставим эти:

<li><a href="<?php echo $manufacturer; ?>"><i class="fa fa-angle-right"></i> <?php echo $text_manufacturer; ?></a></li>
<li><a href="<?php echo $voucher; ?>"><i class="fa fa-angle-right"></i> <?php echo $text_voucher; ?></a></li>
<li><a href="<?php echo $affiliate; ?>"><i class="fa fa-angle-right"></i> <?php echo $text_affiliate; ?></a></li>
<li><a href="<?php echo $special; ?>"><i class="fa fa-angle-right"></i> <?php echo $text_special; ?></a></li>

вставим символ для ссылок Личного кабинета, вместо этих строк (36-39):

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

вставим эти:

<li><a href="<?php echo $account; ?>"><i class="fa fa-angle-right"></i> <?php echo $text_account; ?></a></li>
<li><a href="<?php echo $order; ?>"><i class="fa fa-angle-right"></i> <?php echo $text_order; ?></a></li>
<li><a href="<?php echo $wishlist; ?>"><i class="fa fa-angle-right"></i> <?php echo $text_wishlist; ?></a></li>
<li><a href="<?php echo $newsletter; ?>"><i class="fa fa-angle-right"></i> <?php echo $text_newsletter; ?></a></li>

2.1. Подберём символы социальных сетей:

<i class="fa fa-vk"></i>
<i class="fa fa-odnoklassniki-square"></i>
<i class="fa fa-twitter-square"></i>
<i class="fa fa-instagram"></i>

и вместо этих строк (43-46):

<li><a href="ваша ссылка">Мы в контакте</a></li>
<li><a href="ваша ссылка">Мы в одноклассниках</a></li>
<li><a href="ваша ссылка">Мы в твиттере</a></li>
<li><a href="ваша ссылка">Наш инстаграм</a></li>

вставим эти:

<li><a href="ваша ссылка"><i class="fa fa-vk"></i> Мы в контакте</a></li>
<li><a href="ваша ссылка"><i class="fa fa-odnoklassniki-square"></i> Мы в одноклассниках</a></li>
<li><a href="ваша ссылка"><i class="fa fa-twitter-square"></i> Мы в твиттере</a></li>
<li><a href="ваша ссылка"><i class="fa fa-instagram"></i> Наш инстаграм</a></li>

2.2. Подберём иконки для контактов:

<i class="fa fa-map"></i>
<i class="fa fa-map-marker"></i>
<i class="fa fa-clock-o"></i>
<i class="fa fa-phone-square"></i>
<i class="fa fa-envelope"></i>

и вместо этих строк (52-57):

<li>г.Москва м.Шоссе Энтузиастов</li>
<li>ТЦ Будёновский Б-4</li>
<li>ежедневно с 10 до 20</li>
<li>+7 (925) 206-20-98</li>
<li>+7 (925) 206-20-98</li>
<li>info@cyber-connect.ru</li>

вставим эти:

<li><i class="fa fa-map"></i> г.Москва м.Шоссе Энтузиастов</li>
<li><i class="fa fa-map-marker"></i> ТЦ Будёновский павильон Б-4</li>
<li><i class="fa fa-clock-o"></i> ежедневно с 10 до 20</li>
<li><i class="fa fa-phone-square"></i> +7 (925) 206-20-98</li>
<li><i class="fa fa-phone-square"></i> +7 (925) 206-20-98</li>
<li><i class="fa fa-envelope"></i> info@cyber-connect.ru</li>

(помимо иконок я изменил текст — вместо Б-4 написал павильон Б-4)

Результат:

ocstore_footer_06

2.3. Подберём иконки для заголовков:

<i class="fa fa-info-circle"></i>
<i class="fa fa-exclamation-circle"></i>
<i class="fa fa-support"></i>
<i class="fa fa-credit-card"></i>
<i class="fa fa-user"></i>
<i class="fa fa-users"></i>
<i class="fa fa-book"></i>

и вставим их, вместо этих строк:

6<h5><?php echo $text_information; ?></h5>

13<h5><?php echo $text_service; ?></h5>

21<h5><?php echo $text_extra; ?></h5>

28<h5>Способы оплаты</h5>

34<h5><?php echo $text_account; ?></h5>

41<h5>Мы в соц. сетях</h5>

50<h5>Контакты</h5>

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

6<h5><i class="fa fa-info-circle"></i> <?php echo $text_information; ?></h5>

13<h5><i class="fa fa-exclamation-circle"></i> <?php echo $text_service; ?></h5>

21<h5><i class="fa fa-support"></i> <?php echo $text_extra; ?></h5>

28<h5><i class="fa fa-credit-card"></i> Способы оплаты</h5>

34<h5><i class="fa fa-user"></i> <?php echo $text_account; ?></h5>

41<h5><i class="fa fa-users"></i> Мы в соц. сетях</h5>

50<h5><i class="fa fa-book"></i> Контакты</h5>

Результат:

ocstore_footer_07

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

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

  1. Мега респект! Для чайника — то, что доктор прописал!

  2. как бы еще карту гугл или яндекс вставить в футер с локацией?
    Спасибо 🙂

  3. Спасибо )) разобрался, там ваще усе просто ))

  4. Алена

    04.03.2016 at 20:01

    В файле footer пишу по английски, на сайте английские буквы, пишу русскими, на сайте ромбики. Что это может быть?

    • Кодировку измените на правильную.

      Откройте редактируемый файл блокнотом или notepad++ и измените кодировку файла на UTF-8.
      В блокноте: Файл – Сохранить как – Кодировка: UTF-8 – Сохранить.
      В notepad++: Кодировки – Кодировать в UTF-8 (без Bom)

  5. Марина

    11.03.2016 at 00:40

    Супер!!! Огромнейшее спасибо за статью!

  6. Александр

    15.03.2016 at 18:12

    Владислав,спасибо за то что Вы делаете.

  7. Здравствуйте!!!
    Как бы футер сделать похожим на этот:
    http://oc2.opencartlabs.ru/index.php?route=news_reviews/article&cat=5_4&post=16
    Может сделаете отдельную статью)))

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

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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