📋

Интеграция Creatium + Directual

Это полная инструкция по связке двух сервисов для создания сложных веб-приложений. Написана она как для клиентов Creatium, так и для клиентов Directual. Некоторые вещи, очевидные клиентам одного сервиса, могут быть не очевидны клиентам другого, поэтому все описано максимально подробно.

Так же есть ознакомительное видео:

Немного более специфичное видео о там, как с помощью Creatium, Directual и ApiFlash автоматически генерировать картинки на основе данных, по готовому шаблону.

Оглавление

Регистрация в Directual

Используйте ссылку https://my.directual.com/?ref=uB8ItC для регистрации в Directual. Так мы будем знать, насколько эта интеграция востребована. А еще на партнерке заработаем ;)

Новое приложение лучше создать без использования шаблона (Create a blank app).

После создания приложения в Directual вы попадает в личный кабинет этого приложения.

В рамках интеграции с Creatium нас интересуют следующие разделы:

  • Database — тут все таблицы с данными
  • Scenarios — тут сценарии
  • API — тут настраивается взаимодействие с Creatium

Как создать таблицу

☝️
Таблицы в Directual называются "структурами" (structure), но мы будем называть их "таблицами", поскольку так они называются на Creatium.
  1. Создаем таблицу
    1. Нужно открыть раздел Database
    2. Нажимаем кнопку "Create New...", затем "Data Structure", откроется окошко
    3. В поле "Structure name" нужно вписать понятное для себя название таблицы. Например "Города", "Товары", "Категории" и т.д.
    4. В поле "System name" нужно вписать название таблицы, используя только английские буквы и цифры. Например "cities", "goods", "categories" и т.д.
    5. image
    6. Нажимаем "Save and go", происходит переход на страницу созданной таблицы.
    7. Нажимаем "Configure fields"
  2. Настраиваем поля таблицы
    1. Для добавления поля жмем "Add field"
    2. В "Displayed name" пишем понятное для себя название поля. Например "Название товара", "Старая цена" и т.д.
    3. В "System name" пишем системное название поля, используя только английские буквы и цифры. Например "title", "oldPrice" и т.д.
    4. В "Data type" нужно указать тип данных. Например "string" - строка, или "number" - число.
    5. В графе "Structure visible name", которое над всеми полями, нужно указать то поле, которое больше всего похоже на название объекта.
    6. Список полей для примера
      Список полей для примера
    7. Когда все поля добавлены, нажимаем "Save and exit".

Как подключить таблицу к Creatium

На стороне Directual нужно создать API-endpoint в разделе "API".

🧠
Endpoint (ендпоинт) - это специальные адреса-ссылки, который будет использовать Creatium для получения данных из определенных таблиц Directual. Ендпоинт содержит настройки фильтров, и для одной таблицы может быть создано несколько ендпоинтов с разными фильтрами и сортировкой.
  1. Открываем API, далее API-endpoints
  2. Нажимаем New API-endpoint
  3. В поле "Destination data structure" выбираем таблицу, которую мы хотим подключить к Creatium
  4. В появившемся поле "Method name" нужно вписать (придумать) название ендпоинта английскими буквами. Например "getAllCities".
  5. Что-нибудь написать в "Endpoint description"
  6. Нажать "Set up new layer"
  7. Нажать "+Add fields for reading"
  8. В окошке нажать "Select all", потом "Save and Exit"
  9. Нажимаем "Save and Exit" наверху страницы
image
📖
Примечание. Если вы добавите новое поле (колонку) в таблицу уже после того, как настроили ендпоинт, нужно будет снова открыть настройки ендпоинта и добавить новое поле в список "+Add fields for reading", иначе Creatium его не увидит.

Подключение к Creatium

  1. В личном кабинете открыть "База данных"
  2. Нажать "Создать таблицу", придумать название (лучше такое же, как в Directual)
  3. Выбрать в списке интеграций "Импорт Directual таблицы"
  4. В поле URL ввести адрес ендпоинта, созданного в Directual
  5. Где его достать
  6. Достать APP ID и APP SECRET из Directual
  7. Где их достать
  8. Ввести логин и пароль пользователя из таблицы "App users" в Directual
  9. Обратите внимание, что это не то же самое, что логин и пароль вашего аккаунта в Directual.
    Как создать эти логин и пароль
  10. Нажать "Подключить directual"
