| Оглавление |
|---|
...
Setting up Mobile Application via with the plugin "MetaUI Demo Plugin "
| Информация |
|---|
Мобильное приложение можно приобрести тут You can buy Mobile Application at https://box.otcommerce.com/prices-and-promo или через менеджеров ОТ в вашем скайп-чате |
Как загрузить приложение в GooglePlay
or via OT managers in your skype chat |
How to download the application on Google Play
Detailed steps are described in Google instructionsПодробные шаги описаны в инструкции Гугла: https://support.google.com/googleplay/android-developer/answer/9859152?hl=ru
Где настроить приложение
Открываем админку ОТ и кликаем по пункту меню «Плагины»
В списке плагинов выбираем «Демонстрация MetaUI»
Если у вас нет в списке этого плагина, Зайдите на вкладку «Загрузить/Обновить» и установите плагин
Если в списке Загрузок тоже нет этого плагина, обратитесь в Поддержку или к вашему менеджеру в скайп-чате.
Дизайн приложения: логотип и цвета
Лучше всего сделать оформление такое же как на сайте Коробки ОТ, чтобы у покупателя в голове ваш сайт и мобильное приложение были одним магазином.
В разделе плагинов кликаем по плагину «Демонстрация MetaUI»
В списке доступных изменений ищем пункт «Настройка дизайна приложений»
Кликаем по нему мышкой и нажимаем кнопку «Открыть»
Логотип
Берем тот же самый логотип, что вы используете в Коробке ОТ и сохраняем его на ваш компьютер (если логотип у вас и так сохранен, пропускаем этот шаг).
Нажимаем на кнопку «Выбрать файл»
Логотип загрузится автоматически, когда вы выберете файл на компьютере. Чтобы логотип появился в приложении, нажимаем кнопку «Сохранить»
Цветовое оформление
Делает цветовое оформление 1 в 1 как у вашего магазина.
Переходим в админке в раздел «Конфигурация → Конструкция сайта → Тема дизайна»
Отсюда нам понадобятся цвета, которые мы запишем, чтобы настроить мобильное приложение.
Кликаем по цвету дизайна и записываем цифры RGB (если у вас есть брендбук и используется другая система цветов, используйте её)
Соотношение цветов в Коробке ОТ и в мобильном приложении
| Название полей в приложении | Название полей в Коробке ОТ |
|---|---|
| Вспомогательный цвет | Дизайн. Цвет 1 |
| Фоновый цвет | Цвет фона |
| Основной цвет | Дизайн. Цвет 2 |
| Цвет текста | Цвет текста |
| Цвет текста на фоне основного цвета |
Цвета в приложении для наглядности будут обозначены ярко-синим цветом
| Вспомогательный цвет | Фоновый цвет | Основной цвет |
|---|---|---|
| Первый цвет кнопок, нижнее меню | Фон страниц приложения | Второй цвет кнопок |
Когда все цвета выписаны, начинаем редактировать мобильное приложение. Кликаем по полю первого цвета
Записываем цвет в формате RGB
Если у вас формат не RGB, переключаем на нужный формат с помощью стрелочек
После выбора цвета, нажимаем кнопку «Сохранить»
Так по очереди делаем со всеми цветами
Если у вас в дизайне сайта есть фоновое изображение, можно его загрузить и сюда. Выбираем файл на вашем компьютере
Нажимаем кнопку «Сохранить»
Витрина
Настройка витрины помогает показать или скрыть определенные параметры товара, например, отзывы или ссылку на оригинал.
В разделе плагинов кликаем по плагину «Демонстрация MetaUI»
В списке доступных изменений ищем пункт «Настройка витрины»
Кликаем по нему мышкой и нажимаем кнопку «Открыть»
Выбираем вкладку «Мобильно приложение»
Проходим по списку и выбираем скрыть или показать параметры товаров.
Чтобы скрыть или показать, кликаем по настройке под названием, чтобы появился выпадающий список
В выпадающем списке выбираем показать или скрыть
Нажимаем кнопку «Сохранить»
Баннеры
В разделе плагинов кликаем по плагину «Демонстрация MetaUI»
В списке доступных изменений ищем пункт «Настройки баннеров»
Кликаем по нему мышкой и нажимаем кнопку «Открыть»
Здесь есть список всех баннеров, которые были установлены для мобильного приложения. Чтобы добавить баннер, нажимаем кнопку «Добавить».
Справа от названий баннеров появится форма, которую необходимо заполнить.
Добавляем название баннера. Кликаем по названию по умолчанию (banner)
Пишем название
Нажимаем кнопку «Сохранить»
Загружаем изображение (сам баннер). Нажимаем кнопку «Выбрать файл» и выбираем файл на вашем компьютере.
Нажимаем кнопку «Сохранить»
Теперь решаем куда будет вести баннер. Можно задать ссылку, которая направит покупателя на ваш сайт или указать категорию в каталоге. Рассмотрим оба варианта по порядку.
Баннер со ссылкой
В списке «Действия» выбираем ссылку, нажимаем «Сохранить»
В поле «Параметр действия» вставляем ссылку
Нажимаем «Сохранить»
Баннер с категорией
В списке «Действия» выбираем «Категория» и нажимаем «Сохранить»
В поле «Параметр действия» пишем id категории. Чтобы получить id открываем категорию на вашем сайте и смотрим ссылку. Копируем otc-8929 (у вас будет свой id)
Вставляем скопированный id в поле «Параметр действия» и нажимаем «Сохранить»
Самое главное действие: выбираем где будет показ баннера. Из списка справа кликаем по «Мобильное приложение»
Нажимаем кнопку «Добавить»
Нажимаем кнопку «Сохранить» и баннер появится в вашем мобильном приложении
Подборки
В разделе плагинов кликаем по плагину «Демонстрация MetaUI»
В списке доступных изменений ищем пункт «Настройки подборок»
Кликаем по нему мышкой и нажимаем кнопку «Открыть»
Выбираем вкладку «Мобильное приложение»
Добавить
По умолчанию уже стоят подборки. Если необходимы другие, в списке справа выбираем подборки
Нажимаем на кнопку «Добавить»
Нажимаем на кнопку «Сохранить»
Поменять местами
Если есть необходимость поменять местами подборки, наводим мышку на крест со стрелочками слева от названия подборки
Зажимаем мышку и перетаскиваем подборку куда необходимо
Нажимаем на кнопку «Сохранить»
Удалить
Нажимаем на крестик справа от названия подборки
Подборка не удаляется, а перемещается в список справа, поэтому, при желании, ее можно будет вернуть на главную страницу
Настройка подборок
Ниже на странице все подборки собраны в общую форму и каждой из ни можно задать 2 параметра:
- количество товаров в подборке
- включить или выключить случайный поиск
Рекомендуется оставить без изменений. Однако если изменения необходимы, то выбираем кликом мышки подборку, которую надо изменить.
Задаем количество элементов от 1 до 100 (чем меньше тем быстрее грузится главная страница, однако меньше 4-6 шт лучше не ставить.
Нажимаем кнопку «Сохранить»
Выбираем включить или выключить случайный поиск
Where to configure application
Open admin panel and click "Plugins"
Select "Demonstration MetaUI"
Go to "Download/Update" tab and install the plugin if you don't have it in the list
Contact technical support or your manager in Skype chat if downloads list does not include this plugin either.
Application design: logo and colors
It is better to make application design similar to your website. Thus, the application and the site will be interconnected in customer's head.
Click "Demonstration MetaUI" in Plugins section
Find "Applications design settings"
Select it and click "Open" button
Logo
Take the same logo that you use in your OT Box based website and save it to your computer (skip this step if you've already saved the logo).
Click "Select file"
Logo will download automatically when you select the file on your computer. Click "Save" button to add logo into application
Color design
Makes color design 1 in 1 like your store.
Go to "Configuration → Website configuration → design theme"
From here we will need the colors that we will record to configure the mobile application.
Click design color and write RGB digits (use another color system if you have a brand book and use a different color system)
| Fields names in application | Fields names in OT Box |
|---|---|
| Auxiliary color | Design. Color 1 |
| Background color | Background color |
| Primary Color | Design. Color 2 |
| Text color | Text color |
Text color on background of primary color |
Colors in the application will be marked with bright blue for clarity.
| Auxiliary color | Background color | Primary Color |
|---|---|---|
| Buttons first color, bottom menu | Application pages background | Buttons second color |
Start editing the mobile application when all the colors are written out. Click the field of the first color
Write color in RGB format
Switch to necessary format using the arrows if your format is not RGB
Click "Save" button after selecting color
Do it with all the colors in turn.
If you have a background image in your website design, you can upload it here as well. Select file on your computer
Click "Save" button
Showcase
Configuring showcase helps to show or hide certain product parameters, such as reviews or a link to the original.
Select "Showcase settings" in the list of available changes
Select it and click "Open" button
Select "Mobile Application" tab
Go through the list and select hide or show product parameters.
Click setting under the name to hide or show. Drop-down list will open.
Select to show or hide in drop-down menu
Click "Save" button
Banners
Select "Demonstration MetaUI" plugin in Plugins list
Select "Banners settings" in the list of available changes
Select it and click "Open" button
Here is a list of all the banners that have been installed for the mobile application. Click "Add" to add a banner
To the right of the banner names there will be a form that must be filled in.
Add banner name. Click default name (banner)
Write title
Click "Save" button
Download picture (banner). Click "Select file" and select file on your computer
Click "Save" button
Banner with a link
Select URL in "Actions" list and click "Save"
Insert URL into "Action parameter" field
Click "Save"
Banner with category
Select "Category" in "Actions" list and click "Save"
Write id category into "Parameter" field. Open category on your site and view link to get id. Copy otc-8929 (you will have your id)
Paste id into "Parameter" field and click "Save"
The most important action: select where to show the banner. Click "Mobile application" in the list on the right
Click "Add" button
Click "Save" button and banner will appear in your mobile app
Collections
Click "Demonstration MetaUI" plugin in Plugins list
Find "Collections settings" in the list of available changes
Select it and click "Open" button
Select "Mobile application" tab
Add
There are collections by default. Select collections from the list on the right if you need others
Click "Add" button
Click "Save" button
Swap
Point the mouse to the cross with arrows to the left of collection name if there is a need to swap the collections
Press the mouse and drag the collection where necessary
Click "Save" button
Delete
Click the cross to the right of the collection name
Collection is not deleted, but moved to the list on the right, so if you want, you can return it to the main page
Collections configuration
Below on the page, all collections are collected in a common form and each of them can be set with 2 parameters:
- number of items in collection
- enable or disable random search
It is recommended to keep unchanged. However, you can click collection you want to change if changes are necessary .
Set the number of elements from 1 to 100 (the smaller the faster the loading of the home page, but less than 4-6 pcs it is better not to put.
Click "Save" button
Choose to turn on or off random search
Click "Save" buttonНажимаем кнопку «Сохранить»