FENOM'енальный курс. Часть 15. Кабинет покупателя на Fenom.

03.02.2019
288
Шаблон MAGAZINE вы можете скачать по ссылке.

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


В данном уроке нам понадобится пара платных компонентов из репозитория modstore.pro:



Создадим с вами группу пользователей Users, для этого перейдем в Контроль доступа->Новая группа ресурсов:


FENOM'енальный курс. Часть 15. Кабинет покупателя на Fenom.


Кроме того, я поставил галочку на опции “Создать параллельную группу ресурсов”, с помощью которой мы с вами будем скрывать от анонимных пользователей страницы личного кабинета. Теперь, чтобы настроить нашу группу пользователей, нам необходимо кликнуть по ней правой кнопкой мыши и нажать на “Редактирование”. Нас интересует вкладка “Права доступа”. На вкладке “Доступ к контекстам” у контекста web необходимо выставить политику доступа “Load, List and View”:


FENOM'енальный курс. Часть 15. Кабинет покупателя на Fenom.


Аналогично действуем с группой ресурсов “Users” на вкладке “Доступ к группам ресурсов” и после не забываем нажать “Сохранить”:


FENOM'енальный курс. Часть 15. Кабинет покупателя на Fenom.


Так как MODx по умолчанию выставляет некорректные права доступа для групп пользователей, нам необходимо отредактировать группу пользователей “аноним”. Нас интересует вкладка “Доступ к группам ресурсов”, где нужно выставить группе ресурсов “users” политику доступа “Load Only”. Не забудьте нажать кнопку “Сохранить”.


FENOM'енальный курс. Часть 15. Кабинет покупателя на Fenom.


Мы с вами настроили наши права, теперь нам необходимо создать страницы авторизации и личного кабинета. Я создал шаблон для страницы авторизации и выглядит он следующим образом:


	<code class="language-html">
{extends 'file:templates/index.tpl'}
{block 'content'}
{include 'file:chunks/breadcrumbs.tpl'}
<!-- CONTENT -->
<section class="def-section content">
    <div class="container">
        <h1>{$_modx->resource.longtitle ?: $_modx->resource.pagetitle}</h1>
        {$_modx->resource.content}
        {$_modx->runSnippet(“!officeAuth”,[
            'groups' => 'Users',
            'loginResourceId' => '23',
            'HybridAuth' => '0'
        ])}
    </div>
</section>
<!-- / CONTENT -->
{/block}
	</code>

Так как я адаптировал под себя стандартный чанк Office, то я не буду указывать в парметрах чанки. Параметр loginResourceId отвечает за переадресацию после успешной авторизации. У меня это страница со списком заказов:


FENOM&#39;енальный курс. Часть 15. Кабинет покупателя на Fenom.


Если все настроили корректно, то у вас выведется форма авторизации и регистрации, которые вы можете проверить. А мы тем временем перейдем с вами к нашему личному кабинету. У всех страниц я оставил шаблон текстовой страницы. Предлагаю вам реализовать страницу редактирования профиля:


FENOM&#39;енальный курс. Часть 15. Кабинет покупателя на Fenom.


Я снял галочки с опций “Доступен для поиска” и “Использовать HTML-редактор” (это же необходимо сделать со страницей истории заказов) и разместил поле “Содержимое ресурса” вызов сниппета officeProfile:


	<code class="language-html">
{$_modx->runSnippet("!officeProfile", [
    "tplProfile" => "@FILE chunks/office_profile.tpl"
])}
	</code>

Чанк office_profile.tpl (его вид может быть лучше, можете сами настроить его с помощью Bootstrap 4):


	<code class="language-html">
<form action="" method="post" class="form-horizontal well" id="office-profile-form" enctype="multipart/form-data">
    <div class="header">
        <small>{'office_profile_header' | lexicon}</small>
    </div>

    <div class="form-group avatar">
        {$_modx->runSnippet("!uaAvatar")}
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">{'office_profile_username' | lexicon}<sup class="red">*</sup></label>
        <div class="col-sm-10">
            <input type="text" name="username" value="{$username}" placeholder="{'office_profile_username' | lexicon}"
                   class="form-control"/>
            <p class="help-block message">{$error_username}</p>
            <p class="help-block desc">{'office_profile_username_desc' | lexicon}</p>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">{'office_profile_fullname' | lexicon}<sup class="red">*</sup></label>
        <div class="col-sm-10">
            <input type="text" name="fullname" value="{$fullname}" placeholder="{'office_profile_fullname' | lexicon}"
                   class="form-control"/>
            <p class="help-block message">{$error_fullname}</p>
            <p class="help-block desc">{'office_profile_fullname_desc' | lexicon}</p>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">{'office_profile_email' | lexicon}<sup class="red">*</sup></label>
        <div class="col-sm-10">
            <input type="text" name="email" value="{$email}" placeholder="{'office_profile_email' | lexicon}"
                   class="form-control"/>
            <p class="help-block message">{$error_email}</p>
            <p class="help-block desc">{'office_profile_email_desc' | lexicon}</p>
        </div>
    </div>