image
🎉
Таблица подключена!

Вывод данных на странице

Данные можно вывести на странице несколькими способами.

Секция с блоками

image

Большая часть шаблонов секций — это "Секции с блоками", в которых можно выводить данные из Directual.

Для этого нужно в настройках секции во вкладке "Данные" подключить таблицу, которую мы ранее подключили.

image

Обязательно нажмите кнопку "Применить" после выбора таблицы.

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

image

Компонент "Набор блоков"

Работает так же, как и "Секция с блоками", но набор блоков можно поместить внутрь другой секции, в колонки, в окно и так далее.

image

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

Подстановка значений в текст

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

image

В качестве "Источника данных" редактор автоматически определяет таблицу, к которой подключена секция.

В одном текстовом блоке может быть вставлено несколько переменных из таблицы.

image

Подстановка картинок

Источником любой картинки в редакторе — будь то фон или простая картинка, можно установить таблицу Directual.

image

Подстановка значений в настройках

Некоторые настройки компонентов так-же позволяют использовать переменные таблиц. Несколько примеров:

  • Текст кнопок
  • Ссылки кнопок
  • Названия форм
  • Предзаполнение полей
  • ID и классы компонентов
  • Тэги alt и title картинок

В таких настройках в поле редактирования текста справа вы увидите кнопку {x} для вставки переменной в поле.

image

Подстановка значения в формах

Данные из таблицы можно подставлять в поля формы с помощью функции "Предзаполнения" в настройках полей. Можно так же подставять значения из таблицы в скрытые поля, а затем использовать значения полей в формулах.

Пагинация

Для включения пагинации нужно в настройках секции поставить галочку.

image

После этого нужно перетащить в секцию с блоками компонент "Пагинация" из раздела "Меню" на панели сверху. Перетащить нужно в место перед или после блоков.

image

Подключение к корзине

Функционал добавления товаров в корзину состоит из двух частей. Первая — это карточка товара. Вторая — это кнопка добавления товара в корзину, внутри карточки товара.

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

image

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

image

В настройках кнопки нужно указать действие — "Добавить товар в корзину", и на этом настройка карточки товара закончена.

image

Вложенные блоки

Наборы блоков можно вкладывать. Например, с помощью "Секции с блоками" можно вывести на страницу список категорий из таблицы "Категории", а внутри каждой категории поместить "Набор блоков", который подключен к другой таблице "Товары", и выводит товары соответствующих категорий.

Чтобы такая связка работала, в фильтрах "внутреннего" набора блоках нужно передавать номер внешнего.

Простые фильтры

Условия, по которым происходит фильтрация, настраиваются на стороне ендпоинта в Directual. Creatium может только передавать в ендпоинт параметры, которые затем подставляются в условие. В начале это может показаться сложным, но это на самом деле простая схема.

Важный момент, что сейчас конструктор фильтров в API Directual достаточно слабый, и приходится работать с JSON. Потом будет выпущен новый конструктор фильтров, и эту часть инструкции нужно будет обновить.

Допустим, мы хотим на разных страницах сайта выводить объекты из одной таблицы, но по разному отфильтрованные. Если у нас таблица "Города", то на одной странице мы хотим показать города, в которых поле "Страна" заполнено как "Россия", а на другой как "Италия".

В настройках фильтра ендпоинта в Directual нужно нажать кнопку в правом углу.

image

И указать такой фильтр по полю country (или любому другому):

image

Где anykey может быть любым ключем, просто в редакторе нужно будет такой же указать.

После сохранения фильтра произойдет следующее — в разделе "База данных" на Creatium данные вообще перестанут отображаться. Это нормально, но нужно понимать, почему так происходит.

image

То же самое и на страницах в редакторе — запросы не возвращают вообще никаких данных от Directual.

image

Это происходит, потому что ендпоинт в Directual ожидает, что мы отправим ему какое-нибудь значение anykey, а мы его не отправляем. Поэтому нам нужно добавить в "Параметры запроса" значение anykey.

image

И на разных страницах (и даже в нескольких секциях в рамках одной страницы) можно разные параметры запроса отправлять.

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

Переключаемся в режим кода, видим что-то такое:

image

Нужно создать в коде копию условия, но с "exp": "isEmptyValue", и обернуть это в блок "exp": "any".

image
Код для копирования

