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

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

10 Comments

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

    12.03.2016 at 21:54

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

  2. Сергей

    20.08.2016 at 15:52

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

  3. Спасибо за статью, работает на 2.3

  4. Андрей

    01.02.2017 at 19:15

    Случайно попал в статью, понял что мне это тоже нужно
    Opencart 2.2 работает

  5. У кого текст (название иконок) вылазит за границы конверта, вот видоизмененный стиль:

    /* account page */
    #my_account > li {
    vertical-align: top;
    display: inline-block;
    border: 1px solid #ddd;
    padding: 0 0 0 10px;
    margin: 5px;
    border-radius: 3px;
    width: 120px;
    height: 115px;
    text-align: center;
    white-space: normal;
    overflow: hidden; /* Обрезаем все, что не помещается в область */
    text-overflow: ellipsis; /* Добавляем многоточие */
    }
    #my_account > li:hover {
    border: 1px solid #337AB7;
    }
    #my_account .fa {
    font-size: 50px;
    display: block;
    text-align: center;
    }

  6. Сергей

    14.11.2017 at 12:42

    Дайте пример рабочего сайта пожалуйста — стили сверить.
    Что-то идет не так и иконки не встают (сверху) над надписью.

  7. Сергей

    14.11.2017 at 13:03

    Написал Вам на почту.

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

Your email address will not be published.

*

CAPTCHA image
*

 для диалога необходимо принять правила конфиденциальности и пользовательского соглашения *

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

Вверх ↑



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