- Платформа PARTS SOFT /
- Возможности /
- PWA: настройка и установка мобильного приложения
PWA: настройка и установка мобильного приложения
Теперь ваш магазин можно сделать ещё удобнее для клиентов — с помощью мобильного приложения.
Приложение настраивается прямо в панели администрирования: вы можете оформить его в стиле своего магазина и задать необходимые параметры.
После активации приложения клиентам, которые открывают личный кабинет с мобильного устройства, будет предложено установить приложение. После установки клиент сможет заходить в ваш магазин прямо со смартфона и пользоваться сайтом в удобном формате мобильного приложения.
Тарифы:
- 3 900 ₽/мес. — при ежемесячной оплате;
- 2 900 ₽/мес. — при оплате за год.
Настройка мобильного приложения
Чтобы перейти к настройке мобильного приложения, выполните следующие действия:
ШАГ 1. В панели администрирования перейдите в раздел Сайт → Сайт → Параметры PWA приложения.
ШАГ 2. На открывшейся странице задайте параметры вашего приложения в следующих разделах:
Настройки доступа
Выполните следующие действия:
- Активно —активируйте опцию, чтобы приложение стало доступно для работы;
- Приложение доступно клиентам — если требуется, выберите конкретных клиентов, которым будет доступно приложение. Остальным клиентам приложение будет недоступно.
Если оставить это поле пустым, приложение будет доступно всем клиентам.
Настройки доступа
Базовые настройки
Выполните следующие действия:
- В поле Название приложения — укажите полное название приложения;
- В поле Короткое название — укажите краткое название приложения, которое будет отображаться на смартфоне;
- Убедитесь, что включена отправка PUSH-уведомлений клиентам;
- Нажмите кнопку Перейти в настройки сервиса, чтобы настроить отправку уведомлений клиентам.
Настройки PWA. Базовые настройки
Задайте настройки сервиса отправки уведомлений:
| № | Название настройки |
Описание |
|---|---|---|
| 1 | Название |
Укажите название, под которым сервис будет отображаться на платформе. |
| 2 | Регион |
Выберите регион, в котором будет доступен сервис. Если оставить это поле пустым, сервис будет доступен во всех регионах. |
| 3 | Приоритет |
Выберите уровень приоритета сервиса. При значении 1 система будет пытаться в первую очередь отправить сообщение через сервис, затем — через подключенные SMS-сервисы, если для них настроены соответствующие значения приоритета 2, 3 и т.д. Если для оповещений у вас подключен и активен Универсальный сервис, система в первую очередь будет пытаться отправить сообщение через него, а уже после через другие сервисы, согласно заданным уровням приоритета. |
| 4 | Активен |
Активируйте опцию, чтобы сервис стал доступен для работы. |
| 5 |
Доступен для выбора клиентом |
Активируйте опцию, если требуется, чтобы при оформлении заказа в своем личном кабинете клиент мог выбрать данный сервис для получения уведомлений. |
| 6 | Иконка сервиса |
Загрузите иконку, которая будет отображаться для данного сервиса. Иконка будет отображаться как в панели администрирования, так и в клиентской части. |
Нажмите кнопку Сохранить.
Настройки сервиса отправки уведомлений
После этого настроенный сервис будет отображаться в списке сервисов отправки уведомлений в разделе Служебные → SMS и мессенджеры → Сервисы, а ваши клиенты смогут получать уведомления в более удобном формате.
PUSH-уведомление
Иконки
В данном разделе можно загрузить логотип вашей компании и настроить его отображение в разных размерах. Загрузить логотип можно:
- с помощью автогенерации
- вручную — полезно, если для разных форматов вы используете разные изображения или вы не уверены, что иконки, сгенерированные автоматически, будут отображаться корректно во всех форматах.
С помощью кнопки Быстрая настройка иконок можно загрузить один логотип. Иконки в остальных необходимых размерах и изображение splash screen будут сгенерированы автоматически.
В форме конструктора иконок загрузите ваш логотип, расположите его внутри синего круга, настройте масштаб, центрирование и фон логотипа. Ознакомьтесь со сгенерированными логотипами разных размеров и нажмите кнопку Применить.
Быстрая настройка иконок
Чтобы загрузить иконки вручную, подготовьте логотипы требуемых размеров и загрузите их в соответствующих полях с помощью кнопки Загрузить.
Требуются иконки следующих размеров:
- Apple (120x120, старые iPhone)
- Microsoft (144x144, msapplication)
- Apple iPad (152x152)
- Apple iPhone (180x180)
- Основное (192x192, прелоадер)
- Крупное (512x512, Android splash)
Актуальный размер иконки должен соответствовать требуемому!
Настройки PWA. Иконки
Настройка страниц
Перед настройкой разделов приложения необходимо сначала создать и настроить страницы, которые будут доступны вашим клиентам в приложении.
Чтобы настроить страницу, выполните следующие действия:
ШАГ 1. В панели администрирования перейдите в раздел Сайт → Меню сайта и нажмите кнопку Создать.
ШАГ 2. На открывшейся странице задайте следующие параметры:
| № | Название настройки |
Описание |
|---|---|---|
| 1 | Название |
Укажите название, под которым страница будет отображаться в бургер-меню. |
| 2 | Код меню |
Укажите код, под которым страница будет отображаться в шаблоне. Допустимы только латинские буквы (a-z). |
| 3 | Тип меню |
Выберите вариант Мобильное приложение (PWA). Страница типа Мобильное приложение (PWA) не отображается на сайте и в каталоге — не переключайте тип у меню, которое используется в шаблонах сайта. |
| 4 |
Тип отображения |
Выберите формат отображения элементов страницы в приложении:
В режимах Карточки отображаются только пункты верхнего уровня (без вложенных). Настройка действует как на главном экране, так и в бургер-меню. |
| 5 |
Показывать заголовок блока |
Активируйте опцию, если требуется, чтобы в бургер-меню отображался заголовок страницы, указанный в поле Название. |
| 6 | Активность меню |
Активируйте опцию, чтобы страница стала доступна для последующей настройки. |
Нажмите кнопку Создать.
Настройки PWA. Параметры страницы
ШАГ 3. В блоке Конструктор карточек нажмите кнопку Открыть конструктор.
Выберите размер карточек, которые будут отображаться на странице, и нажмите кнопку Сохранить раскладку.
Настройки PWA. Переход в конструктор карточек
Настройки PWA. Конструктор карточек
ШАГ 4. Нажмите кнопку Добавить элемент, чтобы перейти к наполнению страницы.
Настройки PWA. Переход к настройке элемента карточки
На открывшейся странице задайте параметры элемента (карточки), который будет отображаться на странице:
| № | Название настройки |
Описание |
|---|---|---|
| 1 | Название |
Укажите название, под которым элемент (карточка) будет отображаться на странице. |
| 2 | Описание |
Если требуется, добавьте описание карточки. Описание будет отображаться внутри самой карточки. |
| 3 | Тип ссылки |
Выберите, на какой объект будет перенаправляться клиент при нажатии на карточку:
|
| 4 | Категория каталога |
Выберите конкретный объект выбранного типа, на который будет перенаправлен клиент при нажатии на карточку. Список объектов соответствует типу, выбранному в поле Тип ссылки. Например, если выбран тип ссылки Категорийные каталоги (локальные), в данном поле будет отображаться список ваших локальных каталогов. Если выбран тип ссылки Внешняя ссылка, в данном поле вы сможете указать нужный URL. |
| 5 |
Регион |
Выберите регион, в котором будет доступна карточка. Если оставить это поле пустым, карточка будет доступна во всех регионах. |
| 6 | Открывать ссылку |
Выберите, в каком формате будет открываться ссылка при нажатии на карточку:
|
| 7 |
Язык |
Выберите язык, на котором будет отображаться текст карточки. |
| 8 |
HTML-атрибуты |
Если требуется, укажите HTML-атрибуты для лучшей кастомизации. |
|
9 |
CSS-стили для пункта меню | Если требуется, укажите CSS-стили пункта меню для лучшей кастомизации. |
| 10 |
Код (Только латинские буквы) |
Генерируется системой автоматически. Вы также можете указать код элемента страницы самостоятельно. |
|
11 |
Только для авторизованных пользователей | Активируйте опцию, если требуется, чтобы карточка была видна только клиентам, авторизованным на сайте. |
|
Карточка |
||
| 12 |
Ширина |
Выберите ширину (в %), которую будет занимать карточка в бургер-меню. |
| 13 |
Пропорция |
Выберите формат (соотношение сторон), в котором будет отображаться карточка. |
|
14 |
Режим изображения |
Выберите режим отображения карточки:
|
|
15 |
Позиция иллюстрации |
Используется, если в поле Режим изображения выбран вариант Иллюстрация (поверх фона).
Выберите режим отображения иллюстрации в карточке:
|
| 16 |
Цвет фона |
Выберите цвет фона карточки. Активируйте опцию Без цвета (как в теме), если требуется использовать фон по умолчанию. |
| 17 |
Цвет текста |
Выберите цвет текста, который будет отображаться внутри карточки. Активируйте опцию Без цвета (как в теме), если требуется использовать цвет текста по умолчанию. |
| 18 |
Положение текста |
Выберите вариант расположения текста в карточке:
|
| 19 |
Цвет подложки под текстом |
Выберите цвет подложки, на фоне которой будет отображаться текст внутри карточки. Активируйте опцию Без цвета (как в теме), если требуется использовать цвет подложки по умолчанию. |
| 20 |
Отступ подложки, px |
Если требуется, выберите значение внутреннего отступа (в пикселях) подложки от границ карточки. |
| 21 |
Скругление подложки, px |
Если требуется, выберите значение скругления углов (в пикселях) подложки. |
| 22 |
Изображение карточки |
Используется, если в поле Режим изображения выбран вариант Иллюстрация (поверх фона).
Загрузите иллюстрацию, которая будет отображаться в карточке. |
| 23 |
Выбрать иконку |
Если требуется, загрузите иконку карточки. Иконка будет отображаться в списке элементов страницы в панели администрирования, а также в приложении, в режиме Список. |
Нажмите кнопку Сохранить.
Настройки PWA. Параметры элемента страницы
После этого созданный элемент будет отображаться в списке элементов страницы.
ШАГ 5. Если требуется, чтобы на странице отображалось несколько элементов, добавьте их с помощью кнопки Добавить элемент.
После того, как все элементы будут добавлены, нажмите кнопку Изменить порядок и организуйте отображение элементов на странице: нажмите на элемент и, удерживая его, перетащите на нужное место. После этого нажмите кнопку Сохранить порядок.
Если вам понравилась созданная страница, вы можете добавить ее в клиентскую часть вашего сайта (если подобной страницы там еще нет). Для этого нажмите кнопку Миграция и выберите место отображения страницы на сайте.
Настройки PWA. Список элементов страницы
После создания всех необходимых страниц вы можете вернуться к настройкам PWA и перейти к настройке порядка разделов приложения в разделах Первый экран и Бургер-меню.
Первый экран
В данном разделе можно выбрать разделы, которые будут отображаться в мобильном приложении и расположить их в нужном порядке. В приложении разделы будут отображаться в заданной последовательности.
ШАГ 1. В поле Показывать выбор категорий выберите, будут ли отображаться категории в приложении.
Настройки PWA. Первый экран
ШАГ 2. Чтобы перейти к настройке разделов, нажмите кнопку Настроить главный экран.
В открывшейся форме задайте порядок отображения разделов в приложении: нажмите на значок с точками и, удерживая его, перетащите раздел на нужное место.
Если раздел не требуется, снимите флажок рядом с его названием. Название отключённого раздела будет отображаться серым цветом.
Помимо разделов по умолчанию, вы можете включить страницы, созданные вами в разделе Настройка страниц.
Нажмите кнопку Применить.
После завершения настройки разделов нажмите кнопку Сохранить, чтобы стала доступна настройка бургер-меню.
Настройки PWA. Первый экран
Настройки PWA. Первый экран
Бургер-меню
В разделе Бургер-меню настраивается меню навигации, которое открывается по кнопке с тремя горизонтальными линиями и позволяет перейти к нужным разделам приложения.
ШАГ 1. Активируйте опцию Показывать бургер-меню, если требуется, чтобы оно отображалось в приложении.
Настройки PWA. Бургер-меню
ШАГ 2. В блоке Настройка элементов бургер-меню нажмите кнопку Настроить главный экран, чтобы настроить порядок отображения страниц, которые вы создали в разделе Настройка страниц.
Настройки PWA. Переход к настройке бургер-меню
ШАГ 3. Отметьте страницы, которые должны отображаться в боковом бургер-меню, и задайте порядок их отображения: нажмите на значок с точками и, удерживая его, перетащите страницу на нужное место.
Нажмите кнопку Применить.
После завершения настройки нажмите кнопку Сохранить.
Настройки PWA. Настройки бургер-меню
Настройки PWA. Отображение страниц в бургер-меню формата Карточки: сетка
При нажатии на карточку, клиент будет перенаправлен на настроенный объект.
Настройка строки статуса
В данном разделе можно настроить цвета, используемые при отображении приложения: цвет фона приложения и цвет верхней системной панели устройства (статус-бара).
Для этого выберите нужные цвета или укажите их HEX-коды в полях Цвет фона и Цвет темы (статус бар).
Настройки PWA. Настройка строки статуса
Цветовая палитра PWA
В данном разделе можно настроить цветовую палитру приложения: основные и дополнительные цвета интерфейса, цвета фона, текста, кнопок, ссылок, меню, границ, системных состояний и других элементов оформления. Настроить цветовую палитру можно:
- с помощью собственного CSS-кода — вставьте код в поле CSS-палитра PWA;
- вручную — нажмите кнопку Редактировать цвета и в открывшейся форме настройте цветовую гамму вашего приложения. После этого нажмите кнопку Применить.
Настройки PWA. Цветовая палитра PWA
Настройка цветовой палитры
Кастомный CSS
В этом разделе можно добавить собственный CSS-код для настройки внешнего вида и оформления приложения.
Для этого вставьте код в поле Пользовательский CSS.
Настройки PWA. Кастомный CSS
Установка мобильного приложения
Клиент сможет установить приложение при открытии личного кабинета в мобильной версии сайта. При входе в личный кабинет появится всплывающее окно с предложением установить приложение.
Чтобы установить приложение в личном кабинете клиента, выполните следующие действия:
ШАГ 1. Войдите в личный кабинет и нажмите кнопку Открыть приложение. На открывшейся странице в окне Установить приложение нажмите кнопку Установить.
Установка мобильного приложения
ШАГ 2. В нижней части страницы нажмите кнопку Поделиться и выберите вариант На экран «Домой».
Установка мобильного приложения
ШАГ 3. При необходимости измените название приложения, под которым оно будет отображаться на устройстве, и нажмите кнопку Добавить.
После этого приложение появится на главном экране устройства.
Установка мобильного приложения