С таким фильтром запрос становится "умным", и когда мы передаем параметр anykey, фильтрует по нему, а когда не передаем — не фильтрует. И в разделе "База данных" теперь все корректно снова отображается, а еще мы получаем возможность выводить записи из таблицы как с параметром, так и без него.

Сложные фильтры

Допустим, мы хотим добавить еще один фильтр ">=" (больше или равно) по полю square (Площадь). Нужно сделать копию блока "exp": "any" и обернуть все в блок "exp": "all".

image
Код для копирования

Теперь мы можем делать фильтрацию как по полю anykey, так и по square, а можем запрашивать весь список без фильтров.

image
image

Динамические фильтры

Эти фильтры можно сделать динамическими, чтобы значения брались из адресной строки браузера.

image

Таким же образом настроим еще один параметр со значением из адресной строки.

image

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

image
image

Подключение фильтров в форме

В секции с блоками удобно для фильтров использовать боковую панель.

image

В эту панель можно переместить форму, и любые другие компоненты.

image

Настроим поля в форме, которые будут осуществлять фильтрацию.

image
image

Нужно так же изменить текст кнопки и в настройках формы указать "Действие формы" — "Фильтр". В ардесе для перенаправления указать адрес текущей страницы на сайте.

image

Обратите внимание на галочку "Добавлять к адресу значения параменных из полей". Чтобы значения из полей формы передавались в адресную строку, нужно задать им названия переменных (такие же, как параметры адресной строки).

image
image
👉
Обратите внимание, что в настройках поля "Выпадающий список" у нас 2 имени переменной. В первой хранится числовое значение, а во второй — текстовое. Для наших целей нам нужно использовать именно вторую, текстовую переменную.

Мы настроили передачу данных из формы в адресную строку, но после нажатия кнопки "Найти" происходит обновление страницы и содержимое полей в форме сбивается (становится пустым).

image

Чтобы этого избежать, нужно настроить предзаполнение полей в форме.

image

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

Сброс фильтра

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

image

Фильтр по дате

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

Для этого нужно пол полем с датой добавить еще одно поле с типом "Калькулятор". Уже готовое поле с нужной формулой можно импортировать по номеру 257. Это поле уже настроено, в редакторе оно отображается, а в публикации будет скрытым.

image

Чтобы все работало, у поля с датой нужно указать "Имя переменной".

image

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

image

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

Шаблонные страницы

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

Адреса этих страниц будут выглядеть так (например):

  • https://example.com/city?id=Москва
  • https://example.com/city?id=Берлин
  • https://example.com/city?id=Женева
  • И так далее.

На стороне Directual

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

Для создания ендпоинта подойдет инструкция выше из раздела "Как подключить таблицу к Creatium", но настроить фильтры нужно специальным образом.

В режиме "Coding mode" вставьте следующий код:

[
	{
		"exp": "any",
		"filters": [
			{
				"exp": "isEmptyValue",
				"field": "id",
				"value": "{{HttpRequest.name}}",
				"isExp": false
			},
			{
				"exp": "==",
				"field": "name",
				"value": "'{{HttpRequest.name}}' == 'creatium_empty' ? '' : '{{HttpRequest.name}}'",
				"isExp": true
			}
		]
	}
]

В нем нужно только заменить name на название поле, которое будет использоваться в качестве значения параметра адресной строки (как "Москва" в ссылке "https://example.com/city?id=Москва").

image

Больше ничего менять не нужно.

На стороне Creatium

Созданный ендпоинт нужно добавить как таблицу в разделе "База данных". Чтобы отличать от того ендпоинта, что уже есть для карточек на страницах, можно в названии дописать "(шаблонная страница)". Это просто для удобства.

image

В разделе "Страницы" нужно создать новую страницу.

image

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

image

Выбираем только что созданную таблицу (ендпоинт), в "Параметр адресной строки" пишем id или любой другой параметр.

image

Указываем, какое поле таблицы будем использовать в адресе страницы, какое в заголовке и так далее.

Тут очень важно, чтобы поле, выбранное в колонке "Адрес страницы" было тем же полем, которое указано в фильтре ендпоинта. Выше на скриншотах мы указывали поле name (Город).

Сохраняем настройки, и если вы все сделали верно, то в списке страниц эта шаблонная страница будет выглядеть примерно так:

image

