# Создание магазина в FlexCMS

Быстрая навигация:

* Создание группы узлов в конструкторе
* Создание узла с кнопкой каталога
* Создание магазина в FlexCMS
* Редактирование магазина в FlexCMS
* Контент магазина
* Проверка работоспособности магазина в мессенджере

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

Удобнее всего для этого создать отдельную группу узлов.

#### Создание группы узлов в конструкторе

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FfGzqr3yKVvXsn6TUqcoh%2F2977759281.png?alt=media&#x26;token=a39c22f8-ac28-46c5-aa27-c8bb9a6dd1ea" alt=""><figcaption></figcaption></figure>

Новой группе необходимо придумать название, например «Новый магазин»

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FJ7P5gWfOoAZqrx9Ha5iX%2F2978152449.png?alt=media&#x26;token=5576d1ed-0d99-47af-bcbe-e2ee4dcecb33" alt=""><figcaption></figcaption></figure>

В списке групп узлов появится новая группа «Новый магазин», нажав «Редактировать» откроется конструктор.

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FJTIKcTSwgfliFDNXAlAJ%2F2977955857.png?alt=media&#x26;token=3b7bf9b8-d7b0-4e60-9091-737cecb01da0" alt=""><figcaption></figcaption></figure>

В конструкторе создаём 5 узлов как в примере ниже или со своими названиями.

Для узла «Создание переменной для корзины» необходимо поставить “звёздочку”, т.к. данный узел будет использоваться в Чат-центре операторами. Если этого не сделать, то операторы не смогут вручную открывать магазин для пользователей.

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FPu7DMgFglUkfAs5PpJS7%2F2977955863.png?alt=media&#x26;token=cd96fb15-0ec9-428f-ac67-6d6c2ad713cd" alt=""><figcaption></figcaption></figure>

В узел при успешном оформлении для примера добавили текст сообщения «Успех!» Его увидит клиент, который выберет товар и подтвердит продолжение покупки в мессенджере.

Текст данного узла можно заменить в соответствии с вашим бизнес-сценарием:

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

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2Fo0gc3XPd2TgtP3XaTN5o%2F2978086921.png?alt=media&#x26;token=dca94a13-efea-4610-9db8-5afa2f011066" alt=""><figcaption></figcaption></figure>

> **Примечание:** По умолчанию переменной для создания корзины нет, её нужно создавать

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

```
{% save_variable "cart_var_name" "my_cart" %}
{% switch "имя узла с кнопкой каталога" %}
```

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FYNU3DWsLSCdhDPHuKUaR%2F2977759287.png?alt=media&#x26;token=4093c19f-aee1-4782-89d9-e34ddecee8ed" alt=""><figcaption></figcaption></figure>

Узел с кнопкой каталога.

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FTRBLp0VBaoIGs9tYDiKf%2F2977759293.png?alt=media&#x26;token=4951e7c3-798a-4222-b393-28f93bf673ec" alt=""><figcaption></figcaption></figure>

#### Создание узла с кнопкой каталога

> **Примечание:** Если ещё не создан магазин в FlexCMS, то идентификатора магазина ещё нет и нужно открыть FlexCMS и создать магазин.

Данные, которые нужно внести из FlexCMS в конструктор:

(1) Идентификатор магазина в FlexCMS называется ID

