OpenCart — как изменить внешний вид личного кабинета — модуль Smart dashboard 2016-07-05

поможет изменить скучный вид личного кабинета.

  1. admin
    Неважно, старая версия движка или свежая, а личный кабинет покупателя на OpenCart имеет скучноватый вид — скромные ссылки в один столбец.

    opencart-login-customer-page.png



    Оно-то для продаж или продвижения магазина не играет никакой роли, но с эстетической точки зрения всегда хочется улучшить внешний вид магазина, чтобы дизайн радовал посетителей и клиентов магазина. К сожалению, нередкое явление — дизайн фронтальной части магазина продуман, а вот технические страницы, наподобие того же кабинета, оставлены такими же, какими были по умолчанию.

    Модуль «Smart dashboard» поможет изменить скучный вид личного кабинета. С его помощью личный кабинет избавится от столбца с ссылками, вместо них появятся ряды с позитивными иконками и подписями к ним.

    opencart-login-customer-page-new.png



    Если такое оформление вам по душе, то приступим к установке и настройке модуля.


    Установка и настройка модуля

    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»> добавляем несколько строк со стилями

    Код:
    <style>
    .hvr:hover > h5{
    color:#84C225;
    }
    </style>

    Затем находим строку


    Код:
    <li><ahref="<?phpecho$edit;?>"><?phpecho$text_edit;?></a></li>

    и меняем ее всю на

    Код:
    <div class="col-md-3 text-center"><aclass="hvr"href="<?phpecho$edit;?>"><img src="catalog/view/theme/default/image/account-images/edit.png"alt="Account Details">
    <h5><?phpecho$text_edit;?></h5></a></div>

    То есть, мы всю строку списка заменили на блок с изображением и текстом. По аналогии находим и остальные строки (всего в файле необходимо изменить 11 строк кода):

    — строку с паролем


    Код:
    <li><ahref="<?phpecho$password;?>"><?phpecho$text_password;?></a></li>

    меняем на

    Код:
    <div class="col-md-3 text-center"><aclass="hvr"href="<?phpecho$password;?>"><img src="catalog/view/theme/default/image/account-images/password.png"alt="Account Password">
    <h5><?phpecho$text_password;?></h5></a></div>

    и т. д.

    Все содержимое файла catalog/view/theme/*/template/account/account.tpl, после того, как внесены все изменения, имеет следующий вид:


    Код:
    <?phpecho$header;?>
    <div class="container">
    <style>
    .hvr:hover > h5{
    color:#84C225;
    }
    </style>
    <ul class="breadcrumb">
    <?phpforeach($breadcrumbsas$breadcrumb){?>
    <li><ahref="<?phpecho$breadcrumb['href'];?>"><?phpecho$breadcrumb['text'];?></a></li>
    <?php}?>
    </ul>
    <?phpif($success){?>
    <div class="alert alert-success"><iclass="fa fa-check-circle"></i><?phpecho$success;?></div>
    <?php}?>
    <div class="row"><?phpecho$column_left;?>
    <?phpif($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="<?phpecho$class;?>"><?phpecho$content_top;?>
    <h2><?phpecho$text_my_account;?></h2>
    <ul class="list-unstyled">
    <div class="col-md-3 text-center"><aclass="hvr"href="<?phpecho$edit;?>"><img src="catalog/view/theme/default/image/account-images/edit.png"alt="Account Details">
    <h5><?phpecho$text_edit;?></h5></a></div>
    <div class="col-md-3 text-center"><aclass="hvr"href="<?phpecho$password;?>"><img src="catalog/view/theme/default/image/account-images/password.png"alt="Account Password">
    <h5><?phpecho$text_password;?></h5></a></div>
    <div class="col-md-3 text-center"><aclass="hvr"href="<?phpecho$address;?>"><img src="catalog/view/theme/default/image/account-images/address.png"alt="Address Book">
    <h5><?phpecho$text_address;?></h5></a></div>
    <div class="col-md-3 text-center">
    <aclass="hvr"href="<?phpecho$wishlist;?>">
    <img src="catalog/view/theme/default/image/account-images/wishlist.png"alt="Wish List">
    <h5><?phpecho$text_wishlist;?></h5>
    </a>
    </div><div class="clearfix"></div>
    </ul>
    <h2><?phpecho$text_my_orders;?></h2>
    <ul class="list-unstyled">
    <div class="col-md-3 text-center"><aclass="hvr"href="<?phpecho$order;?>"><img src="catalog/view/theme/default/image/account-images/orders.png"alt="Order History">
    <h5><?phpecho$text_order;?></h5></a></div>
    <div class="col-md-3 text-center"><aclass="hvr"href="<?phpecho$download;?>"><img src="catalog/view/theme/default/image/account-images/download.png"alt="Your Downloads">
    <h5><?phpecho$text_download;?></h5></a></div>
    <?phpif($reward){?>
    <div class="col-md-3 text-center"><aclass="hvr"href="<?phpecho$reward;?>"><img src="catalog/view/theme/default/image/account-images/reward.png"alt="Reward Points">
    <h5><?phpecho$text_reward;?></h5></a></div>
    <?php}?>
    <div class="col-md-3 text-center"><aclass="hvr"href="<?phpecho$return;?>"><img src="catalog/view/theme/default/image/account-images/return.png"alt="Your Returns">
    <h5><?phpecho$text_return;?></h5></a></div>
    <div class="col-md-3 text-center"><aclass="hvr"href="<?phpecho$transaction;?>"><img src="catalog/view/theme/default/image/account-images/trans.png"alt="Transactions">
    <h5><?phpecho$text_transaction;?></h5></a></div>
    <div class="col-md-3 text-center"><aclass="hvr"href="<?phpecho$recurring;?>"><img src="catalog/view/theme/default/image/account-images/payments.png"alt="Recurring Payments">
    <h5><?phpecho$text_recurring;?></h5></a></div><div class="clearfix"></div>
    </ul>
    <h2><?phpecho$text_my_newsletter;?></h2>
    <ul class="list-unstyled">
    <div class="col-md-3 text-center"><aclass="hvr"href="<?phpecho$newsletter;?>"><img src="catalog/view/theme/default/image/account-images/newsletter.png"alt="Your Newsletter">
    <h5><?phpecho$text_newsletter;?></h5></a></div>
    </ul>
    <?phpecho$content_bottom;?></div>
    <?phpecho$column_right;?></div>
    </div>
    <?phpecho$footer;?>

    Но, помимо оформления личного кабинета, модуль «Smart dashboard» меняет внешний вид страницы партнера, то есть партнерский кабинет. А это значит, что изменения необходимо внести еще и в файл catalog/view/theme/*/template/affiliate/account.tpl. Открываем файл и находим аналогичные строки списка (всего 5 строк), начиная с

    Код:
    <li><ahref="<?phpecho$edit;?>"><?phpecho$text_edit;?></a></li>

    меняем ее на


    Код:
    <div class="col-md-3 text-center"><ahref="<?phpecho$edit;?>"><img src="catalog/view/theme/default/image/account-images/edit.png"alt="Account Details">
    <pstyle="margin-top: 20px;"><?phpecho$text_edit;?></p></a></div>
    — строку


    Код:
    <li><ahref="<?phpecho$password;?>"><?phpecho$text_password;?></a></li>

    меняем на

    Код:
    <div class="col-md-3 text-center"><ahref="<?phpecho$password;?>"><img src="catalog/view/theme/default/image/account-images/password.png"alt="Account Password">
    <p><?phpecho$text_password;?></p></a></div>

    — строку с платежными реквизитами


    Код:
    <li><ahref="<?phpecho$payment;?>"><?phpecho$text_payment;?></a></li>



    меняем на следующий код:


    Код:
    <div class="col-md-3 text-center"><ahref="<?phpecho$payment;?>"><img src="catalog/view/theme/default/image/account-images/payments.png"alt="Payment Preferences">
    <p><?phpecho$text_payment;?></p></a></div><div class="clearfix"></div>

    при этом я обнаружил, при тестировании модуля, что название картинки указано в xml файле немного неверно, вместо payment.png необходимо в пути указать payments.png. И добавим очищающий блок, чтобы строки были строками, а не смешивались в кучу.


    — строку с реферальным кодом


    Код:
    <li><ahref="<?phpecho$tracking;?>"><?phpecho$text_tracking;?></a></li>

    меняем на


    Код:
    <div class="col-md-3 text-center"><ahref="<?phpecho$tracking;?>"><img src="catalog/view/theme/default/image/account-images/orders.png"alt="Tracking Code">
    <p><?phpecho$text_tracking;?></p></a></div><div class="clearfix"></div>
    здесь тоже присутствовал баг — путь вел к несуществующей картинке, я изменил ее на картинку orders.png, которая вполне, на мой взгляд, подходит, и опять-таки добавил очищающий блок.


    — и последнюю строку, которую нам необходимо изменить,


    Код:
    <li><ahref="<?phpecho$transaction;?>"><?phpecho$text_transaction;?></a></li>

    меняем на

    Код:
    <div class="col-md-3 text-center"><ahref="<?phpecho$transaction;?>"><img src="catalog/view/theme/default/image/account-images/trans.png"alt="Transactions">
    <p><?phpecho$text_transaction;?></p></a></div>

    Полное содержимое обновленного файла catalog/view/theme/*/template/affiliate/account.tpl:


    Код:
    <?phpecho$header;?>
    <div class="container">
    <ul class="breadcrumb">
    <?phpforeach($breadcrumbsas$breadcrumb){?>
    <li><ahref="<?phpecho$breadcrumb['href'];?>"><?phpecho$breadcrumb['text'];?></a></li>
    <?php}?>
    </ul>
    <?phpif($success){?>
    <div class="alert alert-success"><iclass="fa fa-check-circle"></i><?phpecho$success;?></div>
    <?php}?>
    <div class="row"><?phpecho$column_left;?>
    <?phpif($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="<?phpecho$class;?>"><?phpecho$content_top;?>
    <h2><?phpecho$text_my_account;?></h2>
    <ul class="list-unstyled">
    <div class="col-md-3 text-center"><ahref="<?phpecho$edit;?>"><img src="catalog/view/theme/default/image/account-images/edit.png"alt="Account Details">
    <pstyle="margin-top: 20px;"><?phpecho$text_edit;?></p></a></div>
    <div class="col-md-3 text-center"><ahref="<?phpecho$password;?>"><img src="catalog/view/theme/default/image/account-images/password.png"alt="Account Password">
    <p><?phpecho$text_password;?></p></a></div>
    <div class="col-md-3 text-center"><ahref="<?phpecho$payment;?>"><img src="catalog/view/theme/default/image/account-images/payments.png"alt="Payment Preferences">
    <p><?phpecho$text_payment;?></p></a></div><div class="clearfix"></div>
    </ul>
    <h2><?phpecho$text_my_tracking;?></h2>
    <ul class="list-unstyled">
    <div class="col-md-3 text-center"><ahref="<?phpecho$tracking;?>"><img src="catalog/view/theme/default/image/account-images/orders.png"alt="Tracking Code">
    <p><?phpecho$text_tracking;?></p></a></div><div class="clearfix"></div>
    </ul>
    <h2><?phpecho$text_my_transactions;?></h2>
    <ul class="list-unstyled">
    <div class="col-md-3 text-center"><ahref="<?phpecho$transaction;?>"><img src="catalog/view/theme/default/image/account-images/trans.png"alt="Transactions">
    <p><?phpecho$text_transaction;?></p></a></div>
    </ul>
    <?phpecho$content_bottom;?></div>
    <?phpecho$column_right;?></div>
    </div>
    <?phpecho$footer;?>



    И партнерский кабинет меняет свой вид с

    opencart-affiliates-default.png

    на новый, более живой и яркий.
    opencart-affiliates-new.png
    Совсем немного манипуляций и личный кабинет + кабинет партнерки изменились в лучшую сторону.
    adeli, Allaur, Lex177 и 68 другим нравится это.