Личный кабинет покупателя Office

Каталог товаров вывели, поиск и фильтрацию установили и настроили, дело осталось только за личным кабинетом для покупателя.

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

На самом деле, умеет он гораздо больше — на его основе можно программировать любые страницы для взаимодействия с пользователем. Например, у нас он трудится в магазине и на хостинге.
Но это уже для продвинутых пользователей. А мы с вами рассмотрим применение «из коробки». Готовый результат можно посмотреть на демо-сайте.

Авторизация

Личный кабинет будет доступен только для авторизованных пользователей. Их мы будем регистрировать в группу Users.

Нужно её создать:
Права доступа на контекст назначаем Load, List and View.

Теперь создаём раздел «Личный кабинет» и в нём 2 страницы: «Профиль» и «История заказов». Сам личный кабинет должен быть ссылкой на «Историю заказов» — для удобства:
Я пока скрыл вывод кабинета в меню, как закончим — нужно будет включить!

Теперь нас нужно закрыть эти страницы для доступа всем, кроме группы Users. Обратите внимание, что мы должны дать группе (аноним) доступ Load only, чтобы они могли загрузить страницу, проверить права доступа и получить «403 Доступ запрещен». Если не дать им Load only, то страница для них не будет существовать, и анонимы получат «404 не найдено».

Создаём новую группу ресурсов Office, назначаем ей права и включаем в неё все наши 3 страницы личного кабинета.
После этого нужно снова зайти в «Контроль доступа» и ужесточить доступ групп Users и (аноним) к этой группе ресурсов, потому что MODX выставляет не совсем верные права по умолчанию. Для Users он ставит Resource, а дла (аноним) Load, List and View.
Всё, теперь можно открыть страницу кабинета из анонимного режима браузера (мы не должны быть залогинены в админке, это даёт нам дополнительные права) и получить вывод главной страницы по этому адресу.

Чтобы вместо главной нам показывалась страница авторизации, нужно её создать и указать её id в системной настройке unauthorized_page.
И теперь в анонимном режиме мы получаем требование авторизации при переходе в личный кабинет:

Обратите внимание, что я вызываю сниппет officeAuth с параметром groups — это указывает, что пользователя нужно зарегистрировать в группу Users, которая как раз и имеет доступ к личному кабинету.
[[!officeAuth?
	&groups=`Users`
]]

Всё просто и логично, если немного разобраться. Настроить авторизацию через HybridAuth вы можете с помощью документации. Если она не нужна, то можно её просто отключить:
[[!officeAuth?
	&groups=`Users`
	&HybridAuth=`0`
]]
Лично я предпочитаю настраивать — это удобно для посетителя.

Все параметры сниппета авторизации можно посмотреть на его странице:

По умолчанию, при регистрации пользователя нельзя использовать HybridAuth. Юзер должен первый раз авторизоваться через email, а затем уже привязать нужные соцсети в настройках профиля.

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

То есть, установкой данного дополнения вы откроете всем своим покупателям доступ к их истории заказов.

Редактирование профиля

Основных отличий officeProfile от других решения для редактирования профиля несколько:
  • Он целиком и полностью работает через ajax.
  • Он позволяет указать поля профиля, которые можно заполнять.
  • Он может требовать определённые поля для заполнения
  • Юзер может менять свой username и email. Причем для смены последнего высылается ссылка для активации на новый ящик. Пока юзер не кликнет — email не изменится.
  • Можно выводить и редактировать поле extended профиля. Такие поля разрешаются в настройках и выводятся в форме как extended[имя поля].
  • Юзер может загрузить\удалить картинку для своего профиля, по прежнему через ajax. Если картинки нет — выводится gravatar.
  • Здесь юзер может привязать свои соцсети (если включено и настроено), чтобы быстро через них авторизоваться.
Это всё работает сразу, из коробки, безо всякого шаманства.

Сам сниппет вызывается очень просто:
[[!officeProfile]]
Вы можете указать ему дополнительные параметры: отключать ли HybridAuth, куда пересылать юзера при выходе с сайта (по умолчанию — текущий url), параметры загрузки аватара и т.д.
Не буду на этом останавливаться, вы сами можете всё прекрасно посмотреть в его параметрах, в админке.

Вывод заказов

А вот личный кабинет вызывается немного необычно.
[[!Office?action=`miniShop2`]]
Тут нужно небольшое лирическое отступление. У Office модульная архитектура, вы можете создать свой контроллер, положить ему в директорию и вызвать вот таким образом через сниппет Office.

Всё, что есть внутри Office работает именно так, но для авторизации и профиля позже были добавлены сниппеты, только для того, чтобы прописать в них параметры для вызова. А внутри же они выглядят вот так:
<?php
/** @var array $scriptProperties */
$scriptProperties['action'] = 'Auth';

/** @var modSnippet $snippet */
if ($snippet = $modx->getObject('modSnippet', array('name' => 'Office'))) {
	$snippet->_cacheable = false;
	$snippet->_processed = false;

	return $snippet->process($scriptProperties);
}
То есть, просто выставляют action и запускают тот же сниппет Office вместе со своими параметрами.

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

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

Итак, история заказов:
Всё построено на ExtJS — это очень удобно. Сам он загружается из установленного MODX, поэтому на разных версиях MODX он может выглядеть немного по разному. Для версии 2.3 уже выпущено обновление Office с исправлением стилей.

