Сегодня поговорим о том как на сайте под управлением MODX создать личный кабинет пользователя при помощи платного пакета Office от modstore.
При помощи Office пользователь может регистрироваться и авторизоваться на сайте через email и социальные сети (требуется установка и настройка HybridAuth), обновлять свойства своего профиля и просматривать историю заказов miniShop2.
Функционал в комплекте:
- Ajax регистрация и авторизация пользователей
- Ajax редактирование профиля
- Авторизация в дополнительные аккаунты для быстрого переключения между ними
- Авторизация под любым активным пользователем прямо из админки
- Вывод покупок пользователя miniShop2 на ExtJS
Быстрое создание личного кабинета покупателя с авторизацией, редактированием профиля и выводом заказов из miniShop2
Авторизация
Сделаем ЛК доступным только для авторизованных пользователей. Для этого создадим группу Users.
Переходим в шестеренка -> Контроль доступа -> Новая группа пользователей.
В открывшемся окне прописываем:
- Имя — Users
- Контексты — web
- Политика панели управления — нет политики.
Сохраняем.
Группа появится слева, нажмите по ней правой кнопкой мыши и выберите редактировать.
Переходим во вкладку Права доступа и на вкладке Доступ к контекстам, редактируем политику доступа на Load, List and View.
И еще раз сохраняем сверху.
Создание основных страниц
Теперь создаём раздел «Личный кабинет»
В этом разделе создаем две страницы:
1.Профиль, со следующим содержимым:
[[!officeProfile]]
2. История заказов, со следующим содержимым:
[[!Office?action=`miniShop2`]]
Теперь можно для удобства сделать Личный кабинет ссылкой на «Историю заказов» или «Профиль», для этого.
Откройте страницу «Личный кабинет», перейдите на вкладку «Настройки» и смените «Тип ресурса» на «ссылка», сохраните.
Укажите ссылку и снова сохраните.
Закрытие основных страниц для доступа всем кроме группы Users
Идем в Содержимое — > Группы ресурсов и создаем новую группу со следующими параметрами:
- Имя: office
- Контексты:web
- Автоматически дать доступ группе «Administrator»: да
- Автоматически дать анонимный доступ: да
- Автоматически дать доступ другим группам: Users
Внимание! Если не дать группе (аноним) доступ (не поставить галку), то они не смогут загружать страницы и получат «404 не найдено», вместо «403 — доступ запрещен».
После создания группы перетаскиваем туда все 3 страницы ЛК.
После этого снова идем в «Шестеренка»-> «Контроль доступа» и ужесточаем доступ групп Users и (аноним) к группе ресурсов «Office». Для Users ставим Load, List and View, а для (аноним) Load Only.
Теперь если открыть страницу личного кабинете в анонимном режиме браузера, то должна вывести главная страница.
Для того чтобы вместо главной показывалась страница авторизации, нужно её создать и указать её id в системной настройке unauthorized_page (об этом следующий пункт).
Создание страницы авторизации
Создаем Ресурс с названием Авторизация, отключаем у него HTML редактор и в поле содержимого помещаем следующий вызов: [[!officeAuth? &groups=`Users` &HybridAuth=`0`]]
Здесь параметр groups указывает, то что пользователя нужно зарегистрировать в группу Users, которая как раз и имеет доступ к личному кабинету. Да е если вам нужна авторизация через соц, сети тогда установите и настройте HybridAuth, а из вызова уберите &HybridAuth=`0`.
Далее идем в системные настройки и в ключе unauthorized_page указываем id только что созданной страницы.
После этого если зайти в анонимном режиме на страницу личный кабинет, вы должны получить требование авторизации.
Примечания по авторизации через соц. сети:
Все параметры сниппета авторизации можно посмотреть на его странице:
По умолчанию, при регистрации пользователя нельзя использовать HybridAuth. Юзер должен первый раз авторизоваться через email, а затем уже привязать нужные соцсети в настройках профиля.
Если покупатель уже оформлял заказ на этот email в miniShop2, то он уже зарегистрирован в системе, и она его не примет. Но тогда пользователь может сбросить пароль, получить его на почту, войти в личный кабинет и увидеть все свои заказы.
То есть, установкой данного дополнения вы откроете всем своим покупателям доступ к их сохранённой истории заказов.
Редактирование профиля
Основных отличий сниппета officeProfile от других решения для редактирования профиля несколько:
- Он целиком и полностью работает через ajax.
- Он позволяет указать поля профиля, которые можно заполнять.
- Он может требовать определённые поля для заполнения
- Юзер может менять свой username и email. Причем для смены последнего высылается ссылка для активации на новый ящик. Пока юзер не кликнет — email не изменится.
- Можно выводить и редактировать поле extended профиля. Такие поля разрешаются в настройках и выводятся в форме как extended[имя поля].
- Юзер может загрузить\удалить картинку для своего профиля, по прежнему через ajax. Если картинки нет — выводится gravatar.
- Здесь юзер может привязать свои соцсети (если включено и настроено), чтобы быстро через них авторизоваться.
Всё работает сразу, из коробки. Сам сниппет вызывается так:
[[!officeProfile]]Вы можете указать ему дополнительные параметры: отключать ли HybridAuth, куда пересылать юзера при выходе с сайта (по умолчанию — текущий url), параметры загрузки аватара и т.д. Не буду на этом останавливаться, вы сами можете всё прекрасно посмотреть в его параметрах, в админке.
Вывод заказов
История заказов вызывается через сниппет officeMiniShop2:
Всё построено на ExtJS, который загружается из установленного MODX, поэтому на разных версиях MODX он может выглядеть немного по разному.
Поля для вывода указываются в системных настройках. Также вы можете полностью изменить внешний вид ExtJS собственным css файлом, но это очень кропотливая работа.
Большинству магазинов подойдут настройки по умолчанию, разве что может понадобиться убрать поле «вес».
Заключение
Теперь вы знаете, как можно очень легко и просто организовать у себя на сайте авторизацию, редактирование профиля и вывод заказов miniShop2.
Страница с официальной документацией здесь.