<div class="form-group">
    <label class="col-sm-2 control-label">
        {'office_profile_phone' | lexicon}{if $_modx->config.office_auth_mode == 'phone'} <span class="red">*</span>{/if}
    </label>
    <div class="col-md-10">
        <input type="text" name="mobilephone" placeholder="" value="{$mobilephone}" class="form-control"/>
        <p class="help-block message">{$error_mobilephone}</p>
        <p class="help-block desc">{'office_profile_phone_desc' | lexicon}</p>
    </div>
</div>

<div class="form-group hidden">
    <label class="col-sm-2 control-label">{'office_auth_register_phone_code' | lexicon}</label>
    <div class="col-md-10">
        <input type="text" name="phone_code" value="" class="form-control"/>
        <p class="help-block message">{$error_phone_code}</p>
        <p class="help-block desc">{'office_profile_phone_code_desc' | lexicon}</p>
    </div>
</div>

    <div class="form-group">
        <label class="col-sm-2 control-label">{'office_profile_password' | lexicon}</label>
        <div class="col-sm-10">
            <input type="password" name="specifiedpassword" value="" placeholder="********" class="form-control"/>
            <p class="help-block message">{$error_specifiedpassword}</p>
            <p class="help-block desc">{'office_profile_specifiedpassword_desc' | lexicon}</p>
            <input type="password" name="confirmpassword" value="" placeholder="********" class="form-control"/>
            <p class="help-block message">{$error_confirmpassword}</p>
            <p class="help-block desc">{'office_profile_confirmpassword_desc' | lexicon}</p>
        </div>
    </div>

    {if $providers?}
        <div class="form-group">
            <label class="col-sm-2 control-label">{'ha.providers_available' | lexicon}</label>
            <div class="col-sm-10">
                {$providers}
            </div>
        </div>
    {/if}

    <hr/>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-primary">{'office_profile_save' | lexicon}</button>
                
            <a class="btn btn-danger" href="{$_modx->resource.id | url : [] : ['action' => 'auth/logout']}">{'office_profile_logout' | lexicon}</a>
        </div>
    </div>
</form>
	</code>

Со страницей истории заказов нам достаточно разместить следующий вызов сниппета Office в поле “Содержимое ресурса”:


	<code class="language-html">
{$_modx->runSnippet("!Office", [
    "action" => "miniShop2"
])}
	</code>

Сейчас перейдем в “Содержимое”->”Группы ресурсов” и перетащим созданные нами страницы в группу ресурсов “Users”:


FENOM&#39;енальный курс. Часть 15. Кабинет покупателя на Fenom.


Для того, чтобюы нам настроить 403 страницу, необходимо зайти в системные настройки и для настройки “unauthorized_page” указать ID страницы с формой авторизации:


FENOM&#39;енальный курс. Часть 15. Кабинет покупателя на Fenom.


Отлично! Теперь выведем меню для авторизованных пользователей в чанке header:


	<code class="language-html">
{if $_modx->user.id > 0}
	<div class="dropdown">
	  <a href="{44 | url}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			{if $_modx->user.id | user : 'photo'}
				<img src="{$_modx->getPlaceholder('+nophoto') | phpthumbon : 'w=20&h=20&zc=1&q=99'}" alt="{$_modx->user.id | user : 'username' | htmlent}" />
			{else}
				<img src="{$_modx->user.id | user : 'photo'  | phpthumbon : 'w=20&h=20&zc=1&q=99'}" alt="{$_modx->user.id | user : 'username' | htmlent}">
			{/if}										  
			{$_modx->user.id | user : 'username'}
			<i class="fa fa-angle-down"></i>
	  </a>
	  {$_modx->runSnippet('pdoMenu', [
		'parents' => '21',
		'limit' => 0,
		'outerClass' => 'dropdown-menu',
		'tplOuter' => '@INLINE <ul[[+classes]]>[[+wrapper]]<li><a href="{24 | url : [\'scheme\' => \'full\'] : [\'action\' => \'auth/logout\']}">Выйти</a></li></ul>'
	  ])}
	</div>
{else}
	<a href="{24 | url}">
	  Вход/Регистрация
	</a>
{/if}
	</code>

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

Оцените статью:

Проголосовало: 11

Комментарии ()

Ваш комментарий будет первым!

Написать комментарий

Наши клиенты

Многие компании уже доверяют нам. Будьте в их числе!

Хотите реализовать проект?

Контакты

Напишите нам - мы расскажем вам много интересного!


Пермь, ул. Крупской 34, офис 510