(2) Ссылка на магазин которую нужно вставить в конструкторе (на вашем аккаунте будет иметь вид <https://имя-вашего-бота.flex.fstrk.io>

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FKgtNpo1jDKLPzxxbAuj7%2F2977759301.png?alt=media&#x26;token=d1a067df-b826-4b20-bbd6-47a26a6e7209" alt=""><figcaption></figcaption></figure>

Помимо идентификатора и ссылки нужно обязательно заполнить поля «Название» для кнопки и «Переменная корзины пользователя».

Узел очищения корзины указывать не обязательно.

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FKbsMx3dtJLi9MGoHVCOK%2F2978152455.png?alt=media&#x26;token=9ed9072c-8c4d-43f5-a136-96fce5d832d0" alt=""><figcaption></figcaption></figure>

#### Создание магазина в FlexCMS

Если ранее на вашем аккаунте в Flex не было созданных магазинов, то экран будет иметь вид как на скриншоте ниже.

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2F0eFzQg5CslOQDjtCS10G%2F2978054149.png?alt=media&#x26;token=fdac0929-eaed-40c1-9a4d-45f3b09ca5f0" alt=""><figcaption></figcaption></figure>

Нажав на кнопку «Создать» откроется выпадающий список с вариантами для будущего магазина.

Имеется как ручной вариант, так и варианты с различными шаблонами.

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FsEZXgvRiCO0wghnfLu5H%2F2977759313.png?alt=media&#x26;token=5e2eb9b8-5640-4c1b-a51a-5dfb9ce57ee9" alt=""><figcaption></figcaption></figure>

Для примера мы выбрали Магазин с одним каталогом и одним типом товара.

Ниже представлен вид экрана после создания магазина.

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FW7N3blPpKRi3FDpnJrOe%2F2978152463.png?alt=media&#x26;token=b4e3d7d6-735b-41d7-83aa-3f03b483e6fc" alt=""><figcaption></figcaption></figure>

Для его настройки и редактирования необходимо нажать на кнопку «Действия»

#### Редактирование магазина в FlexCMS

У кнопки «Действия» выбрать вариант «Редактировать»

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2Fn9abCwxHusoIXysMjJQG%2F2978086929.png?alt=media&#x26;token=030329a9-db22-4d0a-a9dc-d35d8ef6c43e" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2Fm3vItU4LOCucQ0b24YqV%2F2977955903.png?alt=media&#x26;token=1e1351b8-a3cf-417f-ba90-2218b9f08d23" alt=""><figcaption></figcaption></figure>

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

Подробнее о некоторых опциях.

Покупка в 1 клик - это покупка без корзины.

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

Сортировка по полю приоритета - предполагает цифровые значения от 1 и выше. Цифры могут быть одинаковыми. Например пять товаров с приоритетом 1, три с приоритетом 2 и т.д.

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FxWQSB49Nf4uY1QKCsEfh%2F2977955909.png?alt=media&#x26;token=a7f821f1-ca97-48ae-8e54-a0935c1d3267" alt=""><figcaption></figcaption></figure>

Дизайн категорий и товаров можно выбирать.

Для дизайна категорий и для дизайна списка товаров есть по 3 варианта.

Их можно выбирать в разных сочетаниях. Не обязательно 1 и 1 или 2 и 2, можно 1 и 3, 2 и 1, 3 и 2 и т.д.

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FklfWj48auQVjm8fFYFpV%2F2978086963.png?alt=media&#x26;token=6cd42d35-d1b8-427e-b00a-1ce6cf174ed2" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FZBDW0rX4eHiWvGiUalmj%2F2978021410.png?alt=media&#x26;token=33ba956b-828d-46b9-ac44-119ea15c173d" alt=""><figcaption></figcaption></figure>

#### Контент магазина

Магазин с каталогом создаётся автоматически в контенте, если мы ранее выбирали соответствующий шаблон при создании магазина. Так же создаётся 3 категории и в каждой шаблоны 6 товаров с стандартными названиями, без картинок.

Все товары и категории можно редактировать и подстраивать под ваш ассортимент.

Если при создании магазина выбиралось ручное создание магазина (без использования шаблонов), то категории и товары не будут созданы.

Для ручного создания категорий нажмите на кнопку «Новая категория».

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FL0BVUV8woLWr2F28q7y2%2F2977955869.png?alt=media&#x26;token=1242eb9e-62bb-4298-aba1-e445fb4c2b5b" alt=""><figcaption></figcaption></figure>

В меню создания категории нужно выбрать «Родительская категория контента» - Магазин с каталогом, а в «Структура контента» - Товар. Не забудьте дать название новой категории и товарам. Например «Печеньки»: «Печеньки с маком», «Печеньки с шоколадом», «Овсяные печеньки».

В FlexCMS многие шаги требуют сохранения, не забывайте сохраняться

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2ForbVM8PcqqKifjpGmRH1%2F2977890384.png?alt=media&#x26;token=2760138f-f439-4174-9bb9-47cf7e620a2f" alt=""><figcaption></figcaption></figure>

#### Проверка работоспособности магазина в мессенджере

На примере социальной сети VK

Ваш бот должен быть подключен к VK, подробнее как это сделать, можно почитать тут

[Подключение VK](https://fasttrack-docs.atlassian.net/wiki/spaces/developers/pages/2698870804)

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2Ft3D61YMr2ya76tryRHjY%2F2977759307.png?alt=media&#x26;token=ad66686e-26b3-40dc-9ae0-10f9a995e2ac" alt=""><figcaption></figcaption></figure>

Если приложение магазина случайно было удалено из сообщества ВК,

то его всегда можно найти в [нашей группе Вконтакте](https://vk.com/fstrkbot)

Чтобы у пользователя появилась кнопка ведущая в магазин мы предварительно в сценариях Чат-центра отправили пользователю узел «Создание переменной для корзины»

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FjdwaxJqoRZyH6q3JTB1N%2F2978185239.png?alt=media&#x26;token=16d5e5bf-919c-4dc1-85af-34efe2872a4e" alt=""><figcaption></figcaption></figure>

Нажав на неё пользователь попадает в каталог с категориями.

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FWJup0bTbmMjlZlJ8YlKw%2F2978185231.png?alt=media&#x26;token=039e1276-5fc2-45f7-b7a6-4d8654134db5" alt=""><figcaption></figcaption></figure>

Выбрав одну из категорий, например первую, он попадает в список товаров данной категории.

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FDlVHn4WGGvFhSJiMq8gj%2F2977955881.png?alt=media&#x26;token=828ecd5e-e4e9-4c76-b094-de5845ea68f9" alt=""><figcaption></figcaption></figure>

По нажатию кнопки «Выбрать» пользователю откроется окно подтверждения.

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FeGdkZJVqmY4rHCJzkqwh%2F2978054163.png?alt=media&#x26;token=b9d4d625-8573-4e5d-88bd-9b0f0daa4de5" alt=""><figcaption></figcaption></figure>

В этом окне нажав «Подтвердить» он перейдёт в мессенджер и если всё успешно, то он должен получить сообщение из узла «Узел при успешном оформлении». В нашем случае, для примера добавляли текст сообщения «Успех!»

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FVV0lPl3b8uQKJTQQKCZp%2F2978054155.png?alt=media&#x26;token=3bb67939-0308-47ca-9910-4d14af4d7fc4" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1710238474-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F15Vbfdlj1toq4QxXgBym%2Fuploads%2FZQWwFrgYn8XzVk7fyC3K%2F2978185225.png?alt=media&#x26;token=04ad2438-a748-4b06-8423-52a619e2e0a8" alt=""><figcaption></figcaption></figure>