Moushe.ru

Блог обо всём

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



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

OpenCart-20

До:

ocstore_account_01

После:

ocstore_account_03ocstore_account_04

Приступим:

1. Как обычно сначала подберём иконки, в моём случае это:

<i class="fa fa-pencil-square"></i>
<i class="fa fa-unlock"></i>
<i class="fa fa-home"></i>
<i class="fa fa-star"></i>
<i class="fa fa-shopping-cart"></i>
<i class="fa fa-download"></i>
<i class="fa fa-ticket"></i>
<i class="fa fa-refresh"></i>
<i class="fa fa-history"></i>
<i class="fa fa-credit-card"></i>
<i class="fa fa-envelope"></i>

2. Откроем файл ../catalog/view/theme/default/template/account/account.tpl и вместо этой строки (21):

<ul class="list-unstyled">

вставим эту:

<ul class="list-unstyled" id="my_account">

вместо этих строк (22-25):

<li><a href="<?php echo $edit; ?>"><?php echo $text_edit; ?></a></li>
<li><a href="<?php echo $password; ?>"><?php echo $text_password; ?></a></li>
<li><a href="<?php echo $address; ?>"><?php echo $text_address; ?></a></li>
<li><a href="<?php echo $wishlist; ?>"><?php echo $text_wishlist; ?></a></li>

вставим эти:

<li><a href="<?php echo $edit; ?>"><i class="fa fa-pencil-square"></i> <?php echo $text_edit; ?></a></li>
<li><a href="<?php echo $password; ?>"><i class="fa fa-unlock"></i> <?php echo $text_password; ?></a></li>
<li><a href="<?php echo $address; ?>"><i class="fa fa-home"></i> <?php echo $text_address; ?></a></li>
<li><a href="<?php echo $wishlist; ?>"><i class="fa fa-star"></i> <?php echo $text_wishlist; ?></a></li>

вместо этой строки (28):

<ul class="list-unstyled">

вставим эту:

<ul class="list-unstyled" id="my_account">

вместо этих строк (29-36):

<li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li>
<li><a href="<?php echo $download; ?>"><?php echo $text_download; ?></a></li>
<?php if ($reward) { ?>
<li><a href="<?php echo $reward; ?>"><?php echo $text_reward; ?></a></li>
<?php } ?>
<li><a href="<?php echo $return; ?>"><?php echo $text_return; ?></a></li>
<li><a href="<?php echo $transaction; ?>"><?php echo $text_transaction; ?></a></li>
<li><a href="<?php echo $recurring; ?>"><?php echo $text_recurring; ?></a></li>

вставим эти:

<li><a href="<?php echo $order; ?>"><i class="fa fa-shopping-cart"></i> <?php echo $text_order; ?></a></li>
<li><a href="<?php echo $download; ?>"><i class="fa fa-download"></i> <?php echo $text_download; ?></a></li>
<?php if ($reward) { ?>
<li><a href="<?php echo $reward; ?>"><i class="fa fa-ticket"></i> <?php echo $text_reward; ?></a></li>
<?php } ?>
<li><a href="<?php echo $return; ?>"><i class="fa fa-refresh"></i> <?php echo $text_return; ?></a></li>
<li><a href="<?php echo $transaction; ?>"><i class="fa fa-history"></i> <?php echo $text_transaction; ?></a></li>
<li><a href="<?php echo $recurring; ?>"><i class="fa fa-credit-card"></i> <?php echo $text_recurring; ?></a></li>

мне не нравится что подписка на новости размещена отдельной строкой, давайте добавим её к пунктам личного кабинета, удалим эти строки (38-41):

<h2><?php echo $text_my_newsletter; ?></h2>
<ul class="list-unstyled">
<li><a href="<?php echo $newsletter; ?>"><?php echo $text_newsletter; ?></a></li>
</ul>

а после этой строки (25):

<li><a href="<?php echo $wishlist; ?>"><i class="fa fa-star"></i> <?php echo $text_wishlist; ?></a></li>

вставим эту:

<li><a href="<?php echo $newsletter; ?>"><i class="fa fa-envelope"></i> <?php echo $text_newsletter; ?></a></li>

3. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и вставим в конец файла эти строки:

/* account page */
#my_account > li {
vertical-align: top;
display: inline-block;
border: 1px solid #ddd;
padding: 10px;
margin: 5px;
border-radius: 3px;
width: 120px;
min-height: 115px;
text-align: center;
}
#my_account > li:hover {
border: 1px solid #337AB7;
}
#my_account .fa {
font-size: 50px;
display: block;
text-align: center;
}

(я сделал довольно крупные иконки (font-size: 40px;), при желании вы можете изменить их размер, да и вообще подкорректировать все стили под себя, в этом нет ничего сложного)

Результат:

ocstore_account_02

При желании добавим иконки заголовкам, вместо этих строк:

20 —       <h2><?php echo $text_my_account; ?></h2>

28 —       <h2><?php echo $text_my_orders; ?></h2>

вставим эти:

20 —      <h2><i class="fa fa-user"></i> <?php echo $text_my_account; ?></h2>

28 —      <h2><i class="fa fa-shopping-cart"></i> <?php echo $text_my_orders; ?></h2>

и дополним стили этими строками:

h2 .fa {
font-size: 26px;
padding-left: 8px;
}

Результат:

ocstore_account_03

Если вам не нравится что синие иконки и надписи бросаются в глаза, подкорректируем наши стили, вместо этих строк:

/* account page */
#my_account > li {
vertical-align: top;
display: inline-block;
border: 1px solid #ddd;
padding: 10px;
margin: 5px;
border-radius: 3px;
width: 120px;
min-height: 115px;
text-align: center;
}
#my_account > li:hover {
border: 1px solid #337AB7;
}
#my_account .fa {
font-size: 50px;
display: block;
text-align: center;
}
h2 .fa {
font-size: 26px;
padding-left: 8px;
}

вставим эти:

/* account page */
#my_account > li {
vertical-align: top;
display: inline-block;
border: 1px solid #ddd;
padding: 10px;
margin: 5px;
border-radius: 3px;
width: 120px;
min-height: 115px;
text-align: center;
}
#my_account > li:hover {
border: 1px solid #337AB7;
}
#my_account > li a {
color: #5d5d5d;
}
#my_account > li:hover > a, #my_account > li:hover .fa {
color: #337AB7;
}
#my_account .fa {
font-size: 50px;
color: #5d5d5d;
display: block;
text-align: center;
}
h2 .fa {
font-size: 26px;
padding-left: 8px;
}

Результат:

ocstore_account_04

Надеюсь вам нравится результат, на сегодня всё, до новых встреч.

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

  1. yandex.ru Петров Владислав

    12.03.2016 at 21:54

    Добрый день! Спасибо большое за статью! Долго искал данное решение для opencart 2.1 , нашел только здесь! Все получилось, но есть одно но- при наведении на икону под ней появляется горизонтальная черта. Выглядит некрасиво. Не подскажите как исправить? (сделал скриншоты, но к сожалению прикрепить сюда не смог)

  2. Сергей

    20.08.2016 at 15:52

    Для версии 2.0.3.1 подойдет такое решение?

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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