OpenCart

Введение

В документе описан процесс установки и настройки плагина Мокка для CMS OpenCart, который значительно упрощает для партнёра процесс интеграции с сервисом Мокка. 

Модуль предназначен для установки OpenCart v.3 без значительных изменений.

Установка

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

1. Скачайте файл с модулем Мокка для OpenCart.

2. Зайдите в административный раздел вашего сайта, раздел «Модули/Расширения» –> «Установка расширений».

3. Нажимите «Загрузить» и  выберите ранее скаченный файл.

   *После загрузки вы сможете увидеть ваш архив модуля в списке:
   

4. Перейдите в раздел «Модули/Расширения» –> «Модификаторы».
5. Найдите в списке модификаторов «Мокка – оплата аванса» и поставьте галочку напротив модуля.
6. Нажмите кнопку обновить в правом верхнем углу.
7. Далее перейдите во вкладку «Система»  -> «Пользователи»  -> «Группы пользователей».       
8. Выберите пользователя «Администратор» и нажмите «Редактировать».
9. В появившемся окне выберите «Выделить все»  и нажмите «Сохранить».
10. Откройте во вкладку «Модули/Расширения» –> «Установка расширений».  В фильтре выберите «Оплата», список модулей обновится.
11. В списке модулей найдите «Мокка – оплата авансом» и нажмите «Активировать» в столбце «Действия» напротив модуля.

Настройка

1. Откройте страницу «Модули/Расширения»

2. В фильтре выберите «Оплата»

3. Найдите в списке  Мокка – оплата авансом», затем нажмите редактировать напротив модуля.

4. У вас откроется вкладка «Основное»

   Значения проставляются в соответствии с вашим договором:

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

   Остальные поля:

   • Страница заказов — ссылка на страницу заказов в панели администрирования. Генерируется автоматически и не предполагает редактирования.
   • Статус при котором отправлять отмену заказа — статус заказа, который отправляет в сервис Мокка информацию об отмене заказа.
   • Статус при котором отправлять финализацию заказа – статус заказа, при котором в сервис Мокка будет передана информация о финализации заказа. Обычно это статус, который проставляется после отгрузки или доставки заказа клиенту.
   • Статус после оформления заказа — статус заказа, применяемый к заказу после оформления, по которому еще не пришло решение Мокка, или клиент не закончил оформление.
   • Возврат финализированного займа — статус заказа, который отправляет в сервис Мокка информацию о возврате заказа.
   • Порядок сортировки – указывается числовое значение, обозначающее порядковый номер отображения типа оплаты Mokka. По умолчанию необходимо ставить 0.
   • Cтатус – состояние модуля.
   • Максимальная доля заказа для оплаты частями, % – процент суммы, которую клиент сможет оплатить с помощью Мокка (по умолчанию, 100%).
5. Перейдите во вкладку «API»

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

   • ID магазина и Секретный ключ (тестовый режим) — выдаётся сотрудником Мокка для проведения предварительных тестов. Требуется, если активирован тестовый режим.
   • ID магазина и Секретный ключ — выдаётся сотрудником Мокка.
6. Перейдите во вкладку «Виджет»

   • Статус виджета на странице товара — состояние модуля.

   • Цветовая схема — позволяет выбрать шаблон отображения виджета сервиса Mokka.
7. Перейдите во вкладку «Ошибки»

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

   • Укажите email адрес, на который вы хотите получать отчеты об ошибках.

8. После произведения настроек кликните «Сохранить» чтобы применить настройки.
9. После установки и активации модуля на страницах товара должны появиться виджет «Битой цены» и добавиться способ оплаты «Мокка – оплата авансом» в корзине.

Редактор шаблонов

Для пользователей, использующих редактор шаблона (Дизайн / редактор шаблона), а именно изменяют файл product/product.twig. Необходимо вставить перед кнопкой «Купить» (в коде она может выглядеть так)

