Moushe.ru

Блог обо всём

OcStore 2.1 (OpenCart 2.1) добавляем иконки в модуль личный кабинет



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

OpenCart-20

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

  • Вставим иконки (с помощью иконочного шрифта 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

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

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

account_tpl_01

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

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

10 Комментариев

  1. Дмитрий

    11.02.2016 at 18:29

    Спасибо, маленькое и приятное дополнение.

  2. Марина

    24.02.2016 at 10:24

    Здравствуйте! Подскажите пожалуйста, сделала все как написано, но совсем ничего не изменилось, в чем может быть причина?

  3. Марина

    25.02.2016 at 14:07

    Добрый день! Шаблон тот, а как кэш системы очистить, подскажите пожалуйста? В папке system/»cache» — этого файла нет.

  4. Марина

    25.02.2016 at 15:18

    Проблема решилась!
    Спасибо огромное за ваши уроки!

  5. Суперновичок

    20.04.2016 at 13:31

    За-ме-ча-тель-но!!!
    Знаю, что не по теме…Пожалуйста!!! Можно также доступно объяснить как изменить фоны в ОПЕНКАРТЕ 2.1, точнее заменить их на картинки «stylesheet.css», а то ли я уже заработался, то ли чего-то недоговаривают. (размеры картинки, только png?, объем файла картинки, путь как правильно указать…). 3й день пошел…. казалось простой вопрос но сделать не могу…

    • Любой формат — обычно png или jpg, размер соответственно тоже любой, прописывается для body, любой учебник css подскажет как прописать картинку фоном.

  6. Благодарю вас Владислав за вашу без корыстную помощь,и полезные уроки,Владислав подскажите в теории как сделать иконки в категориях ? пример: http://elenapokalitsina.com.ua/family-look ,и ещё вопрос ? Можно ли переписать модуля Ministore: http://www.pavothemes.com/opencart-themes/174-pav-ministore.html-на ocStore-2.3.0.2 С уважением к вам Евгений

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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