Открываем эту страницу в редакторе. На панели "Данные" → "Шаблонная страница" видны все варианты страницы, и между ними можно переключаться прямо в редакторе.

image

Переменные этой таблицы можно использовать в любом любом месте страницы.

image

Как текст, так и картинки.

image

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

image

Фильтры шаблонных страниц

Не дописано. Если что, толкните https://t.me/grimalschi

Вариант по умолчанию

Помимо ссылок с параметром адресной строки (https://example.com/city?id=Москва) поддерживается и ссылка без параметра, то есть просто "https://example.com/city". В таком случае значением параметра адресной строки будет взята пустая строка, то есть "", и если в базе есть строка с таким пустым значением, то в качестве варианта шаблонной страницы будет эта строка.

Поисковая оптимизация

Все варианты шаблонной страницы автоматически попадают в файл Sitemap.xml, а для того, чтобы поисковые системы отличали одну страницу от другой, в каждом варианте так же проставляеся каноническая ссылки.

Иногда это не нужно, и отключить это поведение можно специальной галочкой в настройках подкллючение страниц к таблице.

image

Вебхуки и сценарии

Creatium может не только выводить данные из Directual, но и отправлять данные из формы в Directual с помощью вебхуков. Далее Directual с помощью сценариев может эти вебхуки обрабатывать и вносить изменения в базу данных.

Настройка вебхука из Creatium в Directual

В качестве примера сделаем форму добавления города в нашу базу данных.

image

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

На стороне Directual нужно создать вебхук в разделе "API" → "Webhooks".

image

Придумываем название на английском и нажимаем "Save".

image

Должна появиться новая строка в списке. Обратите внимание на адрес в колонке "Webhook URL", он нам пригодится.

image

Теперь нужно создать интеграцию на Creatium, которая будет отправлять данные используя этот вебхук.

image

Дальше все нужно заполнить как на скриншоте:

image
  1. Тип интеграции - "Webhook"
  2. Имя любое можно указать
  3. В поле "Url" вставляем "Webhook URL" из Directual
  4. Тип отправляемых данных - "raw".
  5. Заголовки: Content-type: application/json
  6. Обязательно отметить галочку "Отправлять все значение"

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

image

Открываем редактирование этого сценария, в разделе "Условия" отмечаем галочку "При выполнении всех условий" и в поле фильтра вписываем название формы, в нашем случае это "Создать город"

image

Таким образом мы настроили отправки данных с одной определенной формы на Directual. Отправим заявку с формы, и дальше работать будем уже с Directual.

image

Все данные заявок, приходящие через вебхук сохраняются в специальную таблицу. Ссылка на нее есть в интерфейсе вебхуков в Directual.

image

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

image

Все данные хранятся в поле "body". Тут нам в будущем потребуется "Object ID".

Пример данных заявки, которую мы отправили с сайта

Настройка сценария в Directual

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

image

Откроется окно просмотра сценария, нужно нажать "Edit scenario". В редакторе сценария нужно перетащить действие "Create object" с панели справа в сценарий.

image

После чего фигурки нужно соединить стрелочкой.

image

В настройках действия "Create object" во вкладке "General parameters" в поле "Create an object in structure" нужно выбрать таблицу, в которой будет создаваться новый объект.

image

Во вкладке "Fields mapping" нужно указать, в какие поля таблицы "Города" нужно записать какие данные из вебхука.

Кнопкой "Add field mapping" добавляем все поля, содержимое которых мы хотим указать. В нашем случае нам нужно добавить вообще все поля из таблицы.

image

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

  1. В поле нужно написать "{{", будет подставлена переменная, в ней нужно выбрать "body". После этого в настройках справа от поля нужно отключить режим "Smart field inputs".
  2. image
    🤷
    Тут важно сначала вставить переменную в поле, а затем отключать режим "Smart field inputs", в другой последовательности оно не сработает.
  3. Теперь к "body" нужно дописать путь к содержимому поля. Чтобы вместо "{{body}}" было "{{body.order.fields_by_name.Название города}}".
  4. То же самое для каждого поля проделать.

В итоге должно получиться такое:

image

Нажимаем "Save" и переходим в отладчик сценария. В сценариях Directual есть удобная возможность запустить сценарий для определенной заявки, полученной вебхуком.

image

Вводим Object ID вебхука в поле и нажимаем стрелочку справа от поля.

Где взять Object ID?
image

Теперь нужно проверить, что сценарий сработал верно. Открываем таблицу "Города" и смотрим, появилась ли наш новый город в таблице:

image

Публикуем сценарий, чтобы все новые заявки им обрабатывались. Для этого есть кнопка "Publish draft".

image

Переход на страницу нового объекта

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

В настройках поля "Название города" нужно указать название переменной.

image

В настройках формы указать действие после отправки "Сообщение + Перенаправление".

image

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

image

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

TODO: ожидание ответа вебхука и синхронные сценарии

Изменение существующих записей в таблице

В Directual есть кубик “Edit object”, который может изменять только запись базы данных, создание или изменение которой вызвало сценарий. В случае со сценарием вебхука это специально созданная для вебхука таблица вроде ExampleWebHookData, а в целях сценария нам нужно менять объект из другой таблицы.

Для этого нам нужно в контекст сценария (в настройках блока Start) добавить переменную с типом link, то есть ссылку на другую таблицу.

image

В sysName указать название переменной, Field name более читаемый вариант. В Type указать link, и в появившемся поле Link справа выбрать таблицу, изменение в которой будет осуществляться.

image

Теперь в самом сценарие нам нужно в эту переменную поместить ссылку на запись, с помощью кубика “Find object”. В его настройках мы указываем, что сохранить результат нужно именно в эту переменную контекста.

image

Теперь переходим в настройки кубика “Edit object”. Нас интересует поле “Choose the field to edit”. В нем в списке полей в самом низу есть “Context Variables”, в котором хранится ссылка на запись из таблицы, которую мы теперь можем модифицировать.

image

Работа с пользователями

Пользователи на Creatium (members) и пользователи на Directual (app users) это разные сущности, не связанные друг с другом. Creatium реализует свой собственный механизм регистрации, авторизации пользователей и ограничения доступа к разным разделам сайта. Но данные этих пользователей все равно хранятся на стороне Directual.

Подключение

Нужна новая таблица Пользователи (members) в разделе Database.

image

Добавим поля "Имя" и "Почта". Пароль добавлять не нужно, он обрабатывается на стороне Creatium.

image

Так же нужно добавить ендпоинт для доступа к данным пользователей со стороны Creatium.

image

Нужно добавить фильтр в "Coding mode", и вставить следующий код:

image
Код для копирования

Менять код не нужно, он прямо в таком виде заработает.

Этот ендпоинт нужно подключить к Creatium в разделе "База данных".

image

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

image

Регистрация

Теперь мы можем добавить на сайт форму регистрации. В ней может быть любое количество полей, обязательные только 2 — Почта и Пароль. На текущий момент регистрация на Creatium осуществляется только с помощью почты и пароля.

image

В настройках формы нужно указать действие "Регистрация + Заявка", и саму форму назвать "Регистрация".

image

Теперь нам нужно настроить отправку данных пользователя в Directual. Для этого на стороне Directual нужно создать вебхук.

image

Назовем его "signUp". Появится новый вебхук, и для него автоматически будет создан сценарий. Откроем этот сценарий и добавим туда действие "Create object".

image

В настройках действия нужно указать таблицу "Пользователи" и поставить галочку "Set ID manually (may be applied for linking with an existing object)".

image

В поле "Set the ID of the object" нужно вписать "{{body.member.id}}", отключив режим поля "Smart fields input". Делайте точно в последовательности, как на гифке.

image

Во вкладке "Fields mapping" добавляем содержимое полей из формы в поля таблицы.

image

Сохраняем действие, публикуем сценарий.

Теперь открываем Creatium, добавляем вебхук в разделе "Интеграции и уведомления". Тут очень вижно указать:

  1. Тип запроса: POST
  2. Тип отправляемых данных: raw
  3. Заголовки: Content-type: application/json
  4. Нужно отметить галочку "Отправлять все значения"
image

После сохранения будет создан сценарий на Creatium, его нужно открыть для редактирования.

image

В настройках сценария нужно отметить галочку "При выполнении всех условий" и указать название формы "Регистрация".

image

Сохраняем. Так вебхук отправляться будет только с формы регистрации, и ни с каких других форм.

Данные пользователя

Если все настроено верно, то зарегистрированные пользователи будут отображаться в редакторе на панели "Данные" → "Пользователи", и между ними можно будет переключаться прямо в редакторе.

image

Данные пользователя можно использовать в любом месте страницы в тексте и картинках.

image

В режиме "Гостя" данные не отображаются. В редакторе показывается название поля на красном фоне, а в публикации в этом месте будет просто пустая строка.

image

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

image

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

image

При переключении между режимами гость/пользователь или между отдельными пользователями, редактор сразу показывает, какие элементы будут скрыты, а какие показаны.

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

Авторизация, выход из аккаунта

Форма авторизации настраивается проще, чем форма регистрации. Нужно 2 поля - почта и пароль, а в "Действие формы" нужно выбрать "Авторизация". Больше ничего не нужно.

image

Кнопка выхода из аккаунта тоже просто настраивается. Это обычная кнопка с действием "Выйти из аккаунта".

image

Изменение почты пользователя

Нужна форма с действием "Изменение почты пользователя". В ней нужно 2 поля - пароль и почта, с указанными соответствующими типами. Для изменения почты аккаунта обязательно нужно вводить и текущий пароль.

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

Изменение пароля пользователя

Для изменения пароля нужна форма с действием "Изменение пароля пользователя". В форме должно быть 3 поля - почта, старый пароль и новый пароль. Название формы в данном случае роли не играет, можно его любым оставить.

image

Чтобы Creatium мог понять, где старый, а где новый пароль, а где новый, нужно указать ID полей "current_password" и "new_password".

image
image

Восстановление забытого пароля

Тоже форма со специальным действием "Запрос на восстановление пароля". В форму достаточно поместить только одно поле с паролем. В действии после отправки лучше указать "Сообщение + Перенаправление", и создать еще одну страницу, на которой пользователю нужно будет ввести полученный на почту код.

image

Текст письма о восстановлении пароля можно изменить в личном кабинете в разделе "Пользователи" → "Настройки".

image

На второй странице, куда будет перенаправлен пользователь, нужно разместить еще одну форму с действием "Восстановление пароля по коду".

image

В этой форме должно быть 2 поля - текстовое поля для ввода кода подтверждения, отправленного на почту, и поле для ввода пароля. ID первого поля обязательно должно быть "confirmation_code".

image

Разные роли пользователей

Для работы с разными ролями в таблице пользователей нужно создать поле, в котором будет храниться название роли этого пользователя. И далее в зависимости от роли можно скрывать или показывать разные секции или компоненты в редакторе.

Номер пользователя в вебхуках

В структуре данных вебхука, отправляемого в Directual, всегда есть поле member.id, в котором указан номер пользователя. Если member.id равен 0, значит пользователь не авторизован, и работает с сайтом в качестве гостя.

Личный кабинет

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

Доступ к любой странице (а вместе с ней и ко всем вложенным страницам) ограничивается в ее настроках во вкладке "Доступ".

image

В поле "Адрес перенаправления" нужно вписать адрес страницы с формой авторизации. Эта страница не должна находиться внутри личного кабинета, иначе это вызовет бесконечную переадресацию.

В редакторе есть возможность создать страницу с боковой и верхней панелью. Для этого есть специальная секция.

image

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

Использование совместно с другими источниками данных

Ничто не мешает использовать Directual вместе с другими источниками данных, которые поддерживает Creatium. Например, каталог товаров может храниться в Google Таблицах, а комментарии к товарам или история заявок в Directual, и таким образом может достигаться более экономное использование Directual в отдельных случаях.

Тариф и стоимость

Любой тариф Directual можно подключить, даже бесплатный.

На Creatium минимальная стоимость тарифа - 1200 рублей (600 рублей сайт, 100 рублей интеграции и 500 подключение к Directual). При этом подключить к сайту можно любое количество таблиц любого размера.

За пользователей берется отдельная плата: 100 рублей за 100 активных пользователей в месяц.

Если у вас на проекте 800 регистраций в месяц и еще 200 старых активных пользователей (пользователь считается активным, если была хотя бы 1 сессия за месяц), то это +1000 рублей в месяц к тем 1200, что упомянуты выше

Автоматически сгенерированные страницы по шаблону считаются как 1 страница. То есть если в таблице 10 000 строк, на сайте генерируется 10 000 уникальных страниц, в рамках наших тарифов это все равно как 1 обычная страница будет считаться.