Opencart 2 - Добавляем Иконки В Личный Кабинет

Тема в разделе "Шаблоны, дизайн и оформление магазина", создана пользователем admin, 12 сен 2016.

  1. TopicStarter Overlay
    Offline

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

    Сообщения:
    1.578
    Симпатии:
    22.273
    Репутация:
    124
    Всем привет, в этой статье мы с вами немного украсим личный кабинет (модуль) – добавим всем пунктам подходящие иконки, а то просто ссылки выглядят скучновато.

    OpenCart-20_thumb.jpg

    Список задач на сегодня:
    • Вставим иконки (с помощью иконочного шрифта Font-Awesome который уже подключен к стандартному шаблону OcStore / OpenCart) в модуль личный кабинет
    Приступим:

    Откроем файл ../catalog/view/theme/default/template/module/account.tpl и вместо этих строк (1-13):

    Код:
    <div class="list-group">
    <?php if (!$logged) { ?>
    <a href="<?php echo $login; ?>" class="list-group-item"><?php echo $text_login; ?></a> <a href="<?php echo $register; ?>" class="list-group-item"><?php echo $text_register; ?></a> <a href="<?php echo $forgotten; ?>" class="list-group-item"><?php echo $text_forgotten; ?></a>
    <?php } ?>
    <a href="<?php echo $account; ?>" class="list-group-item"><?php echo $text_account; ?></a>
    <?php if ($logged) { ?>
    <a href="<?php echo $edit; ?>" class="list-group-item"><?php echo $text_edit; ?></a> <a href="<?php echo $password; ?>" class="list-group-item"><?php echo $text_password; ?></a>
    <?php } ?>
    <a href="<?php echo $address; ?>" class="list-group-item"><?php echo $text_address; ?></a> <a href="<?php echo $order; ?>" class="list-group-item"><?php echo $text_order; ?></a> <a href="<?php echo $download; ?>" class="list-group-item"><?php echo $text_download; ?></a><a href="<?php echo $recurring; ?>" class="list-group-item"><?php echo $text_recurring; ?></a> <a href="<?php echo $reward; ?>" class="list-group-item"><?php echo $text_reward; ?></a> <a href="<?php echo $return; ?>" class="list-group-item"><?php echo $text_return; ?></a> <a href="<?php echo $transaction; ?>" class="list-group-item"><?php echo $text_transaction; ?></a> <a href="<?php echo $newsletter; ?>" class="list-group-item"><?php echo $text_newsletter; ?></a>
    <?php if ($logged) { ?>
    <a href="<?php echo $logout; ?>" class="list-group-item"><?php echo $text_logout; ?></a>
    <?php } ?>
    </div>
    вставим эти:

    Код:
    <div class="list-group">
    <h3><?php echo $heading_title; ?></h3>
    <?php if (!$logged) { ?>
    <a href="<?php echo $login; ?>" class="list-group-item"><?php echo $text_login; ?></a>
    <a href="<?php echo $register; ?>" class="list-group-item"><?php echo $text_register; ?></a>
    <a href="<?php echo $forgotten; ?>" class="list-group-item"><?php echo $text_forgotten; ?></a>
    <?php } ?>
    <a href="<?php echo $account; ?>" class="list-group-item"><?php echo $text_account; ?></a>
    <?php if ($logged) { ?>
    <a href="<?php echo $edit; ?>" class="list-group-item"><?php echo $text_edit; ?></a>
    <a href="<?php echo $password; ?>" class="list-group-item"><?php echo $text_password; ?></a>
    <?php } ?>
    <a href="<?php echo $address; ?>" class="list-group-item"><?php echo $text_address; ?></a>
    <a href="<?php echo $order; ?>" class="list-group-item"><?php echo $text_order; ?></a>
    <a href="<?php echo $download; ?>" class="list-group-item"><?php echo $text_download; ?></a>
    <a href="<?php echo $recurring; ?>" class="list-group-item"><?php echo $text_recurring; ?></a>
    <a href="<?php echo $reward; ?>" class="list-group-item"><?php echo $text_reward; ?></a>
    <a href="<?php echo $return; ?>" class="list-group-item"><?php echo $text_return; ?></a>
    <a href="<?php echo $transaction; ?>" class="list-group-item"><?php echo $text_transaction; ?></a>
    <a href="<?php echo $newsletter; ?>" class="list-group-item"><?php echo $text_newsletter; ?></a>
    <?php if ($logged) { ?>
    <a href="<?php echo $logout; ?>" class="list-group-item"><?php echo $text_logout; ?></a>
    <?php } ?>
    </div>
    (мы добавили заголовок модулю и разбили ссылки построчно – так вам работать будет удобнее)

    Теперь добавим всем ссылкам и заголовку иконки, меняем код на этот:

    Код:
    <div class="list-group">
    <h3><i class="fa fa-user"></i> <?php echo $heading_title; ?></h3>
    <?php if (!$logged) { ?>
    <a href="<?php echo $login; ?>" class="list-group-item"><i class="fa fa-sign-in"></i> <?php echo $text_login; ?></a>
    <a href="<?php echo $register; ?>" class="list-group-item"><i class="fa fa-user-plus"></i> <?php echo $text_register; ?></a>
    <a href="<?php echo $forgotten; ?>" class="list-group-item"><i class="fa fa-lock"></i> <?php echo $text_forgotten; ?></a>
    <?php } ?>
    <a href="<?php echo $account; ?>" class="list-group-item"><i class="fa fa-user"></i> <?php echo $text_account; ?></a>
    <?php if ($logged) { ?>
    <a href="<?php echo $edit; ?>" class="list-group-item"><i class="fa fa-pencil-square-o"></i> <?php echo $text_edit; ?></a>
    <a href="<?php echo $password; ?>" class="list-group-item"><i class="fa fa-unlock"></i> <?php echo $text_password; ?></a>
    <?php } ?>
    <a href="<?php echo $address; ?>" class="list-group-item"><i class="fa fa-truck"></i> <?php echo $text_address; ?></a>
    <a href="<?php echo $order; ?>" class="list-group-item"><i class="fa fa-history"></i> <?php echo $text_order; ?></a>
    <a href="<?php echo $download; ?>" class="list-group-item"><i class="fa fa-download"></i> <?php echo $text_download; ?></a>
    <a href="<?php echo $recurring; ?>" class="list-group-item"><i class="fa fa-calendar"></i> <?php echo $text_recurring; ?></a>
    <a href="<?php echo $reward; ?>" class="list-group-item"><i class="fa fa-cart-plus"></i> <?php echo $text_reward; ?></a>
    <a href="<?php echo $return; ?>" class="list-group-item"><i class="fa fa-exchange"></i> <?php echo $text_return; ?></a>
    <a href="<?php echo $transaction; ?>" class="list-group-item"><i class="fa fa-history"></i> <?php echo $text_transaction; ?></a>
    <a href="<?php echo $newsletter; ?>" class="list-group-item"><i class="fa fa-newspaper-o"></i> <?php echo $text_newsletter; ?></a>
    <?php if ($logged) { ?>
    <a href="<?php echo $logout; ?>" class="list-group-item"><i class="fa fa-sign-out"></i> <?php echo $text_logout; ?></a>
    <?php } ?>
    </div>
    (я подобрал иконки на свой вкус, вы можете выбрать другие)

    Вставляются иконки просто, смотрите шрифт на оф. сайте — http://fortawesome.github.io/Font-Awesome/icons/ и копируйте код иконки, к примеру:

    <i class=»fa fa-sign-out»></i>

    account_tpl_thumb.png

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

    Результат наших трудов:

    account_tpl_01_thumb.png

    надеюсь статья была вам полезна и интересна.

    До новых встреч, следите за нашими новостями.