Top.Mail.Ru

Мобильное PWA-приложение для магазина

Вы можете создать мобильное PWA-приложение для своего интернет-магазина на InSales с помощью сервиса mobsted.ru

PWA (Progressive Web Application) – технология, которая позволяет покупателям установить сайт на смартфон как приложение. PWA-приложение не нужно размещать в AppStore или Google Play, оно устанавливается напрямую с вашего сайта.

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

Демо-сайт: https://www.examplepwashop.xyz/

Видео-демонстрация установки и работы приложения:

Видео-демонстрация настройки:

Содержание:

  1. Регистрация в mobsted.ru
  2. Создание приложения
  3. Установка скриптов для вызова приложения на сайт
  4. Добавление приглашений к установке PWA-приложения на сайте
  5. Добавление на сайт элементов, по которым можно вызвать приглашение для установки PWA-приложения
  6. Настройка дизайна приглашений к установке
  7. Рекомендуемые точки вызова приглашений и дополнительные способы вызова приглашений

Регистрация в mobsted.ru

Перейдите на сайт mobsted.ru и нажмите "Регистрация" в верхнем меню.

В форме введите ваши данные. Используйте действительное имя и почту, иначе вы не сможете получить аккаунт.

В течение 3 минут на ваш email придет письмо с данными для входа в личный кабинет сервиса.

Создание приложения

1. На первой странице в личном кабинете нажмите зеленую кнопку "Create new Application".

2. Во вкладке "Settings" включите тумблер для перевода приложения в режим PWA-конвертера.

3. Заполните обязательные данные для приложения.

Website URL обязательно с https-протоколом. Если у вас не подключен SSL-сертификат, то сначала подключите SSL.

Application name – название вашего приложения при установке. Его будут видеть ваши покупатели в диалогах установки приложения, поэтому указывайте "Application name" со смыслом.

Icon title – название иконки приложения. Выводится вместе с иконкой приложения после установки на устройство. Чаще всего указывают домен или короткое название сайта.

Icon image – иконка вашего приложения. Формат PNG, разрешение 512x512 px.

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

Установка скриптов для вызова приложения на сайт

1. В личном кабинете Mobsted перейдите во вкладку "ACCESS INFO" и выберите 3-ий вариант "Branded PWA JS Capsule".

2. Скопируйте скрипт ниже из блока "JS snippet to frontend".

3. Перейдите в бэк-офис вашего сайта на InSales.

4. В разделе "Дизайн" откройте редактор кода шаблона сайта.

5. В разделе "Сниппеты" найдите сниппет "head" или другой, отвечающий за подключение внешних скриптов.

В конце кода сниппета добавьте скопированный скрипт.

6. Скачайте архив с еще 2-мя JS-скриптами СКАЧАТЬ

7. Извлеките из архива 2 файла: PWALessSDKWorker и PWALessSDKUpdaterWorker

8. Загрузите оба файла в бэк-офисе InSales в раздел Сайт → Файлы (или Контент → Файлы для старой навигации)

Добавление приглашений к установке PWA-приложения на сайте

1. В личном кабинете Mobsted во вкладке "ACCESS INFO" в блоке "App saving widgets" перейдите к секции с виджетами.

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

2. Нажмите кнопку "Add New Widget", чтобы создать новый виджет.

3. Укажите название виджета и нажмите кнопку "Create New Widget".

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

4. Нажмите кнопку "Call this Widget", чтобы открыть код виджета и скопируйте код вызова данного виджета.

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

Добавление на сайт элементов, по которым можно вызвать приглашение для установки PWA-приложения

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

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

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

onclick="pwaless.showWidget('menu')"

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

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

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

1. Перейдите в редактор сайта Дизайн → Настроить.

2. В редакторе сайта откройте код шаблона шапки.

3. В коде шаблона добавьте код, который добавляет нужный элемент с событием вызова виджета.

4. Сохраните изменения и проверьте, что при нажатии на эту кнопку вызывается приглашение к установке приложения.

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

Настройка дизайна приглашений к установке

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

1. В личном кабинете Mobsted перейдите в раздел Widgets → PWA JS Capsule Widgets.

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

2. Нажмите на панель нужного виджета, чтобы попасть в его настройки.

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

Справа доступен предпросмотр виджета.

Примеры изображений для приглашений:

Рекомендуемые точки вызова приглашений и дополнительные способы вызова приглашений

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

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

Рекомендуемые точки вызова приглашений:

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

В редакторе кода в сниппете layouts.client_account.liquid перед закрывающим тегом </html> вставьте скрипт, который будет автоматически вызывать окно приглашения.

<script>window.addEventListener('load', function() {window.addEventListener('pwalessinited', function() {pwaless.showWidget('tracking');});});</script>

ВНИМАНИЕ: в скрипте, указан вызов виджета установки с названием "tracking".

2. В подвал магазина как дополнение к меню.

3. В каталоге, например, для отслеживания новых поступлений.

Остались вопросы?
Отправь тикет в техподдержку!
Еще нет своего магазина?
Создайте интернет-магазин на платформе InSales
Всё для продаж уже внутри!
Недавно просмотренные статьи