Opencart 2.1 - Улучшаем Подвал (футер) (1 Часть)

Тема в разделе "Модули и дополнения", создана пользователем admin, 12 сен 2016.

  1. TopicStarter Overlay
    Online

    admin Команда форума Администратор

    Сообщения:
    2.321
    Симпатии:
    76.192
    Репутация:
    170
    Всем привет, как и обещал в этой статье я напишу вам об улучшении футера интернет магазина сделанного на CMS OcStore 2.1 (OpenCart 2.1), мы выведем в футер много полезной информации, добавим иконки, немного поработаем со стилями. Думаю будет интересно. [​IMG]

    OpenCart-20_thumb-2.jpg


    До:

    ocstore_footer_01_thumb.png

    После:

    ocstore_footer_07_thumb.png

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

    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_thumb.png

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

    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_thumb.png

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

    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_thumb.png

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

    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_thumb.png

    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) 200-00-77</li>
    <li><i class="fa fa-phone-square"></i> +7 (925) 200-00-77</li>
    <li><i class="fa fa-envelope"></i> info@site.ru</li>
    (помимо иконок я изменил текст — вместо Б-4 написал павильон Б-4)

    Результат:

    ocstore_footer_06_thumb.png

    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_thumb-1.png

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