<button id="button-cart" class="btn btn-primary btn-lg btn-block" type="button" data-loading-text="{{ text_loading }}">
    {{ button_cart }}
</button>

либо там где нужно отобразить кнопку, рядом со стоимостью товара, добавить следующий код:

{% if mokka_status == "1" %}
  <br />
  {% if mokka_color_scheme == "Mokka_price1" %}

<div class="mokka-price">
<div class="mokka-price__container">
<div class="mokka-price__wrp">
<div class="mokka-price__price reg_mokka">
<p>{{ mokka_left_text }} <strong>{{min_price}}</strong> {{ mokka_right_text }}</p>
</div>
<div class="mokka-price__logo reg_mokka"> </div>
<div class="mokka-price__payment"><span class="reg_mokka">{{mokka_right_text_widget}}</span>
<div class="mokka-price__tooltip"> </div>
</div>
</div>
</div>
</div>

  {% elseif mokka_color_scheme == "Mokka_price2" %}

<div class="mokka-price mokka-price--orange">
<div class="mokka-price__container">
<div class="mokka-price__wrp">
<div class="mokka-price__price reg_mokka">
<p>{{ mokka_left_text }} <strong>{{min_price}}</strong> {{ mokka_right_text }}</p>
</div>
<div class="mokka-price__logo reg_mokka"> </div>
<div class="mokka-price__payment"><span class="reg_mokka">{{mokka_right_text_widget}}</span>
<div class="mokka-price__tooltip"> </div>
</div>
</div>
</div>
</div>

  {% elseif mokka_color_scheme == "Mokka_price3" %}

<div class="mokka-price mokka-price--black-no-bg">
<div class="mokka-price__container">
<div class="mokka-price__wrp">
<div class="mokka-price__price reg_mokka">
<p>{{ mokka_left_text }} <strong>{{min_price}}</strong> {{ mokka_right_text }}</p>
</div>
<div class="mokka-price__logo reg_mokka"> </div>
<div class="mokka-price__payment"><span class="reg_mokka">{{mokka_right_text_widget}}</span>
<div class="mokka-price__tooltip"> </div>
</div>
</div>
</div>
</div>

  {% elseif mokka_color_scheme == "Mokka_price4" %}

<div class="mokka-price mokka-price--black">
<div class="mokka-price__container">
<div class="mokka-price__wrp">
<div class="mokka-price__price reg_mokka">
<p>{{ mokka_left_text }} <strong>{{min_price}}</strong> {{ mokka_right_text }}</p>
</div>
<div class="mokka-price__logo reg_mokka"> </div>
<div class="mokka-price__payment"><span class="reg_mokka">{{mokka_right_text_widget}}</span>
<div class="mokka-price__tooltip"> </div>
</div>
</div>
</div>
</div>

  {% endif %}
{% endif %}

<div class="mokka-popup">
<div class="mokka-payment mokka-popup__popup">
<div class="mokka-payment__container">
<div class="mokka-payment__title">{{title}}</div>
<div class="mokka-payment__description">
<p>{{ mokka_description }}</p>
</div>
<div class="mokka-payment__features">
<div class="mokka-payment__item">
<div class="mokka-payment__item-img"><img src="{{image_1}}" alt="img" /></div>
<div class="mokka-payment__item-text">
<p>{{text_1}}</p>
</div>
</div>
<div class="mokka-payment__item">
<div class="mokka-payment__item-img"><img src="{{image_2}}" alt="img" /></div>
<div class="mokka-payment__item-text">
<p>{{text_2}}</p>
</div>
</div>
<div class="mokka-payment__item">
<div class="mokka-payment__item-img"><img src="{{image_3}}" alt="img" /></div>
<div class="mokka-payment__item-text">
<p>{{text_3}}</p>
</div>
</div>
</div>
<div class="mokka-popup__btn-wrp"> </div>
</div>
</div>
</div>

  <script>
    $('.reg_mokka').on('click', function() {
      $.ajax({
        url: 'index.php?route=extension/payment/mokka/registration',
        type: 'post',
        dataType: 'json',
        data: {'link' : window.location.href},
        success: function(json) {
        if (json['iframe_url']) {
          REVO.Form.showPopup(json['iframe_url']);
        } else {
          $('#Modal_mokka_error').modal();
          $('#mokka_error').html(json['message']);
        }
        }
      });
   });
  </script>

