OpenCart — как изменить внешний вид личного кабинета — модуль Smart dashboard
Неважно, старая версия движка или свежая, а личный кабинет покупателя на OpenCart имеет скучноватый вид — скромные ссылки в один столбец.
Оно-то для продаж или продвижения магазина не играет никакой роли, но с эстетической точки зрения всегда хочется улучшить внешний вид магазина, чтобы дизайн радовал посетителей и клиентов магазина. К сожалению, нередкое явление — дизайн фронтальной части магазина продуман, а вот технические страницы, наподобие того же кабинета, оставлены такими же, какими были по умолчанию.
Модуль «Smart dashboard» поможет изменить скучный вид личного кабинета. С его помощью личный кабинет избавится от столбца с ссылками, вместо них появятся ряды с позитивными иконками и подписями к ним.
Если такое оформление вам по душе, то приступим к установке и настройке модуля.
Установка и настройка модуля
1. Скачиваем модуль «Smart dashboard». Модуль совместим с версиями 1.5.6, 1.5.6.1, 1.5.6.2, 1.5.6.3, 1.5.6.4, 2.0.0.0, 2.0.1.0, 2.0.1.1, 2.0.2.0, 2.0.3.1, 2.1.0.1, 2.1.0.2. Модуль использует vqmod, поэтому владельцам opencart линейки 2.х, которые не используют vqmod, необходимо будет внести код из xml файла вручную (ничего сложного в этом нет).
2. Распаковываем архив и загружаем его содержимое в корень магазина. Если используется версия 1.5.6.x, то загружаем обе папки (catalog и vqmod), если магазин на движке версии 2.х, то заливаем только папку catalog. На этом установка модуля для 1.5.6.x окончена, можно идти в магазин и проверять визуальные изменения. Для владельцев 2.х необходимо внести изменения в пару файлов магазина.
Открываем файл catalog/view/theme/*/template/account/account.tpl и прежде всего перед хлебными крошками — <ul class=»breadcrumb»> добавляем несколько строк со стилями
|
1 2 3 4 5 |
<style> .hvr:hover > h5{ color: #84C225; } </style> |
Затем находим строку
|
1 |
<li><a href="<?php echo $edit; ?>"><?php echo $text_edit; ?></a></li> |
и меняем ее всю на
|
1 2 |
<div class="col-md-3 text-center" ><a class="hvr" href="<?php echo $edit; ?>"><img src="catalog/view/theme/default/image/account-images/edit.png" alt="Account Details" > <h5><?php echo $text_edit; ?></h5></a></div> |
То есть, мы всю строку списка заменили на блок с изображением и текстом. По аналогии находим и остальные строки (всего в файле необходимо изменить 11 строк кода):
— строку с паролем
|
1 |
<li><a href="<?php echo $password; ?>"><?php echo $text_password; ?></a></li> |
меняем на
|
1 2 |
<div class="col-md-3 text-center" ><a class="hvr" href="<?php echo $password; ?>"><img src="catalog/view/theme/default/image/account-images/password.png" alt="Account Password" > <h5><?php echo $text_password; ?></h5></a></div> |
и т. д.
Все содержимое файла catalog/view/theme/*/template/account/account.tpl, после того, как внесены все изменения, имеет следующий вид:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<?php echo $header; ?> <div class="container"> <style> .hvr:hover > h5{ color: #84C225; } </style> <ul class="breadcrumb"> <?php foreach ($breadcrumbs as $breadcrumb) { ?> <li><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a></li> <?php } ?> </ul> <?php if ($success) { ?> <div class="alert alert-success"><i class="fa fa-check-circle"></i> <?php echo $success; ?></div> <?php } ?> <div class="row"><?php echo $column_left; ?> <?php if ($column_left && $column_right) { ?> <?php $class = 'col-sm-6'; ?> <?php } elseif ($column_left || $column_right) { ?> <?php $class = 'col-sm-9'; ?> <?php } else { ?> <?php $class = 'col-sm-12'; ?> <?php } ?> <div id="content" class="<?php echo $class; ?>"><?php echo $content_top; ?> <h2><?php echo $text_my_account; ?></h2> <ul class="list-unstyled"> <div class="col-md-3 text-center" ><a class="hvr" href="<?php echo $edit; ?>"><img src="catalog/view/theme/default/image/account-images/edit.png" alt="Account Details" > <h5><?php echo $text_edit; ?></h5></a></div> <div class="col-md-3 text-center" ><a class="hvr" href="<?php echo $password; ?>"><img src="catalog/view/theme/default/image/account-images/password.png" alt="Account Password" > <h5><?php echo $text_password; ?></h5></a></div> <div class="col-md-3 text-center"><a class="hvr" href="<?php echo $address; ?>"><img src="catalog/view/theme/default/image/account-images/address.png" alt="Address Book" > <h5><?php echo $text_address; ?></h5></a></div> <div class="col-md-3 text-center"> <a class="hvr" href="<?php echo $wishlist; ?>"> <img src="catalog/view/theme/default/image/account-images/wishlist.png" alt="Wish List" > <h5><?php echo $text_wishlist; ?></h5> </a> </div><div class="clearfix"></div> </ul> <h2><?php echo $text_my_orders; ?></h2> <ul class="list-unstyled"> <div class="col-md-3 text-center" ><a class="hvr" href="<?php echo $order; ?>"><img src="catalog/view/theme/default/image/account-images/orders.png" alt="Order History" > <h5><?php echo $text_order; ?></h5></a></div> <div class="col-md-3 text-center" ><a class="hvr" href="<?php echo $download; ?>"><img src="catalog/view/theme/default/image/account-images/download.png" alt="Your Downloads" > <h5><?php echo $text_download; ?></h5></a></div> <?php if ($reward) { ?> <div class="col-md-3 text-center" ><a class="hvr" href="<?php echo $reward; ?>"><img src="catalog/view/theme/default/image/account-images/reward.png" alt="Reward Points" > <h5><?php echo $text_reward; ?></h5></a></div> <?php } ?> <div class="col-md-3 text-center" ><a class="hvr" href="<?php echo $return; ?>"><img src="catalog/view/theme/default/image/account-images/return.png" alt="Your Returns" > <h5><?php echo $text_return; ?></h5></a></div> <div class="col-md-3 text-center" ><a class="hvr" href="<?php echo $transaction; ?>"><img src="catalog/view/theme/default/image/account-images/trans.png" alt="Transactions" > <h5><?php echo $text_transaction; ?></h5></a></div> <div class="col-md-3 text-center" ><a class="hvr" href="<?php echo $recurring; ?>"><img src="catalog/view/theme/default/image/account-images/payments.png" alt="Recurring Payments" > <h5><?php echo $text_recurring; ?></h5></a></div><div class="clearfix"></div> </ul> <h2><?php echo $text_my_newsletter; ?></h2> <ul class="list-unstyled"> <div class="col-md-3 text-center" ><a class="hvr" href="<?php echo $newsletter; ?>"><img src="catalog/view/theme/default/image/account-images/newsletter.png" alt="Your Newsletter" > <h5><?php echo $text_newsletter; ?></h5></a></div> </ul> <?php echo $content_bottom; ?></div> <?php echo $column_right; ?></div> </div> <?php echo $footer; ?> |
Но, помимо оформления личного кабинета, модуль «Smart dashboard» меняет внешний вид страницы партнера, то есть партнерский кабинет. А это значит, что изменения необходимо внести еще и в файл catalog/view/theme/*/template/affiliate/account.tpl. Открываем файл и находим аналогичные строки списка (всего 5 строк), начиная с
|
1 |
<li><a href="<?php echo $edit; ?>"><?php echo $text_edit; ?></a></li> |
меняем ее на
|
1 2 |
<div class="col-md-3 text-center" ><a href="<?php echo $edit; ?>"><img src="catalog/view/theme/default/image/account-images/edit.png" alt="Account Details" > <p style="margin-top: 20px;"><?php echo $text_edit; ?></p></a></div> |
— строку
|
1 |
<li><a href="<?php echo $password; ?>"><?php echo $text_password; ?></a></li> |
меняем на
|
1 2 |
<div class="col-md-3 text-center" ><a href="<?php echo $password; ?>"><img src="catalog/view/theme/default/image/account-images/password.png" alt="Account Password" > <p ><?php echo $text_password; ?></p></a></div> |
— строку с платежными реквизитами
|
1 |
<li><a href="<?php echo $payment; ?>"><?php echo $text_payment; ?></a></li> |
меняем на следующий код:
|
1 2 |
<div class="col-md-3 text-center" ><a href="<?php echo $payment; ?>"><img src="catalog/view/theme/default/image/account-images/payments.png" alt="Payment Preferences" > <p ><?php echo $text_payment; ?></p></a></div><div class="clearfix"></div> |
при этом я обнаружила, при тестировании модуля, что название картинки указано в xml файле немного неверно, вместо payment.png необходимо в пути указать payments.png. И добавим очищающий блок, чтобы строки были строками, а не смешивались в кучу.
— строку с реферальным кодом
|
1 |
<li><a href="<?php echo $tracking; ?>"><?php echo $text_tracking; ?></a></li> |
меняем на
|
1 2 |
<div class="col-md-3 text-center" ><a href="<?php echo $tracking; ?>"><img src="catalog/view/theme/default/image/account-images/orders.png" alt="Tracking Code" > <p ><?php echo $text_tracking; ?></p></a></div><div class="clearfix"></div> |
здесь тоже присутствовал баг — путь вел к несуществующей картинке, я изменила ее на картинку orders.png, которая вполне, на мой взгляд, подходит, и опять-таки добавила очищающий блок.
— и последнюю строку, которую нам необходимо изменить,
|
1 |
<li><a href="<?php echo $transaction; ?>"><?php echo $text_transaction; ?></a></li> |
меняем на
|
1 2 |
<div class="col-md-3 text-center" ><a href="<?php echo $transaction; ?>"><img src="catalog/view/theme/default/image/account-images/trans.png" alt="Transactions" > <p ><?php echo $text_transaction; ?></p></a></div> |
Полное содержимое обновленного файла catalog/view/theme/*/template/affiliate/account.tpl:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<?php echo $header; ?> <div class="container"> <ul class="breadcrumb"> <?php foreach ($breadcrumbs as $breadcrumb) { ?> <li><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a></li> <?php } ?> </ul> <?php if ($success) { ?> <div class="alert alert-success"><i class="fa fa-check-circle"></i> <?php echo $success; ?></div> <?php } ?> <div class="row"><?php echo $column_left; ?> <?php if ($column_left && $column_right) { ?> <?php $class = 'col-sm-6'; ?> <?php } elseif ($column_left || $column_right) { ?> <?php $class = 'col-sm-9'; ?> <?php } else { ?> <?php $class = 'col-sm-12'; ?> <?php } ?> <div id="content" class="<?php echo $class; ?>"><?php echo $content_top; ?> <h2><?php echo $text_my_account; ?></h2> <ul class="list-unstyled"> <div class="col-md-3 text-center" ><a href="<?php echo $edit; ?>"><img src="catalog/view/theme/default/image/account-images/edit.png" alt="Account Details" > <p style="margin-top: 20px;"><?php echo $text_edit; ?></p></a></div> <div class="col-md-3 text-center" ><a href="<?php echo $password; ?>"><img src="catalog/view/theme/default/image/account-images/password.png" alt="Account Password" > <p ><?php echo $text_password; ?></p></a></div> <div class="col-md-3 text-center" ><a href="<?php echo $payment; ?>"><img src="catalog/view/theme/default/image/account-images/payments.png" alt="Payment Preferences" > <p ><?php echo $text_payment; ?></p></a></div><div class="clearfix"></div> </ul> <h2><?php echo $text_my_tracking; ?></h2> <ul class="list-unstyled"> <div class="col-md-3 text-center" ><a href="<?php echo $tracking; ?>"><img src="catalog/view/theme/default/image/account-images/orders.png" alt="Tracking Code" > <p ><?php echo $text_tracking; ?></p></a></div><div class="clearfix"></div> </ul> <h2><?php echo $text_my_transactions; ?></h2> <ul class="list-unstyled"> <div class="col-md-3 text-center" ><a href="<?php echo $transaction; ?>"><img src="catalog/view/theme/default/image/account-images/trans.png" alt="Transactions" > <p ><?php echo $text_transaction; ?></p></a></div> </ul> <?php echo $content_bottom; ?></div> <?php echo $column_right; ?></div> </div> <?php echo $footer; ?> |
И партнерский кабинет меняет свой вид с
на новый, более живой и яркий.
Совсем немного манипуляций и личный кабинет + кабинет партнерки изменились в лучшую сторону.
у меня почему то получилось иконки в один столбец только учусь подскажите как исправить. Шаблон стоит журнал.
Здравствуйте! Магазин на Opencart 1.5.6.4. Скопировала все файлы, ничего не вышло. Увидела, что в vqmod путь к дефолтной теме, поменяла на свою, все равно ничего не заработало. Кэш чистила, если это имеет значение. Помогите, пожалуйста!
Молодцы ребята, очень помогают ваши статьи, очень бы хотелось увидеть статьи по мультимагазину, у всех с ним проблемы)