Поля для вывода указываются в системных настройках. Также вы можете полностью изменить внешний вид ExtJS собственным css файлом, но это довольно кропотливая работа — предупреждаю сразу.
Большинству магазинов подойдут настройки по умолчанию, разве что может понадобиться убрать поле «вес».

Немного про msProfile

В комментариях меня просили немного затронуть в этом уроке msProfile, так что, давайте затронем.

Платное дополнение msProfile — это способ оплаты для miniShop2, с внутреннего счета покупателя. Это не вывод профиля, или чего-то еще — это пополнение счета и оплата с него.

Компонент использует объект msCustomerProfile, который появился в версии miniShop2 2.1. В нём есть поле account — это тот самый внутренний счет.

В отличии от других методов оплаты, которые отправляют юзера на какой-нибудь сервис (PayPal, Robokassa), msProfile должен делать всё сам, поэтому у него есть свой раздел в админке, с выводом профилей пользователя.


Также у него есть два сниппета:
  • msProfile — простой вывод объекта msCustomerProfile на сайте. Например, чтобы показывать количество денег на счету.
  • msProfileCharge — пополнение баланса пользователя любым доступным в MS2 способом.
Изначально дополнение было написано эксклюзивно для нашего хостинга, а потом мы решили, что неплохо его выложить всем желающим.

Следует отметить, что с точки зрения магазина, и вообще логики, сам акт пополнения счета является покупкой. То есть, юзер переводит деньги в магазин, а дальше они уже становятся просто циферкой в БД, на которую он может заказать товар.

Поэтому все операции зачисления на счет отображаются в личном кабинете как обычные покупки, а списания — со знаком минус. В сам заказ пишется или «пополнение счета» или покупки, которые юзер оплатил с него.
Как видите, Office отлично работает с msProfile.

Заключение

Теперь вы знаете, как можно очень легко и просто организовать у себя на сайте авторизацию, редактирование профиля и вывод заказов miniShop2.

На этом наш курс обучения заканчивается, потому что мы рассмотрели весь путь создания простого сайта на MODX c использованием новых дополнений.

Про всякие там getResources, Login и прочее стандартное есть много разных уроков, но как вы понимаете — это всё нафталин. Эти дополнения медленные, неудобные, они плохо русифицированы и их постоянно нужно дорабатывать напильником. Например, прикрутить ajax к авторизации через Login практически нереально, а в Office она сразу так работает!

Этот курс — простой для освоения, потому что при использовании готовых дополнений не нужно прям много знаний. Тем более, по платным дополнениям предоставляется техподдержка в магазине.

Но этот курс и единственный подобный курс по именно этим дополнениям. Вообще, мне кажется, что за пределами русскоговорящей аудитории в мире MODX мало кто знает о том, как мы сейчас создаём сайты. Насколько быстро и удобно они работают.

Кое-какое представление, конечно, можно получить на docs.modx.pro, да и наше сообщество тоже очень здорово работает, но в целом, все начинают со старых статей, которые уже давно потеряли свою актуальность.

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

Например yTranslit генерирует псевдонимы для страниц сайта, используя переводчик Яндекса и вы получаете alias main вместо glavnaja — так гораздо красивее.
Или BannerY, который позволяет очень легко управлять выводом баннеров на сайте в админке.
Или Tickets, для создания общения в пользователями: создания блога и комментариев, про который можно отдельный курс написать.

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

Надеюсь, вам было интересно, и вы не зря потратили своё время. Если есть вопросы — задавайте, я с удовольствием отвечу.

Наверх, в раздел
Создание сайтов
Предыдущая заметка
Компонент поиска и фильтрации mSearch2


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

  1. Сергей Лелеко 13 августа 2014, 16:13 # 0
    А сколько примерно занятий планируется в данном курсе?
    1. Василий Наумкин 13 августа 2014, 16:28 # 0
      Это последнее.
    2. Иван Тюмеров 13 августа 2014, 22:51 # 0
      Огромное спасибо, Василий!
      С удовольствием ещё курс про Tickets прошёл бы у тебя.
      Есть потребность создать блог, в котором могли бы размещать статьи пользователи сайта, не допуская их в админку.
      1. Василий Наумкин 14 августа 2014, 06:24 # 0
        На здоровье!

        Курс по Tickets, если и будет, то не скоро — это на самом деле очень выматывает, писать такие здоровенные подробные заметки. Нужно накопить силы и желание.
        1. Дмитрий Аверин 18 октября 2014, 17:41 # 0
          Да, добавление разных типов контента с фронта это очень интересная и нужная тема. Спасибо за курс.
          1. Василий Наумкин 18 октября 2014, 17:44 # 0
            На здоровье!
        2. Дмитрий Кондаков 15 августа 2014, 11:25 # 0
          Спасибище за курс Василий!) Вопрос есть, но не по теме курса) bezumkin.ru/sections/tips_and_tricks/2918/#comment-25008 ответь если не сложно пожалуйста
          1. Саша Туманов 05 сентября 2014, 00:11 # 0
            Василий, подскажи пожалуйста, можно ли как то выводить в шаблоне контент только для пользователей определенной группы?
            Есть ли способ наподобие:
            [[!+modx.user.id:notempty=`авторизован`:default=`не авторизован`]]
            
            Сниппетом знаю как решить, но подозреваю, что должна быть штатная возможность. Только начал разбираться с пользователями :)
            1. Василий Наумкин 05 сентября 2014, 06:52 # 0
              1. Саша Туманов 05 сентября 2014, 12:17 # 0
                О! Как же проглядел то…
                Спасибо :)
            Добавление новых комментариев отключено.