<div id="Modal_mokka_error" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div id="mokka_error">
<div> </div>
</div>
</div>
</div>
</div>

Маркетинговые коммуникации

Баннер Мокка на главной странице

1. Выбрать из доступных шаблонов баннер с максимальным сроком выплаты аванса по вашему тарифу. Например, если ваш тариф подразумевает авансы на 3 и 6 месяцев, то нужно выбрать баннер со значением 6 месяцев (максимальный срок можно уточнить у вашего менеджера).
2. Выделить выбранный баннер и нажать кнопку «Export» в правом верхнем углу экрана;
3. В открывшемся окне выбрать подходящий формат и размер баннера;
4. Нажать кнопку «Export».
5. Баннер должен быть размещен на главной странице вашего сайта. При щелчке на баннер необходимо реализовать переход по ссылке на лендинг. 

Размещение логотипа Мокка в платежных системах

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

   <img class="mokka" src="ПУТЬ К ЛОГОТИПУ" />

4. В результате логотип Мокка будет отображен среди доступных платежных систем.

Размещение описания Мокка в Способах оплаты

Описание сервиса Мокка должно присутствовать в разделе «Доставка и оплата» и «FAQ» (если такие разделы есть) для того, чтобы посетители сайта имели возможность ознакомиться с сервисом. Текст описания должен быть взят из прототипа.

Тестирование

Оформления заказа

1. Соберите корзину на минимальную сумму.
2. Перейдите в корзину.
3. В способах оплаты выберите «Мокка – оплата авансом».
4. Нажмите «Оформить заказ».
5. На экране откроется форма ввода данных. Заполните все поля формы. Номер телефона для одобрения на тестовой среде должен соответствовать маске +7 8881xxxxxx.
6. Нажмите «Оформить» и введите код подтверждения (на тестовой среде всегда 1111).
7. Выберите интересующий вас график платежей и нажмите кнопку “Оплатить авансом”.

Выполнен

1. Перейдите в раздел «Заказы» в административной панели OpenCart.
2. Откройте оформленный ранее заказ нажатием на его ID.
3. Переведите заказ в статус «Выполнен».
4. Нажмите «Сохранить»

В результате заказ будет выполнен.

Отмена/Возврат

1. Перейдите в раздел «Заказы» в административной панели OpenCart.
2. Откройте оформленный ранее заказ нажатием на его ID.
3. Переведите заказ в статус «Возврат».

В результате возврат будет осуществлен.

Активация

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

1. Откройте страницу «Модули/Расширения»

2. В фильтре выберите «Оплата»

3. Найдите в списке  Мокка – оплата авансом», затем нажмите редактировать напротив модуля.

4. Замените значения «боевые ID Магазина» и «Секретный ключ» на те, которые сообщит вам команда Мокка.
5. Затем  уберите галочку «Тестовый режим». 
6. Нажмите «Сохранить».

В результате способ оплаты «Мокка – оплата авансом» станет доступен для посетителей вашего сайта.

Свяжитесь с командой интеграции Мокка в integration@mokka.ru или с вашим менеджером. Для активации мы проверим все функции и размещенную коммуникацию на соответствие стандартам сервиса.

Обновление

1. Откройте страницу «Модули/Расширения» — «Установка расширений».
2. Нажмите загрузить и выберите архив с новой версией.
3. После загрузки архива нужно обновить модификатор на странице «Модули/Расширения» –> «Модификаторы».